UI standardisation: CSS Frameworks, Pattern Libraries & Architectures

0_UI_Standardization.md

1. CSS Architectures
2. CSS Frameworks / UI Toolkits
3. Design System (Style guides & Pattern Libraries)
4. Preprocessor (SASS / PostCSS)

1_css_architectures.md

1. CSS Architectures

Architecture	Concept	Advantages	Disadvantage
OOCSS	- Identify repeating patterns & objects (or modules) - Add multiple classes to achieve intended behaviour	- single responsibility - separation of concerns - decoupling - encapsulation - DRY - styles size will be almost constant	templates get polluted
SMACSS	Entire styles organized into 5 files - base (elemental selectors, eg: bdy, p), - layout (big page sections, prefix l-*, eg: header, footer), - module (reusable parts of design, eg: button, dropdown), - state (states of modules, prefix is-*, eg: is-opened), - theme (apprearance)	basically it is OOCSS - scalable & modular - organize & structure styles	- no functional grouping - tag/id selectors won't scale
BEM	naming convention block__element--modifier	- reusable components - code sharing - no specificity issues	- leads to very long class names - could lead to large file sizes - invadidates cascading concept
ITCSS	Inverted Triangle layered architecture, cascade into a unified point. generic --> explicit, far-reaching --> localised, low spacificity --> high specificity selectors Default layers: - Settings: global vars, configs - tools: default mixings & functions - generic: ground-0 (normalize/reset) - base: unclassed html elements - objects: design patterns (eg: .ui-list, .ui-list__item) - components: chunks of UI (eg: .products-list) - trumps: helpers & overrides each layer is a pass over DOM	- grows in a well rounded manner - familiar environment - progressively adding styles, never undoing - sanitises inheritance - can create a test layer for A/B testing
Atomic CSS	Single-purpose units of styling (Atomic styles only apply a single style declaration) <div class="D(b) Va(t) Fz(20px)">, Atomizer would create a style sheet containing these rules: .D(b) { display: block; } .Va(t) { vertical-align: top; } .Fz(20px) { font-size: 20px; }	- separation of concerns	- size grows too fast
DRY CSS	- Never repeat style/property definition - Group selectors with shared properties (eg: .round-border,.btn,.input { border-radius: 0.3em } - Preprocessors: @include border(10px) or $color	- single source of truth - all uses of data change simultaneously - acts like variables or functions - less css, smaller stylesheets - takes advantage of inspectors	- reduced readability - no functional grouping

Resources

• CSS Architecture - Philip Walton
• More Transparent UI Code with Namespaces - Harry Roberts
• Classy CSS - Una Kravets

2_css_frameworks.md

2. CSS Frameworks / UI Toolkits

Feature ↓ \ Framework →	Bootstrap 4 (IE10+)	Skeleton (IE9+/400 lines)	Bulma (IE10+)	PureCSS (IE7+/4.5KB)
Grid	✔	✔	✔	✔
Media object	✔		✔
Responsive utilities	✔	✔	✔
Typography	✔	✔	✔
Code	✔	✔
Images	✔		✔
Tables	✔	✔	✔	✔
Figures	✔
Alert/Message	✔		✔
Badge/tag	✔		✔
Box			✔
Breadcrumb	✔
Button	✔	✔	✔	✔
Button group	✔			✔
Card	✔		✔
Carousal	✔
Collapse	✔
Dropdown	✔
Form	✔	✔	✔	✔
Input group	✔
Jumbotron	✔
List group/panel	✔		✔
Modal	✔		✔
Navs/Menu	✔		✔	✔
Navbar	✔		✔
Notification			✔
Pagination	✔		✔
Popover	✔
Progress	✔		✔
Scrollspy	✔
Tooltip	✔
Colors	✔
Display	✔
Spacing	✔
Sections			✔

other frameworks

• SuitCSS
• InuitCSS
• CardinalCSS
• ConciseCSS
• Furtive
• BassCSS
• Base
• Kube

3_design_system.md

3. Design System

1. Style Guide: A Style Guide can typically encompass a company’s branding guidelines, which could include: logo usage, designated color palettes, and editorial tone. Style Guides deal with consistency and presentation but do not care about information.

2. Pattern Library: Pattern Libraries often encompass static UI elements, e.g. tabbed navigation, dropdown menu, accordion, and even common web page layouts, like grids. Design Patterns care about information and interaction with content.

Style Guide (visual) + Pattern Library (functional) = User Experience

Examples

Design Systems

• Lonely planet: Rizzo
• Salesforce: Lightning Design System
• Bluemix: Carbon Design System
• Google: Material Design
• Intuit: Harmony
• U.S. Web Design Standards

Style Guides

• Bootstrap
• A List Apart
• WalmartLabs
• Yelp

Pattern Libraries

• Bootstrap
• A List Apart
• Github: Primer
• Mailchimp

More at: styleguides.io

---

Generators

styleguide generators list

• StyleDown
• KSS
• StyleDocco
• Fabricator
• PatternPrimer

---

Resources

• Atomic Design - Brad Frost
• CSS at Lonely Planet - Ian Feather
• A Maintainable Style Guide - Ian Feather
• Creating Style Guides - A list apart
• Style Guide Generator Roundup - A list apart
• A Pretty Long List of Style Guides and Pattern Libraries - Una Kravets
• 3 Years of Pattern Libraries: Lessons Learned - Una Kravets
• Style Guide Inspirations - Muzli
• Building a Visual Language: Behind the scenes of our new design system. - Airbnb

4_articles.md

Articles

• Taking The Pattern Library To The Next Level
• Style Guides, Pattern Libraries and Code Standards by Anna Debenham
• How and why to create a pattern library
• On Building Component Libraries
• Pattern Libraries - prototypr.io
• Pattern Library Frameworks: Astrum, Fractal, And Pattern Labs
• An In-Depth Overview Of Living Style Guide Tools