- CSS Architectures
- CSS Frameworks / UI Toolkits
- Design System (Style guides & Pattern Libraries)
- Preprocessor (SASS / PostCSS)
Last active
June 22, 2017 09:27
-
-
Save Praseetha-KR/0064643bf861a157b25be8ef46d4b74f to your computer and use it in GitHub Desktop.
UI standardisation: CSS Frameworks, Pattern Libraries & 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 |
- CSS Architecture - Philip Walton
- More Transparent UI Code with Namespaces - Harry Roberts
- Classy CSS - Una Kravets
| 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 | ✔ |
-
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.
-
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
- Lonely planet: Rizzo
- Salesforce: Lightning Design System
- Bluemix: Carbon Design System
- Google: Material Design
- Intuit: Harmony
- U.S. Web Design Standards
More at: styleguides.io
- 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
- 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment