Slide 1

Slide 1 text

CSS mindset Demystification course with Lateral Nord

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

[email protected] +358 40 7188776 @jerryjappinen Product design consultant Jerry Jäppinen

Slide 4

Slide 4 text

1. CSS for programmers 2. Learning to walk 3. History lesson 4. CSS is declarative 5. HTML structure 6. Worth knowing 7. Laying things out 8. Measurements 9. Best practices and exercises

Slide 5

Slide 5 text

1. CSS for programmers 2. Learning to walk 3. History lesson 4. CSS is declarative 5. HTML structure 6. Worth knowing 7. Laying things out 8. Measurements 9. Best practices and exercises

Slide 6

Slide 6 text

The short version

Slide 7

Slide 7 text

CSS has absolutely nothing to do with programming

Slide 8

Slide 8 text

CSS is not intended for creating applications

Slide 9

Slide 9 text

...or even layouts

Slide 10

Slide 10 text

1. CSS for programmers 2. Learning to walk 3. History lesson 4. CSS is declarative 5. HTML structure 6. Worth knowing 7. Laying things out 8. Measurements 9. Best practices and exercises

Slide 11

Slide 11 text

CSS can be frustrating • There are missing features in CSS • We have to battle with browser incompatibilities • Some parts of the spec are just crazy

Slide 12

Slide 12 text

But that's not why CSS is hard

Slide 13

Slide 13 text

It's hard because you never learned the basics

Slide 14

Slide 14 text

To run, we need to learn how to walk

Slide 15

Slide 15 text

To walk, we must understand principles

Slide 16

Slide 16 text

Just like you need to understand the principles of object-oriented programming before writing good Java, you need to understand something about fundamentals before writing good CSS

Slide 17

Slide 17 text

If Java is about OO programming… Clojure is about functional programming… Then what is CSS about?

Slide 18

Slide 18 text

Design

Slide 19

Slide 19 text

CSS is about design

Slide 20

Slide 20 text

O_O

Slide 21

Slide 21 text

CSS is a way to talk about design abstractions Alignments, dimensions, text, fonts, paragraphs, lists, colors and containers... When you use CSS, you break down a design to these fundamental properties

Slide 22

Slide 22 text

Views can always be described as a combination of these four key components structure, styles, behavior, content Simply put: you write structure in HTML, behavior in JS, and styles in CSS. Content is merged into structure when delivered to browser, but usually stored separately

Slide 23

Slide 23 text

All of this is generic. Not just web. Try out InDesign, you'll find tools similar to web technologies there. ID is for creating print materials, but it's a tool for implementing design just the same. This is why some things in CSS might seem weird to programmers. Rules of graphic design are very different from programmer math!

Slide 24

Slide 24 text

1. CSS for programmers 2. Learning to walk 3. History lesson 4. CSS is declarative 5. HTML structure 6. Worth knowing 7. Laying things out 8. Measurements 9. Best practices and exercises

Slide 25

Slide 25 text

CSS is about styling HTML documents

Slide 26

Slide 26 text

HTML documents always had paragraphs, lists, tables Images came in at some point

Slide 27

Slide 27 text

Originally, semantics in HTML were awful

Slide 28

Slide 28 text

When CSS came, poor semantics were the biggest hindrance to using it e ffi ciently (Probably still is)

Slide 29

Slide 29 text

Prepare to feel stupid To practice, write and style plain HTML documents

Slide 30

Slide 30 text

Create a single HTML document with base styles, and then write 10 different themes for it. You'll find lots of practical ways to organize your CSS and see how graphic design breaks down into border widths, background colors and font styles.

Slide 31

Slide 31 text

1. CSS for programmers 2. Learning to walk 3. History lesson 4. CSS is declarative 5. HTML structure 6. Worth knowing 7. Laying things out 8. Measurements 9. Best practices and exercises

Slide 32

Slide 32 text

CSS is applied magically by the browser Even for elements created dynamically

Slide 33

Slide 33 text

You don't have to actually do anything. The people who actually write rendering engines are heroes who do what they do so we don't have to.

Slide 34

Slide 34 text

CSS doesn't tell a browser what to do. You don't command with CSS, you declare what kind of arrangements, dimensions, text and colors you recommend as an author.

Slide 35

Slide 35 text

But you're not the only one who gets a say

Slide 36

Slide 36 text

User, browser, vendor and element styles cascade

Slide 37

Slide 37 text

To author good CSS, pay less attention to applied styles of individual elements

Slide 38

Slide 38 text

You can also use this idea of cascading "layers" of CSS to organise your styling. For example, simply write your multiple stylesheets: - reset/normalization stylesheet(s) - default stylesheet(s) - global brand stylesheet(s) - view-specific stylesheet(s)

Slide 39

Slide 39 text

Browsers handle more calculations and conversions to render stuff on screen than you ever want to know. Read the CSS spec. It's crazy and it needs to be. Browsers are mean rendering machines. Declaration is awesome.

Slide 40

Slide 40 text

1. CSS for programmers 2. Learning to walk 3. History lesson 4. CSS is declarative 5. HTML structure 6. Worth knowing 7. Laying things out 8. Measurements 9. Best practices and exercises

Slide 41

Slide 41 text

But you just told us: structure and styles are separate!

Slide 42

Slide 42 text

They are. But good structure and semantics are a prerequisite to authoring good CSS. Just like painting a bumpy surface is hard.

Slide 43

Slide 43 text

(That's all I had to say about structure)

Slide 44

Slide 44 text

1. CSS for programmers 2. Learning to walk 3. History lesson 4. CSS is declarative 5. HTML structure 6. Worth knowing 7. Laying things out 8. Measurements 9. Best practices and exercises

Slide 45

Slide 45 text

HTML elements don't really exist in CSS, only arbitrary elements do. Browsers decide how to render HMTL elements (like native- looking input fi elds), but CSS doesn't really know anything about that.

Slide 46

Slide 46 text

Things that don't exist in CSS: Functions, class inheritance, grids or columns, mixins, variables, negation, ifs and elses, cancelling a declaration, centering.

Slide 47

Slide 47 text

The real power of CSS is fl exibility. Like we discussed, you shouldn't really worry about reproducing a pixel-perfect replication of a mock-up on a user's screen. Your vision is just one of the things that a ff ect the result.

Slide 48

Slide 48 text

You'll get pretty far with nothing but this element#id.class child:pseudoclass .childclass, anotherElement.class { attribute: value; another-attribute: another-value; }

Slide 49

Slide 49 text

1. CSS for programmers 2. Learning to walk 3. History lesson 4. CSS is declarative 5. HTML structure 6. Worth knowing 7. Laying things out 8. Measurements 9. Best practices and exercises

Slide 50

Slide 50 text

Start of gross simpli fi cations

Slide 51

Slide 51 text

Like I said, we learn to walk fi rst

Slide 52

Slide 52 text

CSS has text and containers: “inline” and “block” em { display: inline; } p { display: block; }

Slide 53

Slide 53 text

Inline elements Inline elements are arranged in a natural text flow, and are laid out according to basic typographic rules. Things like line-height, baseline and indenting are familiar from print designs. After this session, go get a Wired Magazine from the kitchen and look at the page.

Slide 54

Slide 54 text

Take an example: vertical-align It's not what you think it is, but it's pretty rad. It's about aligning inline items on a line of text. And also content in table cells, because the same attribute has different uses depending on context. Sorry about that.

Slide 55

Slide 55 text

CSS actually understands what's going on here!

Slide 56

Slide 56 text

Cool typo in CSS • letter-spacing, • word-spacing • direction • text-align • text-justify • text-indent • font-variant • text-tranform • word-break • word-wrap • white-space • baseline-shift • drop-initial-after-align • ruby annotation styling

Slide 57

Slide 57 text

Block elements Block elements contain inline elements, and reserve room for them. Blocks have dimensions and can be arranged in a few ways. Box model governs the rules for the dimensions of block elements. Blocks are extensively nested.

Slide 58

Slide 58 text

CSS is great at getting any content of a document to render sensibly Layouts impose limitations rendering content, e.g. limiting dimensions of containers Increasing these limitations lowers the threshold of breaking content rendering

Slide 59

Slide 59 text

In CSS content naturally flows from top to bottom You control the horizontal dimensions of elements, and let browser handle the vertical dimensions based on what fits the screen on any given context

Slide 60

Slide 60 text

End of gross simpli fi cations

Slide 61

Slide 61 text

1. CSS for programmers 2. Learning to walk 3. History lesson 4. CSS is declarative 5. HTML structure 6. Worth knowing 7. Laying things out 8. Measurements 9. Best practices and exercises

Slide 62

Slide 62 text

Units of measure are awesome Browsers handle all the hassle of converting everything to pixels for you

Slide 63

Slide 63 text

%: relative to available space or font size em: the height of the font in context ex: x-height of the font px: dependent on canvas resolution mm: millimeters cm: centimeters; 1cm=10mm in: inches; 1in=2.54cm pt: points; 1pt=1/72in pc: picas; 1pc=12pt

Slide 64

Slide 64 text

vh: viewport height (percentage) vw: viewport width (percentage) vmin: vh or vw, whichever is lower vmax: vh or vw, whichever is higher

Slide 65

Slide 65 text

Box model allows you to mix all the available units Some things are a little tricky, some things are not doable, but many many cool things can be done When you want a box of given size on the screen, you must always think why it should be of that size, and use that rationale in your declarations

Slide 66

Slide 66 text

1. CSS for programmers 2. Learning to walk 3. History lesson 4. CSS is declarative 5. HTML structure 6. Worth knowing 7. Laying things out 8. Measurements 9. Best practices and exercises

Slide 67

Slide 67 text

When starting out, break down your design into global components Don't start replicating mock-ups or individual views

Slide 68

Slide 68 text

Each layout is a system A set of rules that govern how UI objects look and fl ow Express these rules in CSS

Slide 69

Slide 69 text

Avoid moving code from developer console to CSS In dev console, you only see a change from one perspective. You're focused in applied styles

Slide 70

Slide 70 text

Never add more than the minimum declarations. Touch only the attributes you really need and want to specify. Shorthands are short but express more: background: green; means background-image: none; Shorthands are magical and make it harder to iterate!

Slide 71

Slide 71 text

Don't think in hierarchies. Classes are labels, and allow for all kinds of permutations Individual views are not a good way to organize stylesheets by Try having separate stylesheets for separate concerns like body frame, columns, color scheme, text styling, button styles etc.

Slide 72

Slide 72 text

Organize declarations in logical chunks Think about how you will be looking for a style declaration when you spot something on the page and want to change it

Slide 73

Slide 73 text

Understand similarity vs. sameness Only include things in one declaration when you want the content to apply for everything described in selector, by de fi nition If two blocks just happen to share characteristics, but could just as well not, there's a good chance you want to change one independent of another

Slide 74

Slide 74 text

Repetition (similarity vs. sameness) #header, #footer { background-color: black; } #header { color: white; } #footer { color: grey; } #header { color: white; background-color: black; } #footer { color: grey; background-color: black; }

Slide 75

Slide 75 text

#header, #body { width: 80%; max-width: 50em; min-width: 10em; } .frame-container { max-width: 80%; } Repetition (similarity vs. sameness)

Slide 76

Slide 76 text

Avoid excess nesting (and tools that encourage it) .features .row1 .column2 .detail s h1 { margin-top: 1em; } .title { margin-top: 1em; }

Slide 77

Slide 77 text

Don't touch elements created by plugins /* Override plugin styles to give more padding to graphs */ #graph-from-plugin { padding: 30px; } /* Override plugin styles to give more padding to graphs */ .my-graph-container { padding: 10px; }

Slide 78

Slide 78 text

Inheritance vs. fake reset body { font-weight: normal; } a { font-weight: bold; } a.discreet { font-weight: normal; } body { font-weight: normal; } a { font-weight: bold; } a.discreet { font-weight: inherit; }

Slide 79

Slide 79 text

Trust the cascade /* Bad */ * { font-size: 16px; } /* Good */ bold { font-size: 16px; }

Slide 80

Slide 80 text

Don't fi x simple issues with error-prone CSS - display - position - top, right, bottom, left - negative margins - z-index

Slide 81

Slide 81 text

That's it!

Slide 82

Slide 82 text

[email protected] +358 40 7188776 @jerryjappinen Product design consultant Jerry Jäppinen

Slide 83

Slide 83 text

No content