New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

dat-design

Package Overview
Dependencies
Maintainers
7
Versions
27
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dat-design

design assets and docs for dat project

  • 5.0.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
5
decreased by-70.59%
Maintainers
7
Weekly downloads
 
Created
Source

dat-design

NPM version Join the chat at https://gitter.im/datproject/design

design resources and assets for the dat project

Build and deploy documentation website

run ./scripts/build

Build and/or develop on this module:

npm install
npm run watch-css
npm run watch-site
open dist/index.html

api for importing (s)css assets into other projects

from your project’s root directory (assuming you’re using npm):

npm install dat-design --save

from here you have the following choices for including individual .css files in your project:

the simplest way to include this module in another project. just include the stylesheet you want in your html as you would any other stylesheet with a relative link. not recommended for use in production web apps because this would involve making your node_modules directory accessible from the web:

<link type="text/css" rel="stylesheet" href="./../node_modules/dat-design/css/base.css">
vanilla @import:

from within a css file in your project, include a relative path to the file you want to include from this repo, which is now in your project’s nodule_modules directory. not recommended for use in production web apps without a build step that removes the @import, since @import is not performant on the fly.

@import './../node_modules/dat-design/public/css/base.css';
node-sass-magic-importer:

Use the magic importer npm module with node-sass.

npm install node-sass-magic-importer --save-dev

when you set up node-sass to run in your package.json scripts, you can use the --importer option like so:

"build-css": "node-sass --importer node_modules/node-sass-magic-importer src/scss/sample.scss public/css/sample.css"

now, from within your sample.scss file, you can @import this dat-design npm module with the following syntax:

@import "~dat-design";

if there's no file path specified after the dat-design module name (like above), the @import rule resolves to the file defined by this module's style property in the package.json. you can also point at individual files within this module from within the scss files in your project to use mixins and variables:

@import "~dat-design/base/buttons.scss"

node-sass-magic-importer offers lots of other options in addition to these as well.

How To Use Dat (S)CSS in Your Project

By importing dat-design in your projects (s)css, you’ll get the following:

Reset

Dat-design uses Normalize, which makes browsers render all elements more consistently.

Variables

The SCSS version of dat-design provides you with variables for colors and transitions which you should use in your project to ensure visual consistency between dat-related projects. Refer to the Dat Styleguide to understand how.

Dat classes

There’s also a set of custom classes for dat-specific components, like buttons or loaders. Those components are documented in the Dat Styleguide.

Logo Assets

Dat-design comes with ready-to-use logo assets, in ./../node_modules/dat-design/public/img.

Is something missing?

If some dat project is in need of a new design element or concept please open an issue!

Keywords

FAQs

Package last updated on 06 Jun 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc