STYLELITE CSS

CSS for Minimalist

 
 
 

Overview

DIV is not the only tag avalible to your designs. Mimic traditional .container class by just using a MAIN tag.

Need to divide major sections of your code, eh...use SECTION tag.

And for that little extra content flair, wrap in an ARTICLE tag.

Typography

The alternative to good design is always bad design. there is no such thing as no design. Simplicity carried to an extreme, becomes elegance. -- Adam Judge

P Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum luctus arcu, eu faucibus ex. Ut consequat lorem eget aliquet semper. Praesent quis vestibulum ante, id tristique leo. Etiam sed congue lacus. Nunc ut ornare metus. Suspendisse tincidunt in odio eu faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.

STRONG Generated 1 paragraph, 52 words, 354 bytes of Lorem Ipsum

H1 Heading...

H2 Heading...

H3 Heading...

H4 Heading...

H5 Heading...
H6 Heading...

P can simply be a paragraph

A can be a link

STRONG can be bold

U can be underlined

EM can be emphasised

SMALL can be small

CODE can be code

HR
IMG
Example image

Lists

UL
  • LIList Item
  • LIList Item
  • LIList Item
  • LIList Item
OL
  1. LIList Item
  2. LIList Item
  3. LIList Item
  4. LIList Item

Forms

Details Summary
Default details and summary behavior. wrap content in tag, like div

Buttons

Tables

One Two There
Data Data Data
Data Data Data
Data Data Data

Grid System

The flex-based grid system dynamicly divides content on the number of child elements under row, be that a plain div(auto) or col-*

column sizes range from col-1 to col-5

a col-5 is 5x col-1

if col-* is not defined on a div, it is considered a col-1

auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
2
auto
auto
auto
auto
3
auto
auto
auto
auto
4
auto
auto
auto
auto
5
auto
auto
auto
auto

Components

Header
Content
Footer

Utility

.content adds uniform padding
.left float content left
.right float content right
.center text aligns content center
.grid dynamic grid layout helper
.sm reduces component size by half
.lg increase component size by 75%
.outline
.underline
.border
.spaceless
.subtitle designed for tigher fit under headings
.fill fills all available space
.clear clear float fix