Flexible Styles for
A Little About Me
Name is Adam Giese
Software Engineer at Under Armour: Connected Fitness doing primarily front-end
I have been developing websites for nearly ten years, about five of which WordPress was a primary focus.
Why Flexible Styles Are Important
Things change.
Flexibility.
Clients.
Things Change
Content is ideally given early, but this often does not happen.
Plus, content will likely change, due to additions and updates.
Flexibility
If you are selling premium themes, more flexible means more potential buyers.
Being flexible early saves development time down the road.
Clients
With CMS development, hopefully the client will be making the changes.
Clients have the best intentions, but may have a terrible eye.
Why Use CSS?
Separation of concerns.
Independent of CMS.
Why use CSS instead of other options like conditional templating
Separation of concerns.
Keeping the flexible styling in the stylesheet keeps your code cleaner and more predictable.
CMS Independent
You may be using WordPress for your development, but by using a CSS solution your techniques will be transferable.
How To Write Flexible Styles
Techniques and Use Cases
Flexbox
Literally short for "flexible box layout"
Purpose isn't to dive deep into flexbox
Would like to show a common use case for how it can help
Will link to some great flexbox resources
Cards using Floats
Notice how the long title throws out the entire layout
This could theoretically by fixed by limited the characters in your CMS, but there are better options.
Defining a height keeps the layout from breaking, but adds a nasty overflow.
Cards using Flexbox
By using flexbox, the heights are matched.
By nesting flexboxes, you can easily keep the CTA aligned at the bottom
More Resources on Flexbox
A Complete Guide to Flexbox by CSS-TricksWhat The Flexbox?! by Wes BosFlexbox Froggy by Codepip
Quantity Queries
li :first-child :nth-last-child(n+6) ,
li :first-child :nth-last-child(n+6) ~ li {...}
By chaining together first-child and nth-last-child, along with a sibling selector, you can "count" how many siblings an element has.
There are some limitation, including its hairy syntax.
More Resources on Quantity Queries
Some Extremely Handy `:nth-child` Recipes as Sass Mixins by ME! on CSS-TricksQuantity Queries for CSS by Heydon Pickering on A List Apart
The Future
Coming To A Browser Near You
CSS Grid
The Future of CSS Layout
CSS Grid is the future of CSS layout.
I am sadly not qualified to speak on the details of CSS grid.
More Resources on CSS Grid Layout
A Complete Guide to Grid by CSS-TricksGrid Garden by CodepipAnything by Rachel Andrew or Jen Simmons .
Container Queries
A Potential New Approach to Responsive Design
The Concept
Media queries allow authors to vary the layout of their page based on the dimensions of the viewport. Container queries will allow developers to vary the layout within specific elements on a page (and their children) based on the dimensions of the parent elements themselves, allowing for much more modular approaches to layout.
The Responsive Issues Community Group
Container Queries have been a long sought after new tech.
This would greatly help the modularity of CSS, helping create much more flexible and reusable code.
The RICG is the group behind the responsive images specs.
A (theoretical) example
.widget .social-links {...}
.widget :media(min-width : 300px ) .social-links {...}
This would allow for the styling based on the size of the element with a class of widget.
This example would allow for the 'social-links' widget to be styled differently based on the size of the 'widget' class.
CSS Is Constantly Changing
These are only a few techniques
CSS is getting more powerful constantly.
By reaching for CSS when possible, you can keep your styles in your stylesheet and your code remains cleaner.
Questions?
Slides available at: https://wcatx17.slides.rocks/