Architecting with Style

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.
16. Placing items on the grid is done using their column and row numbers.
19. If you really need “offsets”
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
26. The syntax for media queries was always hard for my brain to remember.
28. This had the added benefit of centralizing all my sizing in one place. But accessing the data needed nuance.
32. Now we can generate column classes
34. HOLD UP That seems like a lot of bullshit for CSS Layout Grid.
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.
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
46. CSS Variables allow added flexibility to set custom values that can be scoped to a class or even changed with JavaScript.
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.
56. Use breakpoints to change direction
59. This puts us on the path for self- contained components
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.
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.
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
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