Zo gebruik je de nieuwste snufjes in je ontwerpen en prototypes

1. Vincent Smedinga
i-TED #8 – 11 november 2016
Hip and happening in CSS
Zo gebruik je de nieuwste snuFes in je ontwerpen en prototypes

2. Programma
1. Flexbox
2. Grid
3. Columns
4. Viewport units
5. Custom properQes
6. SVG
7. Shapes
8. Filters
9. Transforms
2
Laatste minuut:
1. CodePen
2. HTML?
3. Javascript?
4. CSS!

3. Bespreekpunten
1. Wat kun je ermee?
2. Hoe schrijf je het?
3. Demo Qme! (23 seconden per stuk)
4. Kan ik het al gebruiken?
5. Wat als ik meer wil weten?
3

4. Alle demo’s
vind je hier:
4
codepen.io/vincentsmedinga/collec8ons/

5. Flexbox
5

6. Flexbox: Wat kun je ermee
• Dingen ordenen over een rij of kolom.
• Items groeien of krimpen naar hun inhoud of een raQo.
• Diverse opQes voor horizontale en verQcale uitlijning.
• Overloop is toegestaan; maakt grids mogelijk.
• De volgorde van items is instelbaar: handig voor responsive design!
Meest geschikt voor: layout in een (klein) component.
6

7. Flexbox: Hoe schrijf je het
.container {
display: flex;
}
7

8. Flexbox: Demo
a. Horizontaal uitlijnen
b. VerQcaal centreren
8

9. 9

10. Flexbox: Meer weten
1. heps://philipwalton.github.io/solved-by-flexbox/
Showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with
Flexbox.
2. heps://css-tricks.com/snippets/css/a-guide-to-flexbox/
Visueel overzicht van alle parameters voor maatvoering, uitlijning, overloop, volgorde etc.
10

11. Grid
11

12. Grid: Wat kun je ermee
• Een tweedimensionaal grid definiëren.
• De definiQe leek in CSS, niet in HTML. En daar hoort het ook.
• Net als in flexbox is de volgorde van items instelbaar.
• De syntax ziet er wel een beetje gek uit. Of misschien eigenlijk ook wel intuïQef.
Meest geschikt voor: layout van pagina’s en grote modules
12

13. Grid: Hoe schrijf je het
.wrapper {
display: grid;
grid-gap: 20px;
grid-template-columns: 120px auto 120px;
grid-template-areas:
"header header header"
"sidebar content sidebar2"
"footer footer footer";
}
13

14. Grid: Demo
a. Paginalayout
14

15. 15

16. Grid: Meer weten
1. hep://gridbyexample.com/
A collecQon of usage examples for the CSS Grid Layout specificaQon.
2. hep://labs.jensimmons.com
The experimental layout lab of Jen Simmons: een aantal van de voorbeelden betrek CSS Grid.
3. heps://abookapart.com/products/get-ready-for-css-grid-layout
Er staat A Book Apart in de url dus het is geweldig.
16

17. Columns
17

18. Columns: Wat kun je ermee
• Tekst in kolommen zeeen!
• Maar ook andere dingen hoor.
Meest geschikt voor: nieuws, blogs, online magazine en/of grote schermen.
18

19. Columns: Hoe schrijf je het
article {
columns: 3;
column-gap: 48px;
column-rule: 1px solid grey;
}
article {
columns: 64ch;
}
19

20. Columns: Demo
a. NieuwsarQkel
20

21. 21

22. Columns: Meer weten
1. heps://developer.mozilla.org/en-US/docs/Web/CSS/columns
Mozilla Developer Network
2. heps://css-tricks.com/guide-responsive-friendly-css-columns/
With CSS columns you can create a print-inspired layout with liele added markup that can adapt
beyond a fixed canvas.
3. heps://vasilis.nl/presentaQes/fec15/examples/studies/columns/arQcle/
Je moet even horizontaal scrollen.
22

23. Viewport units
23

24. Viewport units: Wat kun je ermee
• Maatvoering op basis van schermgrooee
• ‘AutomaQsche media queries’
• Hero component
• One pagers
• Modal dialogs
• Responsive typography
• En meer – het is een unit die je overal kan gebruiken waar je units kan gebruiken
Meest geschikt voor: van alles.
24

25. Viewport units: Hoe schrijf je het
.hero {
width: 100vw;
height: 50vh;
}
body { font-size: calc(16px + 1vw); }
h1 {
font-size: calc(16px + (24 - 16) * (100vw - 400px) / (800 - 400));
}
25

26. Viewport units: Demo
a. Onepager
b. Responsive typography
26

27. 27

28. Viewport units: Meer weten
1. heps://www.smashingmagazine.com/2016/05/fluid-typography/
Embracing fluid typography might be easier than you think. It has wide browser support, is simple
to implement and can be achieved without losing control over many important aspects of design.
2. heps://vimeo.com/181175981
Vasilis van Gemert: Mediaqueryless Responsiveness, CSS Day 2016
28

29. Custom proper8es
29

30. Custom properQes: Wat kun je ermee
• Variabelen definiëren
• Geen preprocessor (Less, Sass) meer nodig
• De fundamenten van je ontwerp borgen en hergebruiken
Meest geschikt voor: consistente visuele ontwerpen :) en theming
30

31. Custom properQes: Hoe schrijf je het
:root {
--text-color: navy;
--link-color: #c00;
--bba: lightgreen;
--bbo: darkgreen;
--spacing: 16px;
}
31
p { color: var(--text-color); }
a { color: var(--link-color); }
button {
background-color: var(--bba);
border: 2px solid var(--bbo);
color: var(--text-color);
padding: calc(var(--spacing) / 2) var(--spacing);
}

32. Custom properQes: Demo
a. Style guide
32

33. 33

34. Custom properQes: Meer weten
1. heps://philipwalton.com/arQcles/why-im-excited-about-naQve-css-variables/
Custom properQes bring a new set of dynamic and powerful capabiliQes to CSS, and I’m sure
many of their biggest strengths have yet to be discovered.
34

35. SVG
35

36. SVG: Wat kun je ermee
• Ehm, dat hoef ik jullie niet te vertellen.
Meest geschikt voor: pictogrammen, datavisualisaQe.
Combineer met animaQe.
36

37. SVG: Hoe schrijf je het?
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Layer_1" xmlns="hep://www.w3.org/2000/svg" xmlns:xlink="hep://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;"
xml:space="preserve">
<g>
<g>
<path d="M141.247,31.99C125.777,11.362,104.892,0.003,82.44,0.003c-22.451,0-43.335,11.36-58.806,31.986
C8.921,51.606,0.819,77.505,0.819,104.916c0,27.412,8.102,53.31,22.816,72.927c8.605,11.473,18.888,20.068,30.18,25.446
L36.546,462.948c-0.842,12.653,3.645,25.221,12.309,34.48c8.665,9.261,20.909,14.573,33.591,14.573 c12.679,0,24.917-5.309,33.579-14.565c8.664-9.26,13.151-21.83,12.307-34.486l-17.269-259.656
c11.294-5.379,21.578-13.974,30.184-25.449c14.712-19.617,22.816-45.517,22.816-72.927S155.961,51.607,141.247,31.99z
M98.874,481.389c-4.3,4.596-10.135,7.127-16.429,7.127c-6.299,0-12.138-2.533-16.442-7.132c-4.302-4.6-6.442-10.592-6.025-16.875
l16.954-254.934c1.826,0.153,3.659,0.258,5.508,0.258c1.848,0,3.68-0.106,5.505-0.258l16.954,254.934 C105.316,470.795,103.178,476.79,98.874,481.389z M82.44,186.346c-4.207,0-8.308-0.645-12.264-1.839
c-0.328-0.121-0.66-0.232-1-0.324c-25.683-8.431-44.872-40.759-44.872-79.266c0-44.899,26.08-81.429,58.136-81.429 c32.057,0,58.138,36.529,58.138,81.429C140.578,149.817,114.498,186.346,82.44,186.346z"/>
</g>
</g>
<g>
<g>
<path d="M511.18,305.92V13.222l-0.099,0.043c0.339-2.587-0.174-5.303-1.653-7.696c-3.41-5.516-10.645-7.223-16.164-3.813
c-47.905,29.617-76.509,80.916-76.518,137.229c0,0.008-0.001,0.015-0.001,0.022v153.781c0,13.493,10.783,24.483,24.169,24.891
V476.7c0,19.373,15.761,35.134,35.134,35.134c19.373,0,35.135-15.761,35.135-35.134V305.979 C511.182,305.959,511.18,305.94,511.18,305.92z M441.675,294.235c-0.8-0.001-1.444-0.647-1.444-1.445V139.028
c0-0.005,0.001-0.009,0.001-0.014c0-40.621,17.413-78.189,47.462-104.139v259.36H441.675z M487.697,476.702 c0,6.423-5.225,11.649-11.65,11.649c-6.423,0-11.649-5.225-11.649-11.649V317.721h23.299V476.702z"/>
</g>
</g>
<g>
<g>
<path d="M332.799,0.003c-6.485,0-11.743,5.257-11.743,11.743v133.4h-29.92v-133.4c0-6.485-5.258-11.743-11.743-11.743
c-6.485,0-11.743,5.257-11.743,11.743v133.4h-29.92v-133.4c0-6.485-5.258-11.743-11.743-11.743s-11.743,5.257-11.743,11.743
v169.984c0,19.14,15.573,34.714,34.714,34.714h2.089l-16.475,247.65c-0.827,12.352,3.551,24.624,12.013,33.67
c8.463,9.049,20.42,14.238,32.807,14.238c12.385,0,24.342-5.189,32.806-14.237c8.461-9.045,12.839-21.318,12.013-33.666
l-16.476-247.655h2.093c19.142,0,34.715-15.573,34.715-34.714V11.745C344.541,5.26,339.283,0.003,332.799,0.003z M295.045,481.72
c-4.098,4.382-9.658,6.795-15.654,6.795s-11.556-2.413-15.654-6.795c-4.096-4.379-6.132-10.082-5.732-16.063l16.578-249.215h9.615 l16.579,249.218C301.177,471.638,299.142,477.341,295.045,481.72z
M321.055,181.729c0.001,6.192-5.036,11.228-11.228,11.228 h-46.622c-0.015,0.001-0.031-0.001-0.046,0h-14.2c-6.192,0-11.228-5.036-11.228-11.228v-13.1h83.324V181.729z"/>
</g>
</g>
</svg>
37

38. SVG: Demo
a. SVG ❤ CSS
38

39. 39

40. SVG: Meer weten
1. heps://sarasoueidan.com/tags/svg/
Sara schrijk, spreekt, en twieert veel over SVG.
2. heps://sarasoueidan.com/blog/svg-Qps-for-designers/
Bijvoorbeeld.
3. hep://www.hongkiat.com/blog/svg-animaQons/
Here I have compiled some amazing animated SVG.
4. hep://svgpocketguide.com/book/
This guide […] should prove helpful in ge|ng you started [with SVG]. It's intended for designers
and developers looking to add SVG to their workflow in the most accessible way possible.
5. heps://abookapart.com/products/pracQcal-svg
Er staat A Book Apart in de url dus het is geweldig.
40

41. Shapes
41

42. Shapes: Wat kun je ermee
• Eindelijk dingen maken die niet rechthoekig zijn!
Meest geschikt voor: tekst uitlijnen om a~eeldingen heen (magazine layout).
42

43. Shapes: Hoe schrijf je het?
.circle {
float: left;
width: 128px;
height: 128px;
margin: 16px;
background-color: gold;
shape-outside: circle(45% at 50% 50%);
}
43

44. Shapes: Demo
a. Visitekaartje
b. Shapes & 🍇
44

45. 45

46. Shapes: Meer weten
1. hep://labs.jensimmons.com/#shapes
Meer fruit. En ook meer CSS technieken trouwens, scroll maar omlaag.
46

47. Filters
47

48. Filters: Wat kun je ermee
• Beeldbewerking
• Wederom: dynamisch, dus ook on hover of geanimeerd
Meest geschikt voor: foto’s, overlays, backdrops, mouseovers.
48

49. Filters: Hoe schrijf je het
.overlay-container > *:not(.overlay) {
filter: blur(2px);
}
49

50. Filters: Demo
a. Overlay
b. CSSgram
50

51. 51

52. Filters: Meer weten
1. hep://benne€eely.com/filters/
Een demo met Sponge Bob!
2. heps://una.im/CSSgram/
Instagram in CSS.
3. hep://tympanus.net/Development/DistortedBueonEffects/
Veee bueons.
52

53. Transforms
53

54. Transforms: Wat kun je ermee
• Dingen vervormen, 2D en 3D
• Bijvoorbeeld schalen, roteren, schuin zeeen
• Kan dus dynamisch in de browser in plaats van één keer in een tekenprogramma
• En bovendien on mouseover en geanimeerd
Meest geschikt voor: ruimtebesparing en kleine dingetjes aandacht laten trekken
54

55. Transforms: Hoe schrijf je het
.gekanteld {
transform: rotate(90deg);
}
.verplaatst {
transform: translateX(100px) translateY(200px)
}
55

56. Transforms: Demo
a. Backflip
56

57. 57

58. Transforms: Meer weten
1. hep://tympanus.net/codrops/2013/08/13/mulQ-level-push-menu/
Zo’n navigaQemenu links dat naar binnen wandelt.
58

59. CodePen
59

60. Ontwerpen in de browser, makkelijk gemaakt
• hep://codepen.io/
• GraQs*
• HTML, CSS, JS, Output
• Sass, Jade, ES6, …
• Normalize, Bootstrap, …
• Live view en meer
60

61. HTML & JavaScript
61

62. HTML
Wat moet ik eigenlijk weten van HTML om een beetje een prototype te kunnen maken?
62
<p>
Ik ben een rode paragraaf!
</p>
p {
color: red;
}
<div class=“ding”>
Ik ben een ding met een kader!
</div>
.ding {
border: 16px solid black;
}

63. JavaScript
Wat moet ik eigenlijk weten van HTML om een beetje een prototype te kunnen maken?
function nothing() {
return null;
}
Of eigenlijk:
() => null;
63

64. CSS
64

65. CSS
Ontwerpen in de browser! :) Of op zijn minst presenteren.
Geenszins tegen Sketch, Figma, Photoshop*, Illustrator*.
Elke methode heek zijn plek. Gebruik wat je goed kan.
Maar je hebt gezien hoe gemakkelijk CSS kan zijn. Extra gereedschap!
En anders help ik je graag, bel, mail, loop binnen.
* In bepaalde gevallen
65

66. Workshop?
Mocht er toevallig belangstelling zijn,
Dan wil ik wel in-house workshop(s) CSS gaan geven.
Mail me wat je wilt leren!
66

67. SamenvaMng
67

68. Samenva|ng
1. CSS is in beweging! Steeds meer veel gebruikte patronen worden gemakkelijk om te schrijven.
2. Er is nog veel meer leuks dan wat ik in Qen minuten heb kunnen laten zien en de komende jaren
komt er nog meer leuks aan. De specificaQe volgt wat ontwerpers nodig hebben.
3. Je hebt helemaal niet zo veel ervaring met HTML en CSS nodig om een nu|g prototype in de
browser te maken.
4. CSS is ideaal om de fundamenten van je ontwerp – kleur, typografie, maatvoering, animaQes,
responsiveness – te borgen en hergebruiken. Én om te sparren met de front-ender.
5. Voor sommige features moet je een beta van een browser installeren, bijv. Chrome Canary,
Firefox Nightly, of Safari Technology Preview. Dat zal zo blijven ook.
6. CodePen is een tof plaOorm om wireframes en prototypes in te ontwerpen, delen en
presenteren.
68

69. info@informaat.nl
+31 35 543 1222
Jacob van Lenneplaan 57, 3743 AP Baarn
@informaat
Crea8ef. Systema8sch. Duurzaam.