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

Architecting with Style

Architecting with Style

2722012beb9afcad75df5c9f2229fd8c?s=128

Tim Knight

March 03, 2018
Tweet

Transcript

  1. Architecting with Style with Tim Knight

  2. Hi! I’m Tim Knight Director User Experience @ GravityFree Studios

    Organizer of the St. Petersburg Front-End Meetup www.iamtimknight.com
  3. This isn’t a talk about Joomla, it’s a talk about

    designing things.
  4. CSS gets a bad wrap because we rarely spend the

    time understanding it the way we should.
  5. Looking at today • Building grid systems by hand. •

    When to use Flexbox vs. Layout Grid • Using Sass mixins to abstract rules and complexities. • Automating our duplication cleanup. • When you should and shouldn’t use CSS Variables. • Thinking about your design objects as isolated context-aware components (spoiler… component queries!). • If you aren’t already, start looking at your front-end design systems as an evolving piece of software.
  6. This won’t be a detailed talk about each item. We’ll

    touch on some items for each concept to get you thinking.
  7. Where this all began In a 15 year-old product begging

    for a redesign
  8. • Based on a 960px 12-column grid • Separate desktop

    and mobile sites • jQuery and other ad-hoc plugins • Product cards had various undocumented visual states • Layout inconsistencies • Random accessibility issues
  9. Building the grid Forget Bootstrap and embrace your destiny

  10. Bootstrap 3 Grid width of 1170px

  11. Bootstrap 4 Grid width of 1140px

  12. What? Why?

  13. Our goal was to go bigger. We went with a

    fluid grid that would max-out at 1440px wide.
  14. None
  15. None
  16. Placing items on the grid is done using their column

    and row numbers.
  17. None
  18. None
  19. If you really need “offsets”

  20. None
  21. None
  22. Using CSS Layout Grid is also about taking you out

    of the mindset of feeling like you need a full grid on everything.
  23. CSS Layout Grid is a two-dimensional grid. Meaning everything has

    a column and row position. Unbalanced grids can’t be centered—leave that to Flexbox.
  24. Abstracting responsive Using Sass loops & mixins to simplify design

  25. None
  26. The syntax for media queries was always hard for my

    brain to remember.
  27. None
  28. This had the added benefit of centralizing all my sizing

    in one place. But accessing the data needed nuance.
  29. None
  30. None
  31. None
  32. Now we can generate column classes

  33. None
  34. HOLD UP That seems like a lot of bullshit for

    CSS Layout Grid.
  35. None
  36. None
  37. Cleaning up the mess Using Gulp to kill repetition and

    process your Sass
  38. Dropping media queries everywhere can get really messy. But you

    can automate your build process to clean that up.
  39. None
  40. None
  41. None
  42. Summing up what this gives us • Automatically vendor prefixes

    our CSS, including the old Microsoft CSS Grid prefixes. • Source Maps for uncompressed versions. • Compiled Sass • Merged Media Queries • Minified CSS
  43. When to use variables From Sass to CSS variables and

    back again
  44. None
  45. None
  46. CSS Variables allow added flexibility to set custom values that

    can be scoped to a class or even changed with JavaScript.
  47. None
  48. Why care?

  49. Use CSS variables for… • Values that can change during

    run time. • Values that are changed based on JavaScript. • Color schemes that use a specific set of colors.
  50. Use Sass variables for… • Values you want to be

    compiled into your CSS. • Values you want to use Sass’ color functions with (e.g. darken, lighten, etc.). • Values used for conditional checking (like $debug: true;)
  51. Directing your navigation The power of Flexbox in the simplest

    of items
  52. This isn’t just about navigation

  53. Flexbox can really replace everything we once used floats or

    display: inline for in a way that’s more efficient to manage UI items. Leave the layout stuff for Grid.
  54. None
  55. None
  56. Use breakpoints to change direction

  57. None
  58. None
  59. This puts us on the path for self- contained components

  60. None
  61. Thinking in components Design the page, but code the component

  62. Let’s talk about the design process

  63. Instead of programming the front-end as a page, based on

    a design composition, break your comp apart into components and build a component sheet to build all your pages.
  64. None
  65. None
  66. None
  67. None
  68. This becomes your basis for documentation and creates a way

    to catch inconsistencies or issues in your CSS specificity.
  69. Dealing product cards Context-aware and self-contained components

  70. I’m a nerd for great card patterns

  71. See Design Better Cards from Andrew Coyle

  72. Flexbox and CSS Grid Layout provide great solutions for things

    like column management and reflowing content. However, there are often other considerations based on the component’s placement you’ll want to make. Contrast, hierarchy, or visual weight just to name a few.
  73. None
  74. Container/Element Queries solve this problem. But they don’t actually exist.

  75. See Element Queries for CSS by Tommy Hodgins What might

    they look like?
  76. Using eq.js • A small JavaScript polyfill of 2KB •

    Uses a data attribute on the component to define sizes • Has a Sass mixin to make writing components even easier
  77. None
  78. Demos and code samples https://github.com/timknight/container-queries-presentation/

  79. Apply constant care Pruning and organizing your code doesn’t end

  80. Treat your front-end system as a living document. Schedule code

    reviews and continue to make small updates throughout the life of it.
  81. “The cowards never started and the weak died along the

    way. That just leaves us, ladies and gentlemen. Us.” — PHIL KNIGHT, NIKE
  82. Questions?

  83. Building a Blog 9 9. Building a Blog A lot

    of my clients started using a CMS because they wanted to start blogging. Of course, many of them stopped blogging within the next 90 days, but that’s beside the point. Blogging is often a top requested feature for most CMSs and is often the reason why solutions like WordPress are given a lot of priority. Even if you’re not building a blog, you can use this same process for building news archives or other similar date- sorted content for your website. To do this, Craft CMS has a Section Type called a Channel. Unlike Structures which we covered in the previous chapter, Channels are sorted by the publishing date which makes them perfect for blogs or other news-based, date-sorted content on your site. Creating the Section First we’re going to into the Settings > Sections and create a new section. To keep things simple for now, we’ll just name this section “Blog” with a handle of “blog”. Finally, just make sure that “Channel” is selected as your Section Type. Building with Craft 74 Creating a T eam Directory ! If you want to edit the image file name or the image title. Just double check on the image asset box. ! Building with Craft 62 Designing Templates and Layouts with Twig 6 6. Designing Templates and Layouts with Twig One of the most refreshing aspects of using Craft CMS is the use of the Twig templating language. Of course there are ways to use Twig within other platforms like WordPress, Drupal, and even your custom PHP projects, but having Twig built in as a first-class citizen in Craft without having to do any special configuration will help keep you from losing your mind as you work on your projects. Okay, first—let’s talk about layouts. It’s common to find a project where there is a separate header and footer file that are included within all files. Twig works a little differently where you can “extend” a file from your page and the effectively overwrite a block of that extended file’s content. This results in giving you a single file for both your header and footer to act as your layout. Let’s start putting together a layout to see how this works in practice. W ithin our templates folder let’s create another folder called _layouts. I like to use an underscore on files that aren’t directly accessed are that act as included or partial files. W ithin that folder we’re going to create a new file called main.twig which will act as our main layout. Craft CMS supports files with either the html extension or the twig extension. I tend to prefer using the twig extension so regardless of the text editor I’m Building with Craft 30 Table of Contents Preface iii ........................................................................................................... What is Craft CMS? iv ............................................................................................... Who Should Read This Book? iv ............................................................................... Legal v ....................................................................................................................... About the Author vi ........................................................................................... 1. Power for Front-End Developers 1 .............................................................. Part I: Craft Fundamentals 2. Installing Craft CMS 3 ................................................................................... Downloading and Installing MAMP 4 ........................................................................ Downloading Craft CMS 7 ......................................................................................... Connecting Craft to MySQL 11 ................................................................................. Finalizing Y our Installation 15 .................................................................................... Deleting Admin Defaults 17 ....................................................................................... Selecting Y our License 18 ......................................................................................... Managing Site Configuration 20 ................................................................................ 3. Setting Up Multiple Environment Support 21 ............................................. 4. Organizing Site Assets 24 ............................................................................ Adding Static Assets 24 ............................................................................................ Creating an Asset Source for Uploads 24 ................................................................. 5. Section T ypes, Entry T ypes, and Fields 28 .................................................. Defining a Section T ype 28 ........................................................................................ Single 28 .............................................................................................................. Channel 28 ........................................................................................................... Structure 28 .......................................................................................................... Creating New Fields 29 ............................................................................................. 6. Designing T emplates and Layouts with T wig 30 ........................................ Extending Our Layout 33 ........................................................................................... Including Partials 35 .................................................................................................. Building with Craft i Get updates at www.iamtimknight.com I am writing a book.
  84. thank you. Tim Knight iamtimknight.com Find this and other talks

    at https://speakerdeck.com/timknight