Architecting with Style

Architecting with Style

2722012beb9afcad75df5c9f2229fd8c?s=128

Tim Knight

March 03, 2018
Tweet

Transcript

  1. 2.

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

    Organizer of the St. Petersburg Front-End Meetup www.iamtimknight.com
  2. 4.

    CSS gets a bad wrap because we rarely spend the

    time understanding it the way we should.
  3. 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.
  4. 6.

    This won’t be a detailed talk about each item. We’ll

    touch on some items for each concept to get you thinking.
  5. 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
  6. 13.

    Our goal was to go bigger. We went with a

    fluid grid that would max-out at 1440px wide.
  7. 14.
  8. 15.
  9. 17.
  10. 18.
  11. 20.
  12. 21.
  13. 22.

    Using CSS Layout Grid is also about taking you out

    of the mindset of feeling like you need a full grid on everything.
  14. 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.
  15. 25.
  16. 27.
  17. 28.

    This had the added benefit of centralizing all my sizing

    in one place. But accessing the data needed nuance.
  18. 29.
  19. 30.
  20. 31.
  21. 33.
  22. 35.
  23. 36.
  24. 38.

    Dropping media queries everywhere can get really messy. But you

    can automate your build process to clean that up.
  25. 39.
  26. 40.
  27. 41.
  28. 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
  29. 44.
  30. 45.
  31. 46.

    CSS Variables allow added flexibility to set custom values that

    can be scoped to a class or even changed with JavaScript.
  32. 47.
  33. 48.
  34. 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.
  35. 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;)
  36. 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.
  37. 54.
  38. 55.
  39. 57.
  40. 58.
  41. 60.
  42. 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.
  43. 64.
  44. 65.
  45. 66.
  46. 67.
  47. 68.

    This becomes your basis for documentation and creates a way

    to catch inconsistencies or issues in your CSS specificity.
  48. 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.
  49. 73.
  50. 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
  51. 77.
  52. 80.

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

    reviews and continue to make small updates throughout the life of it.
  53. 81.

    “The cowards never started and the weak died along the

    way. That just leaves us, ladies and gentlemen. Us.” — PHIL KNIGHT, NIKE
  54. 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.
  55. 84.