Tweet
Tweet

Slide 1

Slide 1 text

Think CSS @edwardoriordan

Slide 2

Slide 2 text

Easy CSS Why even think CSS?

Slide 3

Slide 3 text

html { make-it-look-like-the-psd: 'yes-please'; }

Slide 4

Slide 4 text

::root { var-nav-start: 45vmin; } body:not(:-moz-handler-blocked) nav:after { flex-basis: var(nav-start); }

Slide 5

Slide 5 text

header { border-color: red; }

Slide 6

Slide 6 text

Pieces of cake | DevDays Dublin

Slide 7

Slide 7 text

Easy — Old French aise, from the Latin adjacens - ‘lying close by’

Slide 8

Slide 8 text

“It is the nature of CSS to devolve into madness” Chris Eppstein | @chriseppstein

Slide 9

Slide 9 text

Respect CSS

Slide 10

Slide 10 text

Fledgling CSS

Slide 11

Slide 11 text

Menu link
Menu link

Website Logo

Lorem...

Slide 12

Slide 12 text

Heading

You are here

  • One
  • Two
  • Three

Slide 13

Slide 13 text

CSS Zen Garden

Slide 14

Slide 14 text

“To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The HTML remains the same, the only thing that has changed is the external CSS file. Yes, really.” Dave Shea | CSS Zen Garden

Slide 15

Slide 15 text

“There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.” whatwg.org - Elements spec

Slide 16

Slide 16 text

“Classitis and divitis are like the unnecessary notes an amateur musician plays—the noodling of a high school guitarist when he's supposed to be providing backup to a singer or featured soloist. Classitis and divitis are like the needless adjectives with which bad writing is strewn.” Jeffrey Zeldman | Designing with Web Standards

Slide 17

Slide 17 text

Clear CSS?

Slide 18

Slide 18 text

“To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The HTML remains the same, the only thing that has changed is the external CSS file. Yes, really.” Dave Shea | CSS Zen Garden

Slide 19

Slide 19 text

“There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.” whatwg.org - Elements spec

Slide 20

Slide 20 text

“Classitis and divitis are like the unnecessary notes an amateur musician plays—the noodling of a high school guitarist when he's supposed to be providing backup to a singer or featured soloist. Classitis and divitis are like the needless adjectives with which bad writing is strewn.” Jeffrey Zeldman | Designing with Web Standards

Slide 21

Slide 21 text

“I saw the best minds of my generation destroyed by madness, starving hysterical naked...burning for the ancient heavenly connection to the starry dynamo in the machinery of night” Allen Ginsberg | Howl

Slide 22

Slide 22 text

nav ul li.facebook { background: url(facebook.png); } nav ul li.twitter { background: url(twitter.png); } nav ul li.youtube { background: url(youtube.png); }

Slide 23

Slide 23 text

nav ul li:nth-child(1) { background: url(facebook.png); } nav ul li:nth-child(2) { background: url(twitter.png); } nav ul li:nth-child(3) { background: url(youtube.png); }

Slide 24

Slide 24 text

Simple CSS

Slide 25

Slide 25 text

Simple — from Latin simplus…originally referred to a medicine made from one constituent.

Slide 26

Slide 26 text

Simple CSS Selectors

Slide 27

Slide 27 text

aside ul { border-bottom: 1px; } aside h3 { color: #333; }

Slide 28

Slide 28 text

.sidebar-nav { border-bottom: 1px; } .sidebar-title { color: #333; }

Slide 29

Slide 29 text

nav li.highlighted { color: #333; } aside h3.highlighted { color: #999; }

Slide 30

Slide 30 text

.navItem__highlighted { color: #333; } .sidebarHeading__highlighted { color: #999; }

Slide 31

Slide 31 text

Simple CSS Attributes

Slide 32

Slide 32 text

nav li a { text-decoration: none; color: inherit; border-radius: 5px; background-color: #ddd; float: left; width: 20%; }

Slide 33

Slide 33 text

nav li a { /* reset */ text-decoration: none; color: inherit; } nav li a { /* layout */ float: left; width: 20%; } nav li a { /* style */ border-radius: 5px; background-color: #ddd; }

Slide 34

Slide 34 text

.navItem__link { /* reset */ text-decoration: none; color: inherit; } .navItem__link { /* layout */ float: left; width: 20%; } .navItem__link { /* style */ @include border-radius(5px); background-color: #ddd; }

Slide 35

Slide 35 text

%reset-link-style { ...} %nav-item-theme { ...} .nav li a { @extend %reset-link-style; /* reset */ @extend %nav-item-theme; /* theme */ @include columns(1-of-4); /* layout */ }

Slide 36

Slide 36 text

Don't throw the past away You might need it some rainy day Dreams can come true again When everything old is new again Peter Allen | Everything Old Is New Again

Slide 37

Slide 37 text

Thanks ♡

Slide 38

Slide 38 text

❦ Simple Made Easy — Rich Hickey About HTML semantics & front-end architecture — Nicolas Gallagher