I'm Gonna Make You
Stop Hating CSS

I'm Gonna Make You
Stop Hating CSS

I'm Gonna Make You
Stop Hating CSS

I'm Gonna Make You
Stop Hating CSS

Hi!

My name is Lemon.

(I make websites.)

CSS is easy ?
No.

CSS IS GREAT

Let's get weird!

overflow

.box { 
  border:0.1em solid white; 
  width: 4em;
  padding:0.3em;
}

  CSS IS AWESOME

overflow:hidden;

overflow-y:hidden;

word-break:break-word;

text-overflow:ellipsis;

.box { 
  border:0.1em solid white; 
  width: 4em;
  padding:0.3em;
}

position

position: relative
          absolute
          fixed
          sticky

          static

postion:relative

postion:absolute

postion:fixed

postion:sticky

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

Okay, so why does position:static exist?

* { position:relative; }

float

float

<article>
  <img class="float-left" src="..." />
  <p>...</p>
  <p>...ss</p>
</article>

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!

 .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

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 (< 2%) has some support (needs prefix & testing)
• No support in IE 9- (Global Use < 0.2%)
• All other lackings in browsers 4+ years behind on updates

flex

.all-rikers { 
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
}
.riker { 
  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

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

Flexbox Froggy

by Thomas H. Park

Grid Garden

by Thomas H. Park

CSS GIFs by Lynn Fisher

Thank you.

ahoylemon.xyz