Hip and happening in CSS (iTED 8)

VincentSmedinga

i-TED#8–11november2016

HipandhappeninginCSSZogebruikjedenieuwstesnuFesinjeontwerpenenprototypes

Programma

1. Flexbox

2. Grid

3. Columns

4. Viewportunits

5. CustomproperQes

6. SVG

7. Shapes

8. Filters

9. Transforms

2

Laatsteminuut:

1. CodePen

2. HTML?

3. Javascript?

4. CSS!

Bespreekpunten

1. Watkunjeermee?

2. Hoeschrijfjehet?

3. DemoQme!(23secondenperstuk)

4. Kanikhetalgebruiken?

5. Watalsikmeerwilweten?

3

Alledemo’svindjehier:

4

codepen.io/vincentsmedinga/collec8ons/

http://codepen.io/vincentsmedinga/collections/

Flexbox

5

Flexbox:Watkunjeermee

• Dingenordenenovereenrijofkolom.

• ItemsgroeienofkrimpennaarhuninhoudofeenraQo.

• DiverseopQesvoorhorizontaleenverQcaleuitlijning.

• Overloopistoegestaan;maaktgridsmogelijk.

• Devolgordevanitemsisinstelbaar:handigvoorresponsivedesign!

Meestgeschiktvoor:layoutineen(klein)component.

6

Flexbox:Hoeschrijfjehet

.container {

display: flex;

}

7

Flexbox:Demo

a. Horizontaaluitlijnen

b. VerQcaalcentreren

8

9

Flexbox:Meerweten

1. heps://philipwalton.github.io/solved-by-flexbox/ ShowcaseproblemsoncehardorimpossibletosolvewithCSSalone,nowmadetriviallyeasywithFlexbox.

2. heps://css-tricks.com/snippets/css/a-guide-to-flexbox/Visueeloverzichtvanalleparametersvoormaatvoering,uitlijning,overloop,volgordeetc.

10

https://philipwalton.github.io/solved-by-flexbox/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Grid

11

Grid:Watkunjeermee

• Eentweedimensionaalgriddefiniëren.

• DedefiniQeleekinCSS,nietinHTML.Endaarhoorthetook.

• Netalsinflexboxisdevolgordevanitemsinstelbaar.

• Desyntaxzieterweleenbeetjegekuit.OfmisschieneigenlijkookwelintuïQef.

Meestgeschiktvoor:layoutvanpagina’sengrotemodules

12

Grid:Hoeschrijfjehet

.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

Grid:Demo

a. Paginalayout

14

15

Grid:Meerweten

1. hep://gridbyexample.com/ AcollecQonofusageexamplesfortheCSSGridLayoutspecificaQon.

2. hep://labs.jensimmons.comTheexperimentallayoutlabofJenSimmons:eenaantalvandevoorbeeldenbetrekCSSGrid.

3. heps://abookapart.com/products/get-ready-for-css-grid-layoutErstaatABookApartindeurldushetisgeweldig.

16

http://gridbyexample.com/

http://labs.jensimmons.com

https://abookapart.com/products/get-ready-for-css-grid-layout

Columns

17

Columns:Watkunjeermee

• Tekstinkolommenzeeen!

• Maarookanderedingenhoor.

Meestgeschiktvoor:nieuws,blogs,onlinemagazineen/ofgroteschermen.

18

Columns:Hoeschrijfjehet

article {

columns: 3;

column-gap: 48px;

column-rule: 1px solid grey;

}

article {

columns: 64ch;

}

19

Columns:Demo

a. NieuwsarQkel

20

21

Columns:Meerweten

1. heps://developer.mozilla.org/en-US/docs/Web/CSS/columns MozillaDeveloperNetwork

2. heps://css-tricks.com/guide-responsive-friendly-css-columns/WithCSScolumnsyoucancreateaprint-inspiredlayoutwithlieleaddedmarkupthatcanadaptbeyondafixedcanvas.

3. heps://vasilis.nl/presentaQes/fec15/examples/studies/columns/arQcle/ Jemoetevenhorizontaalscrollen.

22

https://developer.mozilla.org/en-US/docs/Web/CSS/columns

https://css-tricks.com/guide-responsive-friendly-css-columns/

https://vasilis.nl/presentaties/fec15/examples/studies/columns/article/

Viewportunits

23

Viewportunits:Watkunjeermee

• Maatvoeringopbasisvanschermgrooee

• ‘AutomaQschemediaqueries’

• Herocomponent

• Onepagers

• Modaldialogs

• Responsivetypography

• Enmeer–hetiseenunitdiejeoveralkangebruikenwaarjeunitskangebruiken

Meestgeschiktvoor:vanalles.

24

Viewportunits:Hoeschrijfjehet

.hero {

width: 100vw;

height: 50vh;

}

body { font-size: calc(16px + 1vw); }

h1 {

font-size: calc(16px + (24 - 16) * (100vw - 400px) / (800 - 400));

}

25

Viewportunits:Demo

a. Onepager

b. Responsivetypography

26

27

Viewportunits:Meerweten

1. heps://www.smashingmagazine.com/2016/05/fluid-typography/ Embracingfluidtypographymightbeeasierthanyouthink.Ithaswidebrowsersupport,issimpletoimplementandcanbeachievedwithoutlosingcontrolovermanyimportantaspectsofdesign.

2. heps://vimeo.com/181175981VasilisvanGemert:MediaquerylessResponsiveness,CSSDay2016

28

https://www.smashingmagazine.com/2016/05/fluid-typography/

https://vimeo.com/181175981

Customproper8es

29

CustomproperQes:Watkunjeermee

• Variabelendefiniëren

• Geenpreprocessor(Less,Sass)meernodig

• Defundamentenvanjeontwerpborgenenhergebruiken

Meestgeschiktvoor:consistentevisueleontwerpen:)entheming

30

CustomproperQes:Hoeschrijfjehet

: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);

}

CustomproperQes:Demo

a. Styleguide

32

33

CustomproperQes:Meerweten

1. heps://philipwalton.com/arQcles/why-im-excited-about-naQve-css-variables/ CustomproperQesbringanewsetofdynamicandpowerfulcapabiliQestoCSS,andI’msuremanyoftheirbiggeststrengthshaveyettobediscovered.

34

https://philipwalton.com/articles/why-im-excited-about-native-css-variables/

SVG

35

SVG:Watkunjeermee

• Ehm,dathoefikjullieniettevertellen.

Meestgeschiktvoor:pictogrammen,datavisualisaQe.

CombineermetanimaQe.

36

SVG:Hoeschrijfjehet?

<?xmlversion="1.0"encoding="iso-8859-1"?><svgversion="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="00512.001512.001"style="enable-background:new00512.001512.001;"xml:space="preserve"><g> <g> <pathd="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.986C8.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.446L36.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.573c12.679,0,24.917-5.309,33.579-14.565c8.664-9.26,13.151-21.83,12.307-34.486l-17.269-259.656c11.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.99zM98.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.875l16.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.934C105.316,470.795,103.178,476.79,98.874,481.389zM82.44,186.346c-4.207,0-8.308-0.645-12.264-1.839c-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.429c32.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> <pathd="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.813c-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.891V476.7c0,19.373,15.761,35.134,35.134,35.134c19.373,0,35.135-15.761,35.135-35.134V305.979C511.182,305.959,511.18,305.94,511.18,305.92zM441.675,294.235c-0.8-0.001-1.444-0.647-1.444-1.445V139.028c0-0.005,0.001-0.009,0.001-0.014c0-40.621,17.413-78.189,47.462-104.139v259.36H441.675zM487.697,476.702c0,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> <pathd="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.743c-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.743v169.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.67c8.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.666l-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.003zM295.045,481.72c-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.615l16.579,249.218C301.177,471.638,299.142,477.341,295.045,481.72zM321.055,181.729c0.001,6.192-5.036,11.228-11.228,11.228h-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

SVG:Demo

a. SVG❤CSS

38

39

SVG:Meerweten

1. heps://sarasoueidan.com/tags/svg/ Saraschrijk,spreekt,entwieertveeloverSVG.

2. heps://sarasoueidan.com/blog/svg-Qps-for-designers/ Bijvoorbeeld.

3. hep://www.hongkiat.com/blog/svg-animaQons/ HereIhavecompiledsomeamazinganimatedSVG.

4. hep://svgpocketguide.com/book/ Thisguide[…]shouldprovehelpfulinge|ngyoustarted[withSVG].It'sintendedfordesignersanddeveloperslookingtoaddSVGtotheirworkflowinthemostaccessiblewaypossible.

5. heps://abookapart.com/products/pracQcal-svgErstaatABookApartindeurldushetisgeweldig.

40

https://sarasoueidan.com/tags/svg/

https://sarasoueidan.com/blog/svg-tips-for-designers/

http://www.hongkiat.com/blog/svg-animations/

http://svgpocketguide.com/book/

https://abookapart.com/products/practical-svg

Shapes

41

Shapes:Watkunjeermee

• Eindelijkdingenmakendienietrechthoekigzijn!

Meestgeschiktvoor:tekstuitlijnenoma~eeldingenheen(magazinelayout).

42

Shapes:Hoeschrijfjehet?

.circle {

float: left;

width: 128px;

height: 128px;

margin: 16px;

background-color: gold;

shape-outside: circle(45% at 50% 50%);

}

43

Shapes:Demo

a. Visitekaartje

b. Shapes&🍇

44

45

Shapes:Meerweten

1. hep://labs.jensimmons.com/#shapes Meerfruit.EnookmeerCSStechniekentrouwens,scrollmaaromlaag.

46

http://labs.jensimmons.com/#shapes

Filters

47

Filters:Watkunjeermee

• Beeldbewerking

• Wederom:dynamisch,dusookonhoverofgeanimeerd

Meestgeschiktvoor:foto’s,overlays,backdrops,mouseovers.

48

Filters:Hoeschrijfjehet

.overlay-container > *:not(.overlay) {

filter: blur(2px);

}

49

Filters:Demo

a. Overlay

b. CSSgram

50

51

Filters:Meerweten

1. hep://benne�eely.com/filters/EendemometSpongeBob!

2. heps://una.im/CSSgram/ InstagraminCSS.

3. hep://tympanus.net/Development/DistortedBueonEffects/ Veeebueons.

52

http://bennettfeely.com/filters/

https://una.im/CSSgram/

http://tympanus.net/Development/DistortedButtonEffects/

Transforms

53

Transforms:Watkunjeermee

• Dingenvervormen,2Den3D

• Bijvoorbeeldschalen,roteren,schuinzeeen

• Kandusdynamischindebrowserinplaatsvanéénkeerineentekenprogramma

• Enbovendienonmouseoverengeanimeerd

Meestgeschiktvoor:ruimtebesparingenkleinedingetjesaandachtlatentrekken

54

Transforms:Hoeschrijfjehet

.gekanteld {

transform: rotate(90deg);

}

.verplaatst {

transform: translateX(100px) translateY(200px)

}

55

Transforms:Demo

a. Backflip

56

57

Transforms:Meerweten

1. hep://tympanus.net/codrops/2013/08/13/mulQ-level-push-menu/ Zo’nnavigaQemenulinksdatnaarbinnenwandelt.

58

http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/

CodePen

59

Ontwerpenindebrowser,makkelijkgemaakt

• hep://codepen.io/

• GraQs*

• HTML,CSS,JS,Output

• Sass,Jade,ES6,…

• Normalize,Bootstrap,…

• Liveviewenmeer

60

http://codepen.io/

HTML&JavaScript

61

HTML

WatmoetikeigenlijkwetenvanHTMLomeenbeetjeeenprototypetekunnenmaken?

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;

}

JavaScript

WatmoetikeigenlijkwetenvanHTMLomeenbeetjeeenprototypetekunnenmaken?

function nothing() {

return null;

}

Ofeigenlijk:

() => null;

63

CSS

64

CSS

Ontwerpenindebrowser!:)Ofopzijnminstpresenteren.

GeenszinstegenSketch,Figma,Photoshop*,Illustrator*.

Elkemethodeheekzijnplek.Gebruikwatjegoedkan.

MaarjehebtgezienhoegemakkelijkCSSkanzijn.Extragereedschap!

Enandershelpikjegraag,bel,mail,loopbinnen.

*Inbepaaldegevallen

65

Workshop?

Mochtertoevalligbelangstellingzijn,

Danwilikwelin-houseworkshop(s)CSSgaangeven.

Mailmewatjewiltleren!

66

SamenvaMng

67

Samenva|ng

1. CSSisinbeweging!Steedsmeerveelgebruiktepatronenwordengemakkelijkomteschrijven.

2. ErisnogveelmeerleuksdanwatikinQenminutenhebkunnenlatenzienendekomendejarenkomternogmeerleuksaan.DespecificaQevolgtwatontwerpersnodighebben.

3. JehebthelemaalnietzoveelervaringmetHTMLenCSSnodigomeennu|gprototypeindebrowsertemaken.

4. CSSisideaalomdefundamentenvanjeontwerp–kleur,typografie,maatvoering,animaQes,responsiveness–teborgenenhergebruiken.Énomtesparrenmetdefront-ender.

5. Voorsommigefeaturesmoetjeeenbetavaneenbrowserinstalleren,bijv.ChromeCanary,FirefoxNightly,ofSafariTechnologyPreview.Datzalzoblijvenook.

6. CodePeniseentofplaOormomwireframesenprototypesinteontwerpen,delenenpresenteren.

68

[email protected]

+31355431222

JacobvanLenneplaan57,3743APBaarn

@informaat

Crea8ef.Systema8sch.Duurzaam.