lessons learned from building your own css framework
TRANSCRIPT
![Page 1: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/1.jpg)
Lessons Learned From Building Your Own CSS
FrameworkCharlie Owen
@sonniesedge
![Page 2: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/2.jpg)
Who the hell am I?
@sonniesedge
![Page 3: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/3.jpg)
![Page 4: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/4.jpg)
![Page 5: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/5.jpg)
![Page 6: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/6.jpg)
So, what is a CSS framework?
@sonniesedge
![Page 7: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/7.jpg)
Kinda like Bootstrap…?
http://getbootstrap.com/@sonniesedge
![Page 8: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/8.jpg)
Maybe more like Bourbon..?
http://bourbon.io/@sonniesedge
![Page 9: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/9.jpg)
Maybe it’s something… in-between?
@sonniesedge
![Page 11: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/11.jpg)
How does it work?
@sonniesedge
![Page 12: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/12.jpg)
Make variables enforce your design system
@sonniesedge
![Page 13: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/13.jpg)
margin-left: get-spacing(large)
@sonniesedge
![Page 14: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/14.jpg)
ITCSS prevents specificity wars
@sonniesedge
![Page 15: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/15.jpg)
@sonniesedge
![Page 16: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/16.jpg)
Simple, non-nested classes
@sonniesedge
![Page 17: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/17.jpg)
@sonniesedge
![Page 18: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/18.jpg)
Why build it?
@sonniesedge
![Page 19: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/19.jpg)
What did I learn from building Loom?
@sonniesedge
![Page 20: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/20.jpg)
Set an achievable aim.
@sonniesedge
![Page 21: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/21.jpg)
Be opinionated. Be proud.
@sonniesedge
![Page 22: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/22.jpg)
@sonniesedge
![Page 23: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/23.jpg)
Don't be too rigid
@sonniesedge
![Page 24: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/24.jpg)
Learn from other people’s work
@sonniesedge
![Page 25: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/25.jpg)
Don't over-engineer
@sonniesedge
![Page 26: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/26.jpg)
@mixin padding($args) {...// allow for processing of various combos of
arguments....// it goes on forever.........@return $padding-values;
}
@sonniesedge
![Page 27: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/27.jpg)
.selector { padding: 1rem 0.5rem;}
@sonniesedge
![Page 28: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/28.jpg)
Don't prematurely optimise
@sonniesedge
![Page 29: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/29.jpg)
Documentation is amazing
@sonniesedge
![Page 30: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/30.jpg)
Get a good name
@sonniesedge
![Page 31: Lessons Learned From Building Your Own CSS Framework](https://reader034.vdocument.in/reader034/viewer/2022052706/58ef29a41a28ab2c4e8b45c1/html5/thumbnails/31.jpg)
Charlie Owen@sonniesedge
http://sonniesedge.co.ukhttps://github.com/sonniesedge