Originally given at JoomlaDay Florida 2018 on many of my favorite CSS and Sass concepts. Covering things like CSS Layout Grid, Flexbox, and how to start using Element Queries.

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 Team 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 Your Installation
15
....................................................................................
Deleting Admin Defaults
17
.......................................................................................
Selecting Your 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 Types, Entry Types, and Fields
28
..................................................
Defining a Section Type
28
........................................................................................
Single
28
..............................................................................................................
Channel
28
...........................................................................................................
Structure
28
..........................................................................................................
Creating New Fields
29
.............................................................................................
6. Designing Templates and Layouts with Twig
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