Tweet
Tweet

Slide 1

Slide 1 text

Architecting with Style with Tim Knight

Slide 2

Slide 2 text

Hi! I’m Tim Knight Director User Experience @ GravityFree Studios Organizer of the St. Petersburg Front-End Meetup www.iamtimknight.com

Slide 3

Slide 3 text

This isn’t a talk about Joomla, it’s a talk about designing things.

Slide 4

Slide 4 text

CSS gets a bad wrap because we rarely spend the time understanding it the way we should.

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

This won’t be a detailed talk about each item. We’ll touch on some items for each concept to get you thinking.

Slide 7

Slide 7 text

Where this all began In a 15 year-old product begging for a redesign

Slide 8

Slide 8 text

• 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

Slide 9

Slide 9 text

Building the grid Forget Bootstrap and embrace your destiny

Slide 10

Slide 10 text

Bootstrap 3 Grid width of 1170px

Slide 11

Slide 11 text

Bootstrap 4 Grid width of 1140px

Slide 12

Slide 12 text

What? Why?

Slide 13

Slide 13 text

Our goal was to go bigger. We went with a fluid grid that would max-out at 1440px wide.

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Placing items on the grid is done using their column and row numbers.

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

If you really need “offsets”

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Using CSS Layout Grid is also about taking you out of the mindset of feeling like you need a full grid on everything.

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

Abstracting responsive Using Sass loops & mixins to simplify design

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

The syntax for media queries was always hard for my brain to remember.

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

This had the added benefit of centralizing all my sizing in one place. But accessing the data needed nuance.

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Now we can generate column classes

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

HOLD UP That seems like a lot of bullshit for CSS Layout Grid.

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Cleaning up the mess Using Gulp to kill repetition and process your Sass

Slide 38

Slide 38 text

Dropping media queries everywhere can get really messy. But you can automate your build process to clean that up.

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

When to use variables From Sass to CSS variables and back again

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

CSS Variables allow added flexibility to set custom values that can be scoped to a class or even changed with JavaScript.

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Why care?

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

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;)

Slide 51

Slide 51 text

Directing your navigation The power of Flexbox in the simplest of items

Slide 52

Slide 52 text

This isn’t just about navigation

Slide 53

Slide 53 text

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.

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Use breakpoints to change direction

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

This puts us on the path for self- contained components

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Thinking in components Design the page, but code the component

Slide 62

Slide 62 text

Let’s talk about the design process

Slide 63

Slide 63 text

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.

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

This becomes your basis for documentation and creates a way to catch inconsistencies or issues in your CSS specificity.

Slide 69

Slide 69 text

Dealing product cards Context-aware and self-contained components

Slide 70

Slide 70 text

I’m a nerd for great card patterns

Slide 71

Slide 71 text

See Design Better Cards from Andrew Coyle

Slide 72

Slide 72 text

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.

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

Container/Element Queries solve this problem. But they don’t actually exist.

Slide 75

Slide 75 text

See Element Queries for CSS by Tommy Hodgins What might they look like?

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

Demos and code samples https://github.com/timknight/container-queries-presentation/

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Treat your front-end system as a living document. Schedule code reviews and continue to make small updates throughout the life of it.

Slide 81

Slide 81 text

“The cowards never started and the weak died along the way. That just leaves us, ladies and gentlemen. Us.” — PHIL KNIGHT, NIKE

Slide 82

Slide 82 text

Questions?

Slide 83

Slide 83 text

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.

Slide 84

Slide 84 text

thank you. Tim Knight iamtimknight.com Find this and other talks at https://speakerdeck.com/timknight