Codemash 2018 – Modern CSS

Presenters Philip Zastrow and Catherine Meade

• What will me cover
  • SASS PostCSS
  • Grids, Latest Design stuff
  • Can I use
  • mdn.io
• Modern CSS
  • @Supports
    • • Allows you to declare css elements based on what is supported by the browser

      • @supports (display: flex) {
          div {
            display: flex;
          }
        }

      • pseudo-selectors
        • li:nth-child(3n)
{
background-color:green;
}
      • attribute selectors
        • a[href] {
color:white;
font-size:2em;
}
        • a[href=”https://css-tricks.com“] { color: #E18728; }
      • Css Tricks
      • Flexbox versus bootstrap, or using them together! bootstrap flexbox!
        • Flexbox and grid together are all you need now.  Back in the day using floats and such because all we had.
        • center text in a box
          • justify-content: center;
            align-item:center;
          • justify-content:space-around
          • text-align: center
        • Flexbox all over now, just use it.  Makes it really easy to get things centered and positioned well.
        • Read flexbox article from css tricks : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • Mix Blend Mode
    • Photoshop like behavior in the browser!
    • Filter
      • grayscale and blur all in css!
      • filter: drop-shadow(1em 1em 0.5me deeppink)
        • this will suck in ignoring transparent parts of image, which is really neat
        • https://developer.mozilla.org/en-US/docs/Web/CSS/filter
      • backdrop-filter:  really neat, but not very well supported
  • Selectors that can replace javascript
    • target
      • https://codepen.io/zastrow/pen/vKqbya
      • target if id is on page and id is in url then target true
      • they did this crazy thing with hidden checkboxes and showing siblings when checkbox is checked.  Checkbox was invisible but clicking on the div checked and unchecked, so could get toggling without javascript.
  • Units
    • vh – viewport height  — height:200vh  –this would be twice viewport height
    • vw  -viewport width  — width:200vw  — this would be twice viewport width
    • also have max and min values.
    • can use on text size to scale font with viewport
      • font-size:3vw
      • fitext is a hepful tool.
  • SASS
    • Preprocessor
      • Mixins
        • • mixins are reusable pieces of sass that can accept variables and output several rules
          • basically they are functions
          • writing mixins
            • @mixin triangle($color:dodgerblue, $fontsize:1em)
{
height:$fontsize/2;
}
              • • $’s are variables, defaults follow the colon.
                • support @if and @else control statements in mixin

              @mixin wrapped {
               @if $wrapped == true {
               .wrapper & {
               @content;
               }
               }
               @else {
               @content;
               }
               }

          • sassmeister.com will show you sass css output
          • Writing custom functions:
            • returns a value instead of just setting properites, which is what a mixin does.
              • You can use a function in a mixin.
          • Maps
            • They appear to be enums in css
            • use and @each loop to iterate over map, or get one value as below

            • $sparkblues-light: (
                1: #A3DAE3,
                2: #D5F2F7,
                3: #EAFCFF
              );
              //// Sparkblue Dark
              $sparkblues-dark: (
                1: #318c9b,
                2: #1C4C55,
                3: #0f3138
              );
              
              // Sparkblue
              @function sparkblue($hue:null, $level:null) {
                @if $hue == darken {
                  $r: map-get($sparkblues-dark, $level);
                  @return $r;
                }
                @else if $hue == lighten {
                  $r: map-get($sparkblues-light, $level);
                  @return $r;
                }
                @else {
                  @return #50B7C8;
                }
              }
              

          • There is some sass like behavior in vanilla css
            • Variables are part of css
    • Grid Layout Starter
      .grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 2fr 1fr;
grid-column-gap: 1em;
grid-row-gap: 2em;
}
    • fr is for ‘fraction’:  above 1fr 2fr 1fr makes for 4 total and dividing by them
      • for height 1fr is based on content height
    • Grid By Example is a useful site for Grid
    • Grid is only implemented on newest browsers, flexbox is safer.