CSS library built on top of the Stylus preprocessor

  • By Dmitri Voronianski
  • Last update: Jul 9, 2021
  • Comments: 6

dookie-css

NPM version

CSS library built on top of the Stylus preprocessor. It provides a couple of useful stylus mixins, utilities and components.

How to install

At first install package into your project:

npm install dookie-css

Express.js (Connect)

For express or connect framework you can simply include dookie middleware method into Stylus' compiler:

var	stylus = require('stylus'),
	dookie = require('dookie-css');

...

app.configure(function(){
	...
	app.use(stylus.middleware({ src: __dirname + '/public', compile: dookie.middleware }));
})

More about Stylus middleware here.

###Other environments

As for pure node.js or some other cases dookie has method called css. Here is an example of simple static server.js using Stylus + dookie:

var stylus = require('stylus'),
    dookie = require('dookie-css');

...

// use stylus for styling
stylus(str)
	.use(dookie.css()) // call dookie.css() function
	.render(function (err, css) {
		if (err) {
			throw err;
		}
		// do smth with 'css'
	});

Check out ./examples folder to see how dookie can be introduced with pure node.js static server or express framework.

So now all dookie utilities can be called within your .styl files and it's time to check lib's documentation.

##Stylus cli plugin

If you prefer use Stylus cli executable for converting Stylus to CSS, you can also use dookie with it. In --use option specify path to dookie.js file, for example:

stylus --use ./node_modules/dookie-css/dookie.js --out ./

Further reading about Stylus cli here.

##Documentation

###Settings

Dookie contains default configuration settings.styl. So this depends on your needs, but it's recommended to create your own _settings.styl (could be named whatever you like) and specify or overwrite existed variables.

######Examples:

Here is custom _settings.styl file which specifies vendors that are needed, and path to the folder with images:

img-path = '../images/'
vendors = webkit moz

Now in your main Stylus file we add @import configuration and start to use dookie easily:

@import '_settings'

...

######List of global settings:

  • img-path - path to the app folder with images (empty by default);

  • vendors - list of vendors you want to use (by default includes webkit, moz, ms, o and official which means unprefixed property);

  • ie-support - set to true to enable special IE properties like filter: alpha(opacity = 100) etc.

  • font-stack - global font-family stack;

  • sans-serif- serif and monospace - default font-families;

  • font-size - global font-size variable;

  • default-color - global font color fallback;

Settings file is also a good place to put your own configuration on the project.

###Reset mixins

These helpers are global (this also means you should use them in mixin form - mixin(args) instead of mixin: args):

reset() - simple base and recommended reset;

normalize() - popular normalize.css reset;

fields-reset() - reset input fields from sometimes annoying browser based styles (on ::required, ::valid, ::invalid, etc. pseudo-classes);

###Common useful helpers

Shorter replacements for display: block | inline-block | none respectively:

block(), inline-block(), hide();

Frequently used text transformation and decoration properties shorthands:

reset-case(), upcase(), lowcase(), nodecorate(), underline(), etc.

Font styles:

bold(), italic(), normal()

#####fs: [your font-size]

font-size shortener;

#####fw: [your font-weight]

font-weight shortener;

######Examples:

h2
	fs: 2em
	fw: 500
	italic()

.link
	block()
	nodecorate()

/* yields => */
h2 {
	font-size: 2em;
	font-weight: 500;
	font-style: italic;
}

.link {
	display: block;
	text-decoration: none;
}

#####clearfix()

basic clearfix, simply add it to your class name or call global mixin base-classes() within your project to have it in .clearfix class;

#####size: [width, height]

cool and useful dimensions shortener, example:

.box
	size: 30px

.longbox
	size: 100px 20px

/* yields => */
.box {
	width: 30px;
	height: 30px;
}

.longbox {
	width: 100px;
	height: 20px;
}

#####bg: [path], [args optional]

background mixin shortener, example:

.logo
	bg: 'logo.png'

.cat
	bg: 'cat.jpg' 100px 80px no-repeat #DDD

/* yields => */
.logo {
	background: url("../images/logo.jpg") no-repeat;
}

.cat {
	background: url("../images/cat.jpg") 100px 80px no-repeat #DDD;
}

#####bg-retina:[path], [args optional]

very similar mixin but adds background-size: contain property for retina displays (use it together with @media all and (-webkit-min-device-pixel-ratio: 1.5));

Note: if you specify images folder in your settings img-path variable it allows you to put only picture file name in all dookie mixins;

#####image-block: [path], [dimensions optional]

mixin that replaces block with image specified in it.

Note: .png images could skip dimensions, because of Stylus native image-size() built-in function, example:

.replacer
	image-block: 'default.png'

/* yields => */
.replacer {
	background: url("../images/default.png") no-repeat;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
	width: 300px;
	height: 200px;
}

#####text-overflow: [width], [type optional]

useful when long text line need to be overflowed, default type is ellipsis, example:

.description
	text-overflow: 300px

/* yields => */
.description {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 300px;
}

#####text-hide()

hiding text mixin;

#####no-select()

disallow user to select element;

#####round()

makes element rounded corners, useful for large ones;

#####opacity: [opacity]

same as native css property but if your settings set ie-support to true mixin adds old-school IE filter property by itself;

#####triangle: [up|down|left|right], [size|default: 10px], [color|default: #000]

cool pure css triangle mixin, example:

.triangle
	triangle: down 15px #F80

/* yields => */
.triangle {
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #F80;
}

###Positioning

Dookie allows you to shorten css element positioning while using simply one line property.

#####absolute: [name value], ...

#####relative: [name value], ...

#####fixed: [name value], ...

#####static: [name value], ...

######Example:

.box
	absolute: top 10px left 15px

/* yields => */
.box {
	position: absolute;
	top: 10px;
	right: 15px;
}

###Sprites

Dookie has several helpers to simplify your work with sprites.

#####sprite-grid: [path], [x], [y], [grid]

basic grid helper, [path] to your sprite picture, [x], [y] - square counts where icon is placed and [grid] param is your grid step (also can be as 2 params - gridX and gridY), example:

.sprite-pic
	sprite-grid: 'sprite.png' 1 1 32px


/* yields => */
.sprite-pic {
	background: url("../images/sprite.png") no-repeat;
	background-position: -64px -32px;
}

#####sprite-replace: [path], [x], [y], [grid]

same as previous one but also replaces text within an element with icon from the sprite;

Note: nice article describing these techniques by Niels Matthijs;

###Vendor prefixes

Dookie intelligently simplifies usage of css properties that mostly need to be prefixed. Only thing that you should do is to setup in your _settings.styl which prefixes you want to use (by default all of them are included). List of property mixins:

#####box-shadow: [args...]

#####border-radius: [args...]

#####box-sizing: [args...]

#####animation: [args...]

#####transition: [args...]

#####transformation: [args...]

#####perspective: [args...]

#####backface-visibility: [args...]

#####filters: [args...]

Note: Properties like animation, transition, transform and perspective also include all separate dependent props like animation-name, transition-delay, perspective-origin etc.

#####-prefix: [property], [args...]

It is also good to know that if you need some property to be prefixed, you can use dookie's -prefix method while passing into it property name and value, example:

.box
	-prefix(some-prop, value1 value2)

/* yields => */
.box {
	-webkit-some-prop: value1, value2;
	-moz-some-prop: value1, value2;
	-o-some-prop: value1, value2;
	-ms-some-prop: value1, value2;
	some-prop: value1, value2;
}

###Easings

Custom timing functions useful for ui-transitions, see all of them in action here:

#####ease-in- quad, cubic, quart, quint, sine, expo, circ, back

#####ease-out- quad, cubic, quart, quint, sine, expo, circ, back

#####ease-in-out- quad, cubic, quart, quint, sine, expo, circ, back

######Example:

.animated
	transition: all 300ms ease-in-quad

/* yields => */
.animated {
	-webkit-transition: all 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	-moz-transition: all 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	-o-transition: all 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	-ms-transition: all 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	transition: all 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

###Gradients

#####linear-gradient([start], [stops...])

mixin should be called within the property (background-image or background depends on what you prefer), example:

.gradient
	background-image: linear-gradient(red, orange, yellow 80%)

/* yields => */
.gradient {
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f00), color-stop(0.33333333333333326, #ffa500), color-stop(0.8, #ff0));
	background-image: -moz-linear-gradient(top, #f00 0%, #ffa500 33.33333333333333%, #ff0 80%);
	background-image: -webkit-linear-gradient(top, #f00 0%, #ffa500 33.33333333333333%, #ff0 80%);
	background-image: -o-linear-gradient(top, #f00 0%, #ffa500 33.33333333333333%, #ff0 80%);
	background-image: -ms-linear-gradient(top, #f00 0%, #ffa500 33.33333333333333%, #ff0 80%);
	background-image: linear-gradient(top, #f00 0%, #ffa500 33.33333333333333%, #ff0 80%);
}

#####radial-gradient([stops...])

same as previous one but radial, example:

.circle
	background-image: radial-gradient(#f1c40f, #f39c12 50%)

/* yields => */
.circle {
	background-image: -webkit-gradient(radial, center center 0px, center center 100%, color-stop(0, #f1c40f), color-stop(0.5, #f39c12), );
	background-image: -moz-radial-gradient(center, ellipse cover, #f1c40f 0%, #f39c12 50%);
	background-image: -webkit-radial-gradient(center, ellipse cover, #f1c40f 0%, #f39c12 50%);
	background-image: -o-radial-gradient(center, ellipse cover, #f1c40f 0%, #f39c12 50%);
	background-image: -ms-radial-gradient(center, ellipse cover, #f1c40f 0%, #f39c12 50%);
	background-image: radial-gradient(ellipse at center, #f1c40f 0%, #f39c12 50%);
}

#####gradient: [colorStart], [colorStop]

shorthand for two colors linear-gradient, example:

.box
	gradient: #F80 #F00

/* yields => */
.box {
	background: #f00;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f80), color-stop(1, #f00));
	background-image: -moz-linear-gradient(top, #f80 0%, #f00 100%);
	background-image: -webkit-linear-gradient(top, #f80 0%, #f00 100%);
	background-image: -o-linear-gradient(top, #f80 0%, #f00 100%);
	background-image: -ms-linear-gradient(top, #f80 0%, #f00 100%);
	background-image: linear-gradient(top, #f80 0%, #f00 100%);
}

#####simple-gradient: [color], [strength percents|default: 10%]

generates linear-gradient from one color;

###Global mixins

As reset helpers these mixins are global and should be called not within css selector but in file root.

#####base-classes()

adds couple of useful classes that you might add anyways, full list of them:

.left, .right, .clear, .show, .hide, .bold, .italic, .bullet, .clearfix, .rounded

#####text-selection([highlight color], [text color|default: 'white'])

selection background and text color;

#####border-box()

enable border-box sizing globally;

#####font-face([name], [folder], [weight optional], [style optional])

bulletproof @font-face mixin, keep in mind that font name should be the same as font filename;

######Example:

font-face(DIN, '/fonts')

@font-face
	font-family: 'DIN';
	src: url('DIN.eot');
	src: url('DIN.eot?#iefix') format('embedded-opentype'),
		 url('DIN.woff') format('woff'),
		 url('DIN.ttf') format('truetype'),
		 url('DIN.svg#DIN') format('svg');
	font-weight: normal;
	font-style: normal;

##Test

Together with Stylus and dookie you can easily create tests for your mixins and utilities. Read more how you can test dookie itself with mocha.js and casper.js here - ./test/README.md.

##Contribute

Dookie is in beta yet, so issues or useful pull requests are highly appreciated.

##Why dookie?!

Green Day's Dookie button

Because it's awesome Green Day's album from my childhood :)

MIT Licensed (c) 2013 Dmitri Voronianski

Github

https://github.com/voronianski/dookie-css

Comments(6)

  • 1

    Change the dookie graphic

    Despite this possibly being a fine library I just couldn't look past the stinking heap of shit (it is shit, is it not?) that's the graphic for dookie. Please change it, I think this library misses out on quite some love just because of a single image.

  • 2

    Using dookie via command line does not work

    If I'm compiling stylus via command line using the -u parameter, like this: stylus -c -u dookie-css style.styl -o ./. But I get the following error:

    module.js:340
    throw err;
          ^
Error: Cannot find module 'dookie-css'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at /usr/local/lib/node_modules/stylus/bin/stylus:602:10
    at Array.forEach (native)
    at usePlugins (/usr/local/lib/node_modules/stylus/bin/stylus:599:11)
    at /usr/local/lib/node_modules/stylus/bin/stylus:508:9
    at fs.js:266:14
    at Object.oncomplete (fs.js:107:15)

    The problem is that the module is not defined. I've made a quick fix by editing the index.js file and changing the line 16 to:

    exports.css = module.exports = css;

    And then it works. Should I submit a pull request?

  • 3

    Don't set units to px if already specified, for size() mixin

    I want a div to fill its parent, so I did size 100%. However, the size() mixin forces the units to be px.

    In my opinion, it should only set the units to px if they aren't already specified. That way, size 10 will become width: 10px; height: 10px; but size 10% will remain as width: 10%; height: 10%;

  • 4

    Bump express from 3.2.6 to 4.17.1 in /examples/express-app

    Bumps express from 3.2.6 to 4.17.1.

    Release notes

    Sourced from express's releases.

    4.17.1

    • Revert "Improve error message for null/undefined to res.status"

    4.17.0

    ... (truncated)
    Changelog

    Sourced from express's changelog.

    4.17.1 / 2019-05-25

    • Revert "Improve error message for null/undefined to res.status"

    4.17.0 / 2019-05-16

    ... (truncated)
    Commits
    Maintainer changes

    This version was pushed to npm by dougwilson, a new releaser for express since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 5

    Bump ejs from 0.8.8 to 3.1.3 in /examples/express-app

    Bumps ejs from 0.8.8 to 3.1.3.

    Release notes

    Sourced from ejs's releases.

    v3.0.2

    No release notes provided.

    v2.7.4

    Bug fixes

    v2.7.3

    Bug fixes

    v2.7.2

    Features

    • Added support for destructuring locals (#452, @ExE-Boss)
    • Added support for disabling legacy include directives (#458, #459, @ExE-Boss)
    • Compiled functions are now shown in the debugger (#456, @S2-)
    • function.name is now set to the file base name in environments that support this (#466, @ExE-Boss)

    Bug Fixes

    • The error message when async != true now correctly mention the existence of the async option (#460, @ExE-Boss)
    • Improved performance of HTML output generation (#470, @nwoltman)

    v2.7.1

    Deprecated:

    • Added deprecation notice for use of require.extensions (@mde)

    v2.6.2

    • Correctly pass custom escape function to includes (@alecgibson)
    • Fixes for rmWhitespace (@nwoltman)
    • Examples for client-side EJS compiled with Express middleware (@mjgs)
    • Make Template constructor public (@ThisNameWasTaken)
    • Added remove function to cache (@S2-)
    • Recognize both 'Nix and Windows absolute paths (@mde)

    v2.5.8

    • Add filename to error when include file cannot be found (@Leon)
    • Node v9 in CI (@Thomas)
    • Fixed special case for Express caching (@mde)
    • Added Promise/async-await support to renderFile (@mde)
    • Added notes on IDE support to README (@Betanu701)

    v2.5.7

    • Pass configured escape function to rethrow (@straker)
    • Added vulnerabilities info into README (@mde)
    • Avoid creating function object in hot execution path (@User4martin)
    ... (truncated)
    Changelog

    Sourced from ejs's changelog.

    v3.0.1: 2019-11-23

    • Removed require.extensions (@mde)
    • Removed legacy preprocessor include (@mde)
    • Removed support for EOL Nodes 4 and 6 (@mde)

    v2.7.4: 2019-11-19

    Bug fixes

    • Fixed Node 4 support, which broke in v2.7.3 (5e42d6c, @mde)

    v2.7.3: 2019-11-19

    Bug fixes

    v2.7.2: 2019-11-13

    Features

    • Added support for destructuring locals (#452, @ExE-Boss)
    • Added support for disabling legacy include directives (#458, #459, @ExE-Boss)
    • Compiled functions are now shown in the debugger (#456, @S2-)
    • function.name is now set to the file base name in environments that support this (#466, @ExE-Boss)

    Bug Fixes

    • The error message when async != true now correctly mention the existence of the async option (#460, @ExE-Boss)
    • Improved performance of HTML output generation (#470, @nwoltman)

    v2.7.1: 2019-09-02

    • Added deprecation notice for use of require.extensions (@mde)

    v2.6.2: 2019-06-19

    • Correctly pass custom escape function to includes (@alecgibson)
    • Fixes for rmWhitespace (@nwoltman)
    • Examples for client-side EJS compiled with Express middleware (@mjgs)
    • Make Template constructor public (@ThisNameWasTaken)
    • Added remove function to cache (@S2-)
    • Recognize both 'Nix and Windows absolute paths (@mde)

    v2.6.1: 2018-04-18

    • Async rendering (@Viko)

    v2.5.9: 2018-04-18

    • Fixed options-passing for Express (@mde)
    • Re-enabled performance tests (@mde)

    v2.5.8: 2018-03-25

    • Add filename to error when include file cannot be found (@Leon)
    • Node v9 in CI (@Thomas)
    ... (truncated)
    Commits
    Maintainer changes

    This version was pushed to npm by mde, a new releaser for ejs since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 6

    Bump send from 0.1.4 to 0.17.1 in /test

    Bumps send from 0.1.4 to 0.17.1.

    Changelog

    Sourced from send's changelog.

    0.17.1 / 2019-05-10

    0.17.0 / 2019-05-03

    • deps: [email protected]~1.7.2
    • deps: [email protected]
      • Add extensions for JPEG-2000 images
      • Add new font/* types from IANA
      • Add WASM mapping
      • Update .bdoc to application/bdoc
      • Update .bmp to image/bmp
      • Update .m4a to audio/mp4
      • Update .rtf to application/rtf
      • Update .wav to audio/wav
      • Update .xml to application/xml
      • Update generic extensions to application/octet-stream: .deb, .dll, .dmg, .exe, .iso, .msi
      • Use mime-score module to resolve extension conflicts
    • deps: [email protected]
      • Add week/w support
      • Fix negative number handling
    • deps: [email protected]~1.5.0
    • perf: remove redundant path.normalize call

    0.16.2 / 2018-02-07

    0.16.1 / 2017-09-29

    • Fix regression in edge-case behavior for empty path

    0.16.0 / 2017-09-27

    ... (truncated)
    Commits
    Maintainer changes

    This version was pushed to npm by dougwilson, a new releaser for send since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

Popular Tag

Related