Dapper
A OOCSS utility toolkit library and framework using component, rework and autoprefixer motiviated by front-end frameworks like bootstrap and foundation, as well as modular component frameworks such as suit.
The goal is to create a framework you can't outgrow. Frameworks like bootstrap and foundation are great, but once you start doing your own styling, the framework becomes a burden. You have to work around the rules and opinions they've set for you. But not with Dapper!
For a walkthrough, view the modal example walkthrough and demo.
Unopinionated
You inherit rules like so:
You decide selector names, not Dapper.
There's no global selector pollution.
There's no crazy selectors to avoid global pollution.
And placeholders are semantic - %horizontal-list means it's a horizontal list!
Styles are also minimal and functional. You should never have to work around them.
Aside from inherit: (or inherits:, extend:, extends:),
you're writing plain CSS.
There's no choosing between SASS, SCSS, Less, or Stylus.
That's as unopinionated as you can be with preprocessors.
Using a preprocessor may still work with Dapper,
but only if it keeps all placeholders intact after compiling.
Modular
Dapper is split into multiple repositories, allowing you to work with only parts of Dapper. This gives you leverage against Dapper v1, v2, v3 changes, though the goal is to never reach v2.
Tiny final footprint
Thanks to placeholders, rules you don't use won't be included in your final build. Each rule is only defined once, so there's no repetition like you see with Less mixins. Don't worry about large builds with unused CSS like you do in Bootstrap.
Learn More
To learn more, read the FAQ. For a walkthrough, view the modal example walkthrough and demo.
Manifest
Build faster by inheriting your rules from these classes.
component install dappercss/dapper
Install all of dapper's placeholder classes in your build.
You are expected to run the final build through your own rework reprocessor using rework.extend(),
or you can just use dapper(1).
dapper(1)
npm i -g dapperA minimalist rework and autoprefixer CSS preprocessor.
When using dapper, you are expected to use your own rework setup that includes both rework.extend() and autoprefixer.
If you don't want to create your own CSS preprocessor,
you can always just use dapper(1).
dapper [<input>] [<output>]
input is optional and is the input CSS file.
output is optional and is the output CSS file.
Setting either one as - means stdin or stdout, respectively.
Example build process:
# install dependencies component install# build everything component build# overwrite the CSS build dapper build/build.css build/build.css# print the output dapper build/build.css -License
The MIT License (MIT)
Copyright (c) 2013 Jonathan Ong me@jongleberry.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.