dookie-css
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 includeswebkit
,moz
,ms
,o
andofficial
which means unprefixed property); -
ie-support
- set totrue
to enable special IE properties likefilter: alpha(opacity = 100)
etc. -
font-stack
- global font-family stack; -
sans-serif
-serif
andmonospace
- 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?!
Because it's awesome Green Day's album from my childhood :)
MIT Licensed (c) 2013 Dmitri Voronianski
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.
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: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:
And then it works. Should I submit a pull request?
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, thesize()
mixin forces the units to bepx
.In my opinion, it should only set the units to
px
if they aren't already specified. That way,size 10
will becomewidth: 10px; height: 10px;
butsize 10%
will remain aswidth: 10%; height: 10%;
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.
Changelog
Sourced from express's changelog.
Commits
e1b45eb
4.17.10a48e18
Revert "Improve error message for null/undefined to res.status"eed05a1
build: [email protected]10c7756
4.17.09dadca2
docs: remove Gratipay linksb8e5056
tests: ignore unreachable line94e48a1
build: update example dependenciesefcb17d
deps: [email protected]b9ecb9a
build: support Node.js 12.x5266f3a
build: test against Node.js 13.x nightlyMaintainer changes
This version was pushed to npm by dougwilson, a new releaser for express since your current version.
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 languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
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.
Changelog
Sourced from ejs's changelog.
Commits
Maintainer changes
This version was pushed to npm by mde, a new releaser for ejs since your current version.
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 languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
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.
Commits
de073ed
0.17.1e0c5355
deps: range-parser@~1.2.17e4e845
Set stricter CSP header in redirect & error responses836ed62
build: [email protected]0ef8f0c
0.17.0e6844c4
Revert "deps: depd@~2.0.0"964921a
build: [email protected]452c90d
build: [email protected]6087d95
build: [email protected]b443956
build: [email protected]Maintainer changes
This version was pushed to npm by dougwilson, a new releaser for send since your current version.
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 languageYou can disable automated security fix PRs for this repo from the Security Alerts page.