I'm gonna make you
stop hating CSS.

(a talk by @AhoyLemon)

Hi!

My name is Lemon.

(I make websites.)

CSS is easy ?
No.

CSS IS GREAT

Today's agenda:

  1. Things that are weird
  2. Things that are great
  3. Things you can try now

Let's get weird!

overflow

CSS
.box { 
  border:0.1em solid white; 
  width: 4em;
  padding:0.3em;
}
HTML
CSS IS AWESOME
CSS IS AWESOME
overflow:hidden;
CSS IS AWESOME
overflow-y:hidden;
CSS IS AWESOME
word-break:break-word;
CSS IS AWESOME
text-overflow:ellipsis;
CSS IS AWESOME
CSS
.box { 
  border:0.1em solid white; 
  width: 4em;
  padding:0.3em;
}
CSS IS AWESOME
width: 4em;
CSS IS AWESOME
Original idea: Brandon Smith's blog post on CSS Tricks.

position

position: relative
          absolute
          fixed
          sticky
          static

postion:absolute

postion:fixed

postion:sticky

postion:relative

postion:static

all five

fixed
stapled to a fixed position on your screen
absolute
stapled to a position in the nearest restictive parent
sticky
NEW(ish)! Toggles between relative and fixed, depending.
relative
Follows page flow & provides a restrictive parent
static
same as relative, but less helpful
relative static
z-index ✔️ 🚫
top, bottom, left, right ✔️ 🚫
holds absolute ✔️ 🚫

Okay, so why does position:static exist?

* { position:relative; }
My CodePen article on the subject: Z-Index Is Weird

float

float

when float works

when float doesn't work

WHY!!!???

Can you fix it?

Of course.

.container:after { 
  content: "";
  display: table;
  clear: both;
}

when float is fixed

Why does this work?

Okay, so let's make a layout with floats!

CSS
 .riker {
  float: left;
  width: calc(33% - 30px);
  margin-left: 15px;
  margin-right: 15px;
}

grid

step 1

.all-rikers { 
  display:grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap:30px;
}

step 2

288 bytes!
grid-template-columns
grid-template-columns: 1fr 1fr 1fr;
                       repeat(3, 1fr);
                       260px 50% 1fr;
                       repeat(auto-fill,260px);
                       repeat(auto-fit, minmax(160px,1fr))
1fr = 1 fraction

My gin and tonic:

  1. 4 ice cubes
  2. 1 jigger of gin
  3. tonic water
  4. 1 lime wheel
grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(4,1fr);
grid-template-columns:200px 1fr 1fr;
grid-template-columns:repeat(auto-fill,240px);
repeat( auto-fill, minmax(250px, 1fr) );
.grid { 
  grid-template-columns: repeat(4,1fr);
}

.mojito, .daiquiri, .pina-colada {
  grid-column: span 2;
  grid-row: span 2;
}
HTML
...
...
...
...
...
...
...
...
...
...
...
...
css.collins   { order: 1; }
.martini   { order: 2; }
.tulip     { order: 3; }
.margarita { order: 4; }

Takeaways:

  • IE 10 & 11 (US 2.1%) has some support (needs prefix & testing)
  • No support in IE 9- (US 0.6%)
  • All other lackings in browsers 1+ years behind on updates

flex

.flex-container { 
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
}
.flexbox { 
  flex-basis:calc(33% - 15px);
  flex-grow: 0;
  flex-shrink:1;
  margin-bottom:30px;
}

Flex can be used with or instead of CSS grid

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

Vertical Centering with Flex!

.flex-container {
  display: flex;
  align-items: center;
  /* ^- vertical */
  justify-content: center;
  /* ^- horizontal */
}

The Cascade

The Cascade:
  1. individual rules
  2. calculated in order
  3. of increasing specificity
  4. with id's getting extreme priority
  5. only beat by inline styles
  6. and !important being the nuclear option
HTML

CSS
article p { background: orange; }
#MyParagraph { color:red; }
p { background: green; }
a.link { background:blue; }
a[href] { color:yellow; }
a { background:green; }

CSS Diner

by flukeout

Flexbox Froggy

by Thomas H. Park

Grid Garden

by Thomas H. Park

CSS GIFs by Lynn Fisher

Thank you.

ahoylemon.xyz