Stylus Boilerplate is a no-bullshit UI framework that is built for performance and compatibility.
It's meant for designers and developers who care about the bloat modern front-end frameworks like Bootstrap and Foundation are introducing, and aims to solve these issues with a simplistic, modular approach.
Similar to organic CSS, this project uses placeholders, so as to reduce duplicate code. But you are not forced into this strategy. As a result, your css can parse slightly faster, and you have to maintain less code.
Choose one of the following options:
- (NPM) Install using npm -
npm install stylus-boilerplate --save-dev
- Clone the git repo —
git clone https://github.com/srsgores/Stylus-boilerplate-boilerplate.git
- and checkout the taggedrelease you'd like to use.
Then bring in the styles to your project:
@require "../node_modules/stylus-boilerplate/app/styles/*"
This idea is to use @extend
in the layout and main styles, or at least anything you use a lot. For example:
.myDiv
@extend $inline-block // results in: display: inline-block
@extend $small-margin-top // results in margin-top: $marginSmall
Then, if you add the same thing to another selector, it gets grouped (that's what @extend
does:
.somethingElse
@extend $inline-block
So you get something like:
.myDiv, .somethingElse {
display: inline-block
}
But remember not to use this technique when building out your components. You want to reduce coupling as much as possible. For reference on components, see the sample components included in this repository, or the next section.
Stylus Boilerplate currently ships with some starting components to get you started. Unlike SASS boilerplate, this time I made sure to keep components more loosely coupled. Now components are only dependent on helpers/index.styl
, and variables are encapsulated within each component.
The following components are included:
- Callouts (speech bubbles)
- (New) Buttons
- Dropdown (menu)
- Forms
- Grid
- Icons (icomoon)
- Navigation
- Tables
You can easily bring in one component, or simply a subset, by either using stylus' file globbing, or using @require
as you require:
// just import callouts
@require "../bower_components/stylus-boilerplate/helpers/index" // helpers is required first
@require "../bower_components/stylus-boilerplate/components/callouts"
At the moment, I still have to set up the gh-pages
branch. In the meantime, you can download this repository, and view the component demo static HTML files
The grid, adapted from Kouto, uses placeholders to group your "gridded" items:
.article--wrapper
@extend $row // extend the parent row to later insert grid items
article
&[role="main"]
@extend $col-8 // takes 2 / 3, assuming $columns is 12
& + aside
@extend $col-4 // assuming $columns is 12, this is 1 / 3
TODO: add auto-generated utility grid classes rather than placeholders for those who are generating HTML:
Markup (jade):
.row
.column
.two-thirds
.other-div // takes the rest of the space
The files under the layout directory are there purely for example. I definitely recommend you adapt the files to your needs. This framework is by no means an "opinionated" standard; I simply find that having a layout folder with layout-specific styles helps to separate concerns.
In this layout folder, you may wish to use the @extends
approach.
Animation placeholders have been added to allow easy-to-use animations. Only the $fadeIn
animation is included by default. It's super simple to bring them in; simply choose the animation, located in the components/animations
folder, and use file globbing:
@import "components/animations/fading_entrances/*"``
.myAnimatedDiv
@extend $fadeIn
Here is a list of all the animations. Animation names are simply camelized:
- attention_seekers
bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
- bling
puffIn
puffOut
vanishIn
vanishOut
- bomb
bombLeftOut
bombRightOut
- bouncing_entrances
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
- bouncing_exits
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
- fading_entrances
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
- fading_exits
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
- flippers
flip
flipInX
flipInY
flipOutX
flipOutY
- lightspeed
lightSpeedIn
lightSpeedOut
- magic_effects
magic
swap
twisterInDown
twisterInUp
- math
foolishIn
foolishOut
holeOut
swashIn
swashOut
- perspective
perspectiveDown
perspectiveDownReturn
perspectiveLeft
perspectiveLeftReturn
perspectiveRight
perspectiveRightReturn
perspectiveUp
perspectiveUpReturn
- rotate
rotateDown
rotateLeft
rotateRight
rotateUp
- rotating_entrances
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
- rotating_exits
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
- sliders
slideDown
slideDownReturn
slideInDown
slideInLeft
slideInRight
slideInUp
slideLeft
slideLeftReturn
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
slideRight
slideRightReturn
slideUp
slideUpReturn
- specials
hinge
rollIn
rollOut
- static_effects
openDownLeft
openDownLeftOut
openDownLeftReturn
openDownRight
openDownRightOut
openDownRightReturn
openUpLeft
openUpLeftOut
openUpLeftReturn
openUpRight
openUpRightOut
openUpRightReturn
- tin
tinDownIn
tinDownOut
tinLeftIn
tinLeftOut
tinRightIn
tinRightOut
tinUpIn
tinUpOut
If you want to customize animations, you can change any of the following variables:
$animationDuration
$animationDelay
$animationTimingFunction
$animationFillMode
$animationIterations
$animationDirection
$animationPlayState
Those animations are global and will affect all animations. If you want to specify one of these for a specific animation, simply add on to the placeholder:
$fadeIn
animation-delay 4s
By default, only the
fadeIn
animations are loaded
- Stylus-ready. Use the new elements with confidence.
- Automatic vendor prefixing, with browser support configuration (all within
helpers/kouto-config.styl
- Designed with progressive enhancement in mind.
- Modularized component-based approach, with minimal coupling only to helpers, mixins, and kouto. Mix and match them as you wish
- WAI-ARIA compliant, with roles. Start caring about accessibility today.
- Icomoon icons included, with better, faster approach to loading icons
- CSS3-animation-ready, with many placeholder animations to choose from, adapted from Dan Eden's animate.css
- Placeholder fixes, placeholder styling
- Media query-ready, with grid system placeholders already implemented. Just extend a
$col-[number]
, and you're good to go. - Useful placeholders like
%small-margin-top
,%large-padding-top
, and so forth. - Fluid, extensible grid system with working media queries via susy grid system
- Apache server caching, compression, and other configuration defaults for Grade-A performance.
- Cross-domain Ajax and Flash in
crossdomain.xml
- "Delete-key friendly." Easy to strip out parts you don't need.
- Extensive inline and accompanying documentation.
Take a look at the documentation table of contents (in progress). This documentation is bundled with the project, which makes it readily available for offline reading and provides a useful starting point for any documentation you want to write about your project.
Anyone and everyone is welcome to contribute. Hundreds of developers have helped make the Stylus Boilerplate what it is today.