See the tests:

Blackjack is a collection of mixins, functions and helpers written in Stylus to make your front-end development easier and faster.

Blackjack is not a flattened CSS file that you include with your source. It's meant for advanced developers who understand the power of a CSS preprocessor.

Blackjack is written in Stylus and meant to be included directly into your Stylus source. By default, Blackjack will add some sensible resets to certain HTML elements, but this is meant as a starting point rather than an end-all (this is not Bootstrap). You can configure Blackjack to a point where it doesn't spit out any opinionated CSS on its own other than basic resets.

Mix it in

When you include Blackjack, you have the power to mixin parts you like and leave out the parts you don't.

More importantly, behavior stays in your stylesheets instead of leaking into your markup. Keep your HTML clean by naming your elements one time and mixing in behavior on that class. This closely fits BEM style of writing CSS.

Absorb what is useful. Discard what is not. Add what is uniquely your own.

Bruce Lee

Usage

To get the full power out of Blackjack, you must understand a few CSS preprocessor concepts.

Features

  • Doesn't overload your CSS with opinionated resets.
  • Creates robust grid rows.
  • Helper for creating breakpoints.
  • Converts tables into a flexbox layout.
  • A smart starting point for buttons, forms, and other commonly used UI.
  • Don't battle a CSS framework to make your product the way you want it. Mix in Blackjack when it saves you time, ignore it when it doesn't!

Grid

Blackjack can quickly make rows of content. They are built with a flexbox layout but include floats as a fallback. You can set a gutter. Also a breakpoint where the cells stack up in a single column.

It's done with the gridCell mixin and the optional gridContainer mixin.

Mixins

gridContainer
A mixin that requires no arguments. Put this around your cells if you need clearfix or flexbox behavior. Not required but recommended.
gridCell

Takes four arguments:

  • ratio Fraction or decimal representing how much of the grid row the cell should take.
  • startGridAt Grid cells stack on each other until the viewport reaches this passed breakpoint, then the grid row appears. Mobile-first mindset.
  • gutter Space between grid cells.
  • cellsPerRow If the grid cells are expected to wrap, enter the number of cells on each row.

For anything meaningful, ratio and startGridAt should be set. You can skip arguments because Stylus accepts Named Parameters.

Options

defaultGridGutter
If no gutter is specified, grid cells will use this distance as the gutter. Default: 0px
noFlex
If set to true, no flex properties will be added to the grid. Default: false
noCalc
If set to true, the grid will not use the powerful calc() CSS function. If you enable this option, gutters will not work, as they are engineered using calc(). Default: false
gridCell(.25, 768px)
gridCell(.25, 768px)
gridCell(.25, 768px)
gridCell(.25, 768px)
gridCell(.4, 768px)
gridCell(.4, 768px)
gridCell(.2, 768px)
gridCell(.5, 768px, 1vw)
gridCell(.5, 768px, 1vw)
gridCell(1/5, 768px, 1vw)
gridCell(3/5, 768px, 1vw)
gridCell(1/5, 768px, 1vw)
gridCell(1/2, breakpoint, gutter, 2)
gridCell(1/3, bigBreakpoint, gutter, 3)
gridCell(1/2, breakpoint, gutter, 2)
gridCell(1/3, bigBreakpoint, gutter, 3)
gridCell(1/2, breakpoint, gutter, 2)
gridCell(1/3, bigBreakpoint, gutter, 3)
gridCell(1/2, breakpoint, gutter, 2)
gridCell(1/3, bigBreakpoint, gutter, 3)
gridCell(1/2, breakpoint, gutter, 2)
gridCell(1/3, bigBreakpoint, gutter, 3)
gridCell(1/2, breakpoint, gutter, 2)
gridCell(1/3, bigBreakpoint, gutter, 3)
gridCell(1/2, breakpoint, gutter, 2)
gridCell(1/3, bigBreakpoint, gutter, 3)
gridCell(1/3, breakpoint, gutter, 3)
gridCell(1/5, bigBreakpoint, gutter)
gridCell(1/3, breakpoint, gutter, 3)
gridCell(1/5, bigBreakpoint, gutter)
gridCell(1/3, breakpoint, gutter, 3)
gridCell(1/5, bigBreakpoint, gutter)
gridCell(1/3, breakpoint, gutter, 3)
gridCell(1/5, bigBreakpoint, gutter)
gridCell(1/3, breakpoint, gutter, 3)
gridCell(1/5, bigBreakpoint, gutter)

Breakpoints

Blackjack includes a helper mixin to create media query breakpoints.

Mixins

makeBreakpoint

Accepts two arguments and a code block:

  • min A minimum width that the code block should appear.
  • max A maximum width that the code block should appear.

Both arguments are optional, but this helper won't do much if both are omitted.

.breakpoint-demo
    background-color Bisque

    +makeBreakpoint(500px, 750px)
        background-color LightBlue

    +makeBreakpoint(750px, 1000px)
        background-color GreenYellow

    +makeBreakpoint(1000px)
        background-color Pink

Density

Blackjack includes a helper for inserting a media query for pixel density.

Mixins

densityBreakpoint

Accepts one argument and a code block.

  • density The minimum pixel density required for the code block to apply. Default: 2
background url('/rainier.png') no-repeat
background-size 400px 300px 
background url('/rainier.png') no-repeat
background-size 400px 300px

+densityBreakpoint()
    background-image url('/rainier-2x.png')

Animations

Blackjack contains a few animations for use during development. They won't often end up in a production web project, but are useful as placeholders for some other behavior.

Rotation
Shake
Pulse
Hop

Tables

Tables are a nightmare for a modern web developer. Blackjack restyles the table elements into a flex containers and items, something that gives you better control and power than standard table display.

Cells and rows will grow and shrink based on flex properties. You can now give table cells priority using flex-grow and flex-shrink.

Standard table

Column one with really long header Column two Column three
Datum one Datum two Datum three
Datum one Datum two Datum three
Datum one Bacon ipsum dolor amet shankle brisket rump hamburger ground round kevin jowl, corned beef filet mignon ball tip. Chuck ribeye spare ribs cupim. Rump corned beef swine, strip steak hamburger sausage landjaeger capicola shankle drumstick. Ball tip salami biltong, spare ribs leberkas boudin pork belly. Datum three
Datum one Datum two Ham hock bacon corned beef shoulder brisket sausage filet mignon landjaeger prosciutto boudin salami pig pork belly meatloaf capicola.

Zebra list

The zebra list places a background color on every other row, granting easier readability.

Forms

Forms can be a pain to style correctly. The user-agent stylesheets for forms are far from the quality most users expect. Blackjack starts by bringing form fields up to snuff, and then gives you the ability to extend it further.

Buttons

Every website or application has some kind of button. Blackjack sets up a base button then builds states from there. Additional states are configurable.

Anchor Button