lessons learned from building your own css framework

Lessons Learned From Building Your Own CSS

FrameworkCharlie Owen

@sonniesedge

Who the hell am I?

@sonniesedge

So, what is a CSS framework?

@sonniesedge

Kinda like Bootstrap…?

http://getbootstrap.com/@sonniesedge

Maybe more like Bourbon..?

http://bourbon.io/@sonniesedge

Maybe it’s something… in-between?

@sonniesedge

Loom frameworkhttps://github.com/sonniesedge/loom

@sonniesedge

How does it work?

@sonniesedge

Make variables enforce your design system

@sonniesedge

margin-left: get-spacing(large)

@sonniesedge

ITCSS prevents specificity wars

@sonniesedge

@sonniesedge

Simple, non-nested classes

@sonniesedge

@sonniesedge

Why build it?

@sonniesedge

What did I learn from building Loom?

@sonniesedge

Set an achievable aim.

@sonniesedge

Be opinionated. Be proud.

@sonniesedge

@sonniesedge

Don't be too rigid

@sonniesedge

Learn from other people’s work

@sonniesedge

Don't over-engineer

@sonniesedge

@mixin padding($args) {...// allow for processing of various combos of

arguments....// it goes on forever.........@return $padding-values;

}

@sonniesedge

.selector { padding: 1rem 0.5rem;}

@sonniesedge

Don't prematurely optimise

@sonniesedge

Documentation is amazing

@sonniesedge

Get a good name

@sonniesedge

Charlie Owen@sonniesedge

http://sonniesedge.co.ukhttps://github.com/sonniesedge