hip and happening in css (ited 8)
TRANSCRIPT
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/
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
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
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
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
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
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
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
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
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
CodePen
59
Ontwerpenindebrowser,makkelijkgemaakt
• hep://codepen.io/
• GraQs*
• HTML,CSS,JS,Output
• Sass,Jade,ES6,…
• Normalize,Bootstrap,…
• Liveviewenmeer
60
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
+31355431222
JacobvanLenneplaan57,3743APBaarn
@informaat
Crea8ef.Systema8sch.Duurzaam.