Zero

A copy-paste-design module library

modules

h1 heading

h2 heading

h3 heading

h4 heading

Paragraph text.

This set of SCSS modules is bare bones by design. It's my own library of UI modules that I can copy from for new projects and customize as needed. However, the default CSS used in each module make it usable as-is for modern browsers. It currently has modules mostly usable for publishing, although I'm adding other web-app type UI pieces as I need them.

I was inspired by, and downright stole from, some well known favorites1.

Everything should be responsive, and in fact was conceived as small-screen-first. Accessibility is also built-in, but that's mostly true because it's made up of core HTML elements for the most part. Look at _collapsible-menu.scss and _dropdown-menu.scss for the more complex ones.

blockquote

Many years later, as he faced the firing squad, Colonel Aureliano Buendía was to remember that distant afternoon when his father took him to discover ice.2

address

1600 Pennsylvania Avenue
Washington D.C.

pre

						// pre is for letting a text’s whitespace appear as
									entered

animations

Signal
Bounce

grid

12-column grid. Inspired by Foundation 3 (or 4?) and never revisited. It works.

That said, I'm aware that the CSS grid module is imminent and possibly better. Also, Foundation itself has a different approach to the grid in later versions worth looking at.

Column classnames are small screen first, which is why I like it.

Example: .small-12 .medium-6 .large-4

lists

ul

  • list item
  • list item
  • list item

ol

  1. list item
  2. list item
  3. list item

dl

term

definition text

.list--unstyled

  • list item
  • list item
  • list item

.list--inline

  • list item
  • list item
  • list item

.checklist

  • list item
  • list item
  • list item

tables

tfoot is where you might cite a source or metadata about the data
The table’s caption
th 1 th 2 th 3
td 1 td 2 td 3

.table--bordered

tfoot is where you might cite a source or metadata about the data
The table’s caption
th 1 th 2 th 3
td 1 td 2 td 3

alert

alert text is usually a single line. keep it short.
alert success!
alert warning !!!
alert error :(

tags

tag text
tag success
tag warning
tag error

figure

figcaption bare text

figcaption title

figcaption paragraph text

Media Object

Proper credit to Nicole Sullivan.

cover image of the Great Gatsby

Gatsby believed…

… in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther…. And one fine morning–

F. Scott Fitzgerald photo

So we beat on, boats against the current, borne back ceaselessly into the past.

card

figcaption bare text

figcaption title

figcaption paragraph text

forms

This is input help

buttons

.btn

.btn--styled

.btn--float

.btn--styled.btn--float

.btn--disabled

.btn--add

.btn--delete

.btn.bounce.infinite

.btn--has-icon inline checkmark svg

.link--padded

.link--disabled

.link--add

.link--delete

 

.box-row

Feature 1

This feature will surprise and delight you!

Feature 1

This feature will knock your socks off!

Feature 1

This feature will blow your mind!
Splatoon Preliminaries! Splatoon World Cup!

Utilities

Vertical Centering

The simplest, widely-supported method I found was to add three divs within a container. And that container needs to have a defined height. Note that the .box container is set to 300px height for this example. You need a container with a defined height (probably adjusted with media queries as needed)

I know it sucks but I prefer to add html than to add javascript. Not sure why. Maybe because I hate to think of binding to the window resize event. Both options suck, really.

Another option is to use display: table-cell, except that controlling column widths is not widely supported.

  1. Inspiration: 360andup, Foundation, Bootstrap, InuitCSS, and some others.
  2. Footnotes. Give credit where credit is due.