design resources and assets for the dat project
npm install npm run watch-css npm run watch-site open dist/index.html
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">
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.
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
dat-design npm module with the following syntax:
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:
node-sass-magic-importer offers lots of other options in addition to these as well.
By importing dat-design in your projects (s)css, you’ll get the following:
Dat-design uses Normalize, which makes browsers render all elements more consistently.
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.
There’s also a set of custom classes for dat-specific components, like buttons or loaders. Those components are documented in the Dat Styleguide.
Dat-design comes with ready-to-use logo assets, in
If some dat project is in need of a new design element or concept please open an issue!