Upload File

lessons learned from building your own css framework

31
Lessons Learned From Building Your Own CSS Framework Charlie Owen @sonniesedge

Upload: sonniesedge

Post on 13-Apr-2017

30 views

Category:

Presentations & Public Speaking


0 download

Report

TRANSCRIPT

Page 1: Lessons Learned From Building Your Own CSS Framework

Lessons Learned From Building Your Own CSS

FrameworkCharlie Owen

@sonniesedge

Page 2: Lessons Learned From Building Your Own CSS Framework

Who the hell am I?

@sonniesedge

Page 3: Lessons Learned From Building Your Own CSS Framework
Page 4: Lessons Learned From Building Your Own CSS Framework
Page 5: Lessons Learned From Building Your Own CSS Framework
Page 6: Lessons Learned From Building Your Own CSS Framework

So, what is a CSS framework?

@sonniesedge

Page 7: Lessons Learned From Building Your Own CSS Framework

Kinda like Bootstrap…?

http://getbootstrap.com/@sonniesedge

Page 8: Lessons Learned From Building Your Own CSS Framework

Maybe more like Bourbon..?

http://bourbon.io/@sonniesedge

Page 9: Lessons Learned From Building Your Own CSS Framework

Maybe it’s something… in-between?

@sonniesedge

Page 10: Lessons Learned From Building Your Own CSS Framework

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

@sonniesedge

https://github.com/sonniesedge/loom
Page 11: Lessons Learned From Building Your Own CSS Framework

How does it work?

@sonniesedge

Page 12: Lessons Learned From Building Your Own CSS Framework

Make variables enforce your design system

@sonniesedge

Page 13: Lessons Learned From Building Your Own CSS Framework

margin-left: get-spacing(large)

@sonniesedge

Page 14: Lessons Learned From Building Your Own CSS Framework

ITCSS prevents specificity wars

@sonniesedge

Page 15: Lessons Learned From Building Your Own CSS Framework

@sonniesedge

Page 16: Lessons Learned From Building Your Own CSS Framework

Simple, non-nested classes

@sonniesedge

Page 17: Lessons Learned From Building Your Own CSS Framework

@sonniesedge

Page 18: Lessons Learned From Building Your Own CSS Framework

Why build it?

@sonniesedge

Page 19: Lessons Learned From Building Your Own CSS Framework

What did I learn from building Loom?

@sonniesedge

Page 20: Lessons Learned From Building Your Own CSS Framework

Set an achievable aim.

@sonniesedge

Page 21: Lessons Learned From Building Your Own CSS Framework

Be opinionated. Be proud.

@sonniesedge

Page 22: Lessons Learned From Building Your Own CSS Framework

@sonniesedge

Page 23: Lessons Learned From Building Your Own CSS Framework

Don't be too rigid

@sonniesedge

Page 24: Lessons Learned From Building Your Own CSS Framework

Learn from other people’s work

@sonniesedge

Page 25: Lessons Learned From Building Your Own CSS Framework

Don't over-engineer

@sonniesedge

Page 26: Lessons Learned From Building Your Own CSS Framework

@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

.selector { padding: 1rem 0.5rem;}

@sonniesedge

Page 28: Lessons Learned From Building Your Own CSS Framework

Don't prematurely optimise

@sonniesedge

Page 29: Lessons Learned From Building Your Own CSS Framework

Documentation is amazing

@sonniesedge

Page 30: Lessons Learned From Building Your Own CSS Framework

Get a good name

@sonniesedge

Page 31: Lessons Learned From Building Your Own CSS Framework

Charlie Owen@sonniesedge

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

http://sonniesedge.co.uk/
https://github.com/sonniesedge

Lessons learned from accident investigation Seminar/IHS - Day 2... · LESSONS LEARNED FROM OTHERS LESSONS LEARNED FROM UAE ... Lessons Learned . ... Dealing with survivors and bereaved

Lessons Learned Events at SLAC · 2012-09-14 · Lessons Learned Events: Summary Comments . Important to identify and communicate lessons learned! Lessons learned and near misses

LEARNED LESSONS:

Lessons Learned fromLessons Learned from Structural ... learned davy beicker.pdf · Lessons Learned fromLessons Learned from Structural Engggineers Learning ... reduced size of the

Lessons Learned from “Lessons Learned” · 2 LESSONS LEARNED FROM “LESSONS LEARNED” 2. The NRC set safety goals in its Safety Goal Policy Statement, initiated not long after

Detecting Financial Reporting Fraud – Lessons learned · PDF fileDetecting Financial Reporting Fraud – Lessons learned by ... Detecting Financial Reporting Fraud – Lessons learned

Lessons Learned

Networking lessons learned

Lessons Learned Handbook · 2011-10-12 · • Lessons Learned, an adjective, describes anything related to a Lessons Learned procedure. E.g. Lessons Learned process, Lessons Learned

CSS Lessons Learned the Hard Way (Beyond Tellerand)

Lessons learned after 190M lessons served

CSS Lessons Learned the Hard Way (ConvergeSE)

Lessons Learned, Opportunities and Innovations in …pdf.usaid.gov/pdf_docs/PBAAD103.pdf · Lessons Learned, Opportunities and Innovations in Human ... Lessons Learned, Opportunities

Lessons learned & not learned at MSU

Lessons&Learned&in&Deploying&Akka& Persistencedownloads.typesafe.com/website/presentations/lessons-learned-akk… · Lessons&Learned&in&Deploying&Akka& Persistence Duncan&K.&DeVore

ASSESSMENT & LESSONS LEARNED FROM AFRICAN DIASPORA MARKETPLACEpdf.usaid.gov/pdf_docs/PDACT256.pdf · ASSESSMENT & LESSONS LEARNED FROM AFRICAN ... ASSESSMENT & LESSONS LEARNED FROM

CSS Lessons Learned the Hard Way (Generate Conf)

Lean lessons learned - lean startup methodology and lessons learned from Blossom

DDM UPDATE LESSONS LEARNED & LESSONS SHARED …

Lessons Learned Remote PM+ Cohort Integrated K+S · Lessons Learned Below are key lessons learned on providing Remote PM+ Training of Helpers. These lessons learned are based off

LESSONS LEARNED AND GOOD PRACTICES...Lessons Learned Lessons are learned for sharing and applying to similar projects. Project lessons are learned from experiences, both inspiring

Lessons learned

Lessons Learned Globally - Campaign for Tobacco-Free Kids...Process lessons learned 2. Content lessons learned See next page for lists of these lessons learned. 7 | Lessons Learned

Successes, Challenges, & Lessons Learned...Successes, Challenges, & Lessons Learned Overview Introduction Successes Challenges Lessons Learned New Approaches Highway 70 To Phoenix

Lessons Learned:

CSS Lessons Learned The Hard Way – Zoe Gillenwater

Lessons Learned and Lessons to Be Learned: Investment Law & … · 2014. 4. 30. · 1 Lessons Learned and Lessons to Be Learned: Investment Law & Development for Developed Countries