easy-css

easy-css is a small ITCSS SASS framework inspired by nebula-css. It uses the BEM naming convention with the namespace 'ea'. It is designed to be extended appropriately using ITCSS. It contains no component layerand thus has no visual styling CSS except for normalizing CSS. Compiling and consuming the file (as you would with Bootstrap) will likely lead to specificity issues.

Github: https://github.com/LeeCheneler/easy-css

npm: https://www.npmjs.com/package/easy-css

Inspect the source of this page to see how to utilize the following features of the framework.

Responsive Typography

Basic responsive typography, rem based sizing configurable for each breakpoint.

(h1)Lorem ipsum

(h2)Lorem ipsum

(h3)Lorem ipsum

(h4)Lorem ipsum

(h5)Lorem ipsum

(h6)Lorem ipsum

(p)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque lobortis leo eget elementum. Aenean et ipsum tristique lorem mattis semper. Etiam ultrices efficitur interdum

Grid

Simple, intuitive grid system. Items are percentage width based. there is no notion of a 'row', items are in a flag list within the grid.

Trench + gutter

1/1

1/2

1/3

2/3

1/4

3/4

1/5

4/5

2/5

3/5

1/6

5/6

1/7

6/7

2/7

5/7

3/7

4/7

1/8

7/8

3/8

5/8

1/9

8/9

2/9

7/9

4/9

5/9

1/10

9/10

3/10

7/10

Match height

Grid Item

Align top

Grid Item

Align center

Grid Item

Align bottom

Grid Item

Align center

Grid Item

Align right

Grid Item

Shove and Pull

Pull 1/8

Shove 1/4

Shove and Pull (responsive)

Pull 1/8@lg

Shove 1/4@md

List

Very simple list, supports inline and uniform spacing.

Basic list

one
two
three

Bare list

one
two
three

Trench

List Item
List Item
List Item

Inline + gutter + trench

List Item
List Item
List Item

Flag

The flag is a very powerful object. Consisting of a fixed width component and fluid body (fills all remaining space), items can trivially be aligned next to one another with vertical alignment support.