​​Intermediate to Advanced CSS for Practical Peoples

​
​Talk

​
​Intro Slide

​
​Introduce myself

​
​People I’m stealing a lot from

​
​Lullabot slide

​
​Goal

​
​Summary of entire talk

​
​ToC for next section

​
​Foreword

  • ​​You don’t have to memorize CSS to be great at it
  • ​​Remember the concepts and tools at your disposal
  • ​​Make excuses to use, practice, or teach CSS
  • ​​Read MDN docs, google “css how to … “ before resorting to JS layout/animation

​
​Units

  • ​​px
  • ​​1px isn’t really 1 pixel anymore
  • ​​With the advent of high density displays (e.g. retina screens) to avoid users needing a magnifying glass to read web sites, 1px is now based on how dense the screen is. Today, HDD displays tend to be 1.5x, 2x, or 4x.
  • ​​I avoid pixels like the plague, rem’s 4 life
  • ​​%
  • ​​But % of what? (more on this later)
  • ​​Text based units
  • ​​em
  • ​​NOT the width of an em dash
  • ​​1em === font-size of current element
  • ​​I ​❤​ em’s, but they can be tricky
  • ​​rem
  • ​​Just like em, but it’s the font size of the html​ element
  • ​​I do not recommend changing the font size of html​, if you want, change the size of body to effect the whole document
  • ​​I highly recommend using rem instead of pixels, it is more mental overhead, but is sturdier IMO
  • ​​ex
  • ​​width of a lower case x in the font that renders ​😲​ 
  • ​​ch
  • ​​width of the number 0 in the font that renders ​😲​ 
  • ​​vw
  • ​​vh
  • ​​vmin
  • ​​vmax
  • ​​Technically: mm, cm, in, pt, pc (all physical units probably best used in physical medium, e.g. print stylesheet)
​​

​
​Media queries

  • ​​Usage:
​​@media screen {
​​  /* Styles */
​​}
​​
​​@media screen, print { /* Styles */ }
​​
​​@media (max-width: 768px) { /* Styles */ }
​​
​​@media (min-width: 48em) and (orientation: landscape) { /* Styles */ }
  • ​​Sources
  • ​​Words of Wisdom:
  • ​​Mobile First media queries are best (IMO, and a lot of others’ opinions)
  • ​​Means every width media query should be min-width​, and larger screen styles override smaller screens, never the other way around
  • ​​I recommend @media query units be em​, if user changes font size in their OS/Browser it can break your intended layout/design
​​

​
​Layout (ToC)

  • ​​Document Flow & You
  • ​​Grid, Flex, Block Model, & Position
  • ​​Which to use??
  • ​​Browser Support Issues

​
​Document Flow & You

  • ​​Drawing of Document Flow
  • ​​Document flow is easy going
  • ​​DF isn’t always into your “Pixel Perfection”, man
  • ​​DF prefers that all things are visible, more than layout out perfectly
  • ​​Do not be mean or hurt DF when things aren’t working as expected, RESPECT Document Flow
  • ​​Breaking it Down: Layout Flow & Text Flow (I’m kind of making these terms up)
  • ​​Layout Flow
  • ​​How to compose the major parts of a document
  • ​​How Block, Flexbox, Grid, Table(ish) want to lay things out
  • ​​Does not care about white space in HTML
  • ​​Likes widths, heights, margin, padding, etc
  • ​​Text Flow
  • ​​Should be the inner most bits of the document, the gooey contenty center
  • ​​How Inline, Floated, or chunks of text want to behave
  • ​​Respects up to one space from the HTML (also effects inline-*)
  • ​​Doesn’t care about widths, heights, margins, padding, etc (inline-* does)
  • ​​Position Absolute, Fixed, and Sticky: DF’s Strict, Careless Neighbors
  • ​​Ignores DF (which sometimes you want, mostly you don’t)
  • ​​Will do whatever you tell it, damn the consequences
  • ​​Doesn’t always like “differently sized” screens
  • ​​TL:Didn’t think your cartoons were funny:
  • ​​Breaking the flow can cause complicated, hard to solve problems.
  • ​​When you’re trying to lay out a page, go for Flow-friendly tools first.
  • ​​If you enjoy sanity, the large majority of the elements on the page should be flow-friendly.
​​

​
​Layout 101 in 2018

​
​Float
  • ​​Forget almost everything about Floats. They’re only for making elements that text will dodge*
  • ​​For this presentation I’m going to say that Floats are “Text Flow”, not “Layout Flow”

​
​Let’s go Outside In

​​This is the way I recommend you think when working, so it’s how we’ll structure the lessons!
​​
​
​Grid
  • ​​Advantages of Grid
  • ​​The first real page layout system for the web (it’s only been 20 years!)
  • ​​Is 2 dimensional, rows and columns can be controlled easily
  • ​​Intended for page layout and complex layouts, great at fluid layout
  • ​​Doesn’t break like floats
  • ​​Can do equal height and horizontal/vertical alignment (so can flex)
  • ​​Grid Container
  • ​​Grid Item
  • ​​Grid Line
  • ​​Grid Track
  • ​​Grid Area
  • ​​display: grid
  • ​​grid-template-columns
  • ​​grid-template-rows
  • ​​grid-gap, grid-column/row-gap
  • ​​fr unit
  • ​​justify-items
  • ​​align-items
  • ​​justify-self
  • ​​align-self
  • ​​grid-column/row
  • ​​Guide to using grid
  • ​​Basic Exercise (Flex-101.html
  • ​​Example Usages: 
  • ​​Words of Wisdom
  • ​​Best to have all children of a grid container be grid items
  • ​​IE10 & 11’s partial support is a curse, use @supports to prevent IE from using grid styles
  • ​​Make sure you check all of your breakponts, the layout not breaking can be a curse as well as  a blessing
  • ​​grid-template-areas, grid-area
  • ​​grid-auto-flow
  • ​​repeat(number, size)
  • ​​auto-fill
  • ​​minmax()
  • ​​More Exercises
  • ​​@todo Code Samples to mess with
  • ​​Can I use Grid now?
  • ​​Maybe? IE11 is a problem child, as it’s partial support can cause more problems than IE10 which doesn’t support it at all (and falls back to a 1 column layout)
  • ​​Phone Support doesn’t matter much since mobile styles are usually one column, I typically don’t have grid outside of a media query.
  • ​​According to CanIUse.com
  • ​​Globally 84.95% fully support Grid (10/23/18)
  • ​​Globally 72.4% fully support Grid, not counting mobile browsers it’s 85.5% (1/21/18)
  • ​​For my current customer CMU’s School of Computer Science (1/7/2018)
  • ​​About 93% of visitors will get Grid layout
  • ​​For Lullabot’s website (1/7/2018)
  • ​​About 97% of visitors will get Grid layout
  • ​​Sources
  • ​​Rachel Andrews, Talk at Smashing Conf London 2018
​​
​
​Flexbox
  • ​​Advantages of Flexbox
  • ​​Great at 1 dimensional layouts, can define layouts as row or column
  • ​​Replaces simple float layout techniques
  • ​​Equal height, vertical and horizontal alignment are a cinch
  • ​​Can be constraint based so there’s less need for @media queries
  • ​​Flex Container
  • ​​Flex Item
  • ​​Main axis and Cross axis
  • ​​Main start, end
  • ​​Main/Cross start/end
  • ​​flex-direction
  • ​​flex-wrap
  • ​​justify-content
  • ​​align-items
  • ​​Basic Example
  • ​​@todo
  • ​​Can also run through flexboxfroggy.com
  • ​​order
  • ​​flex-grow/shrink
  • ​​flex-basis
  • ​​Use min-width with flexbox
  • ​​Can I use flexbox today?
  • ​​In the majority of cases, Heck yea! Make sure you use autoprefixer, if you need a fallback, you can use floats pretty easily
  • ​​Globally, Full acceptance while prefixed is 84.9%, but if you don’t run into IE/Safari bugs it’s 97.66% globally
  • ​​For my clients and Lullabot.com It’s been ~97%+ for about 2 years
  • ​​Words of wisdom
  • ​​Test in iOS Safari and OSX Safari and IE, they have some nasty flex bugs, the problematic browser versions will hopefully disappear before long
  • ​​More Exercises @todo
  • ​​Sources
​​
​
​Box Model
​​The last stop on the layout train
  • ​​Syntax
  • ​​display: block
  • ​​width
  • ​​Straightforward
  • ​​height
  • ​​% based height is calculated by parent container
  • ​​min/max-width
  • ​​padding
  • ​​border
  • ​​margin
  • ​​Cats
  • ​​Height/Width Cat
  • ​​Border cat
  • ​​Padded cat
  • ​​Margin cat
  • ​​Margin Collapsing Cats
  • ​​Advanced Block Model
  • ​​box-sizing
  • ​​box-sizing:border-box all the things! (by default anyway)
​​
​
​Position
  • ​​Syntax
  • ​​position: static/relative/absolute/sticky/fixed
  • ​​top/right/bottom/left
  • ​​z-index
  • ​​Advanced Position
  • ​​Scoping absolute to a certain parent element
  • ​​Scoping z-index to a certain parent element
  • ​​Exercise @todo
​​

​
​How do I know Which Layout Style to Use?

​​@todo
​​
​
​Pseudo-content
  • ​​Syntax
  • ​​:before/after
  • ​​content
  • ​​: vs ::
  • ​​Accessibility issue
  • ​​Exercise @todo
​​

​
​Transform

  • ​​Syntax
  • ​​transform: translate
  • ​​transform: scale
  • ​​transform: rotate
  • ​​transform: skew
  • ​​transform-origin
  • ​​It allows multiple transforms
  • ​​Words of Wisdom
  • ​​Doesn’t change the space the element takes up, only changes how it appears
  • ​​Still need -webkit- prefix for some older browsers
  • ​​Exercise @todo
  • ​​More syntax
  • ​​matrix
  • ​​3d transforms
  • ​​Chaining transforms, order matters

​
​CSS Accessibility Concerns

  • ​​:hover, :focus
  • ​​Display None, Visibility Hidden, .element-invisible/.sr-only
  • ​​Color contrast and Font-size
  • ​​45x45 for touch and better mousing
  • ​​Pseudo-content
  • ​​Blinking, sudden animations, harsh animations

​
​Debugging CSS with Browser Dev Tools

  • ​​@todo example code
  • ​​Inspect
  • ​​Style pane
  • ​​Calculated pane
  • ​​Layout Pane
  • ​​Grid Inspector
​​

​
​Common Debug Issues and Methods

  • ​​Checking to see if stylesheet is applying (color: red!important)
  • ​​Style isn’t applying
  • ​​Check computed pane
  • ​​Specificity hacks
  • ​​Check if stylesheet is being added
  • ​​Is the class name correct?
  • ​​Make sure you didn’t put a “.” in the HTML
  • ​​Copy the class name from the HTML into your CSS
  • ​​Hide and seek elements (z-index, overflow, etc)
  • ​​Check computed styles for culprits
  • ​​Check parent elements for overflow: hidden
  • ​​Misc. weirdness
  • ​​display:none elements until the problem goes away
  • ​​Margin in an element with no padding and an element with padding
​​

​
​Making nice transitions and animations

  • ​​Syntax:
  • ​​transition
  • ​​transition-delay
  • ​​animation
  • ​​@keyframe
  • ​​Animate transforms if at all possible

​
​Tips on Composing CSS

​
​General Tips
  • ​​Keep your specificity low
  • ​​Avoid ID’s like the plauge
  • ​​Use [id=”id-name”]
  • ​​NEVER write an !important unless you have to
  • ​​Don’t qualify classes header.main-header​
  • ​​You can use [class] to bulk up specificity
  • ​​Use auto-prefixer (in a build step, or in your editor of choice)
​
​Starting from scratch
  • ​​Use normalize or reset or similar
  • ​​Decide on a class naming convention (BEM, dashes, etc)
  • ​​Think about explicit vs utility classes
​​
​
​Working inside of a framework
  • ​​Consider using a prefix for custom classes especially if the framework does not (e.g. lc- for Lullabot.com) you know where it came from
  • ​​Don’t write selectors that use framework utility classes unless you’re extending them
  • ​​Have guidelines for what framework is used for, and what custom CSS should cover
  • ​​Using just the grid? Grid + some components?
  • ​​Prefer or avoid using framework components?

​
​Tips, Tricks and Hacks for the Discerning Developer

​​overflow with and without w/h constraints for clearfix
​​Vertical padding and margin is calculated by the parent’s width
​​Negative margin and padding
​​Complex BG Positioning with Pseudo-content
​​Aspect Ratio
  • ​​with pseudo-content
  • ​​with viewport units
  • ​​with grid?
​​Full Width Elements inside of a constrained parent
​​Diagonal repeating dashes
​​Scoping em’s with rems
​​Creating CSS art
​​

​
​Take guest fancy tricks

​​
​​

​
​My notes on what I want to cover

​
​Layout

  • ​​When starting new go from the outside in
  • ​​Properties:
  • ​​Grid
  • ​​Flex
  • ​​Block Model
  • ​​display: block, inline-block
  • ​​box-sizing
  • ​​width, height
  • ​​padding
  • ​​border
  • ​​margin
  • ​​Position
  • ​​position
  • ​​top, right, bottom, left
  • ​​z-index
​​
​​How to research CSS

​
​Flow of the document

​​Document Flow
​​Layout
​​Text Flow
​
​Work with the flow:
  • ​​Inline, inline-*, block
  • ​​Line-height
  • ​​Font-size
  • ​​Float
  • ​​Inline (-block, -flex, -grid
​​
​
​Break the flow
  • ​​position: absolute, fixed, sticky (not ready for prime time)
​​

​
​Debugging CSS

  • ​​Using Style, Computed, Layout panes
  • ​​Adding custom styles in the browser
  • ​​Figuring out hide and seek issues
  • ​​Grid inspector
  • ​​Display: none swaths of the page until the problem goes away

​
​Practical Tips for Composing CSS

​
​Starting from scratch
  • ​​Use normalize or reset or similar
  • ​​Decide on a class naming convention (BEM, dashes, etc)
  • ​​Think about explicit vs utility classes
  • ​​Use auto-prefixer (in a build step, or in your editor of choice)
​​
​
​Working inside of a framework
  • ​​Consider using a prefix for custom classes especially if the framework does not (e.g. lc- for Lullabot.com)
  • ​​
​​Starting from Scratch vs Working inside of a Framework vs Legacy code
​​

​
​Units

​​px
​​%
​​em, rem, ex
​​vw, vh
​​vmin, vmax
​​

​
​Favorite Tricks

​​Aspect Ratio
​​Custom bg Image alignment with pseudo-elements
​​
​​

​
​Sources

​​Robin Rendle, Getting Started with CSS Grid - https://css-tricks.com/getting-started-css-grid/
​​Chris House, A Complete Guide to Grid - https://css-tricks.com/snippets/css/complete-guide-grid/
​​Mike Herchel, Getting Up and Running with Grid - https://herchel.com/2018-01-15-css-grid/
​​Rachel Andrews, Grid By Example - https://gridbyexample.com/
​​Chris Coyier, A Complete Guide to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
​​Jen Simmons, Multiple examples - http://labs.jensimmons.com/
​​