Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Style Design Patterns and Disciplines

Style Design Patterns and Disciplines

Styles across many sites are surprisingly similar, but the CSS strategies to accomplish the style is non-obvious. Style Design Patterns attempts to classify these commonly recurring problems and their solutions.

Avatar for Jeffrey Hicks

Jeffrey Hicks

March 04, 2016
Tweet

More Decks by Jeffrey Hicks

Other Decks in Programming

Transcript

  1. Jeffrey Hicks jrhicks.github.io @jrhicks Employee and owning member At CTEH

    LLC developer, designer, & mentor of web Web technologies and databases
  2. Panel Layout Pa0ern •  Panels extend to edges of browser.

    •  Content width is fixed and centered. •  First Panel (also known as hero) contains large text. •  Panels alternate color Source: Brad Sanders hFps://www.youtube.com/watch?v=ko0jgfRuxJM
  3. Hero Panel •  Large aFracIve photographs as background. •  Uncomfortably

    tall. •  Overlay text using vigneFe overlay Source: Brad Wesfall - hFp://Inyurl.com/z5s4c9y
  4. Border Discipline •  Use borders lightly •  Not all transiIons

    need a border •  Must be a darker hue of which ever background is the darkest Source: Brad Wesball - hFps://youtu.be/ko0jgfRuxJM?t=1h18m28s
  5. You Can Now Make This! Grid Column Pa0ern Solves alignment

    and verIcal rhythm through equally sized columns and guFers
  6. CSS Libraries •  Have done all the math for us.

    •  Provide style classes for column-span possibility.
  7. CSS Libraries •  Does the math •  Provides style classes

    for each column span width possible. •  Provide row containers to give columns a place to live. Ideally columns totaling 12.
  8. You Can Now Make This! The Clearfix Trick Solves needing

    to contain a bunch of floated elements
  9. You Can Now Make This! Fixed Height anZ-pa0ern Fixing a

    container’s height to solve layout problems is very fragile
  10. Fixed Height anZ-pa0ern Source: Brad Wesball hFps://youtu.be/ofSnkJ9tPPM?t=15m51s VerIcal centering breaks

    with: •  Font sizes •  Any design tweaks. •  User sekngs.
  11. You Can Now Make This! NegaZve Margin Pa0ern Solves padding

    elements inside a container while keeping edge elements flush with the edge of the container.
  12. You Can Now Make This! NegaZve Margin Pa0ern Grid Columns

    Solves padding columns inside a row while keeping the far lel column and far right column flush with the edges
  13. You Can Now Make This! NegaZve Margin Pa0ern Galleries Solves

    padding media inside a gallery while keeping the far lel, top, right, and boFom images flush with the gallery edges
  14. NegaZve Margin Pa0ern We would like to put padding between

    gallery items. We do NOT want to lose our nice flush lines.
  15. NegaZve Margin Pa0ern The items are inside a gallery. Lets

    put a border so we can see it. If we put a negaIve margin on the gallery equal to the spacing around the items …
  16. NegaZve Margin Pa0ern Warning: You need to do a liFle

    math to size the art items to fit.
  17. You Can Now Make This! NegaZve Margin Pa0ern Cards Solves

    padding contents inside a card while keeping the top, lel, & right edges of the feature image flush with the border.
  18. You Can Now Make This! Media Object Pa0ern PresenIng media

    (image/video) along with some variable size content (text) hFp://www.stubbornella.org/content/2010/06/25/the-media-object-saves- hundreds-of-lines-of-code/
  19. Masonry Layout Pa0ern •  Usually white on grey. •  Great

    for variable length collecIons •  Important for associaIng user acIon with target. •  I believe popularized by Apple
  20. You Can Now Make This! hFp://alistapart.com/arIcle/axiomaIc-css-and-lobotomized-owls Lobotomized Owl Pa0ern We

    want each item to hFp://alistapart.com/arIcle/axiomaIc-css-and-lobotomized-owls
  21. Color Discipline You can choose different saturaZons and lightness of

    the same hue. Source: Brad Wesfall: hFps://youtu.be/ko0jgfRuxJM?t=23m10s
  22. Color Discipline You can choose different saturaZons and lightness of

    the same hue. Do not cross hues hFps://www.lightningdesignsystem.com/design/color/
  23. Color Discipline Color is used sparingly to draw aFenIon to

    important elements and those that we want the user to take acIon on hFps://www.lightningdesignsystem.com/design/color/
  24. AddiZonal Resources UI Principles for programmers hFps://www.youtube.com/watch?v=ko0jgfRuxJM Component Independence &

    Layout Strategies hFps://www.youtube.com/watch?v=ofSnkJ9tPPM @bradwes\all hFp://Inyurl.com/gvmjey6 UI Principles for programmers Dec 2015 Conference
  25. Business ApplicaZon Style Pa0erns Displaying Data •  Record Lists • 

    Table •  Tiles •  InteracIve Cards •  Feeds Layout •  Record Layouts •  Reference Layouts •  Workspace Layouts •  List Layouts •  Table Layouts •  Board Layouts •  Master/Detail Layouts And Also •  Data Entry •  Messaging •  NavigaIon •  Voice & Tone •  ….