Tweet
Tweet

Slide 1

Slide 1 text

@iamkeir • 18+ years freelance web developer in Bristol • Wonderful people, agencies & brands • Front-end, specialising in pattern libraries for scale • Shopify, Perch, APIs… • Snowboard instructor, breakdancer… lemur ranger?

Slide 2

Slide 2 text

“Simple rarely breaks - but if it does, simple is easy to fix” “Code obvious, not clever” “Code like the next developer is an axe murderer and knows where you live” “Cheese is pleasant”

Slide 3

Slide 3 text

Pattern libraries Make your code loveable

Slide 4

Slide 4 text

“What is the most efficient way to build a 100-page website?”

Slide 5

Slide 5 text

“What is the most efficient way to build a 100-page website?” Find patterns, build once, reuse many.

Slide 6

Slide 6 text

WAT. https://boagworld.com/audio/pattern-library/ Logical, intuitive, consistent, reusable, flexible, extensible, sensible!

Slide 7

Slide 7 text

In the wild… ux.mailchimp.com rizzo.lonelyplanet.com codepen.io/guide bbc.co.uk/gel style.bristol.gov.uk gov.uk/service-manual lightningdesignsystem.com styleguides.io

Slide 8

Slide 8 text

Pattern spotting https://alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone

Slide 9

Slide 9 text

Exercise: Pattern Spotting

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Universal naming

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

BEM: Block__Element--Modifier

Slide 15

Slide 15 text

Exercise: Name a thing!

Slide 16

Slide 16 text

https://codepen.io/iamkeir/pen/ELbvOe?editors=1000

Slide 17

Slide 17 text

‘Methodology’ Naming, structure, organisation, approach.

Slide 18

Slide 18 text

SMACSS Scalable and modular architecture for CSS https://smacss.com/ • Base (e.g. body, anchor) • Layout (e.g. header, main) • Modules (e.g. carousel, hero) • State (e.g. is-collapsed, is-visible) • Theme (e.g. color, style)

Slide 19

Slide 19 text

Atomic Design Chemistry, yo! http://bradfrost.com/blog/post/atomic-web-design/ • Atoms (e.g. input, p, button, etc…) • Molecules (e.g. search form) • Organisms (e.g. site header) • Templates (e.g. collection template) • Pages (e.g. final site page)

Slide 20

Slide 20 text

OOCSS Object-orientated CSS http://oocss.org/ • Structure vs Skin (e.g. float, margin vs color, background) • Container vs Content (reusable content not tied to container/location)

Slide 21

Slide 21 text

KE-SS* Keir’s CSS • Core (e.g. typography, media, forms, grid, layout…) • Modules (EVERYTHING) • Templates (a module party) *this isn’t really a thing

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Bonus: Button Pattern https://codepen.io/iamkeir/pen/GdOEzw?editors=1100

Slide 24

Slide 24 text

Bonus: Separation of concerns https://codepen.io/iamkeir/pen/bMaYyZ https://jonbellah.com/articles/separation-of-concerns/

Slide 25

Slide 25 text

“Simple rarely breaks - but if it does, simple is easy to fix” “Code obvious, not clever” “Code like the next developer is an axe murderer and knows where you live” “Cheese is pleasant”

Slide 26

Slide 26 text

No content