 Welcome to WordCamp Jacksonville. Woohoo! Yes, awesome. It's the best WordCamp today. The best this month, maybe the best this year. So my talk is the new styles. And so I just like... I googled this... I googled like bad, ugly fashion styles or something like that and I found this picture. And then I tried to pair it with the equally gaudy font. And so this is what I came up with. So this is me. My name is Mike Herschel. I'm on the left. I have a dog and a daughter. And I work for a company called Lullabot. Lullabot is a full-service digital agency. All that stuff. We do a lot of work for some large publishers. Like we've done stuff... Well, we've done like MSNBC.com. We've done Grammys and a bunch of other cool stuff. I recently got a puppy. And the puppy is just like super cute. So... In the beginning... There was CSS. So actually I have some questions before we get started here. Who here... writes CSS? Who here like does like their own custom WordPress themes? Who here is just like sitting here hanging out? Most people, like for the record for the video, most people are just hanging out. So in the beginning there was CSS, right? And... we saw that it was good. You had your color with fonts. Sometimes you would... you know, screw up your colors because you're using some type of color picker. So you'd have... some... sometimes... you had to do this with your CSS. I actually installed Dreamweaver so I could take the screenshot. So you would do the tables. And so I'm going to talk about a couple of different things. The first thing I'm going to talk about is CSS variables. And you're probably thinking to yourself well what about SAS or less or something like that? Who here writes SAS or less or does some type of preprocessing? So what... when you're writing your styles you can write it in a certain syntax in like condensed stuff and nest stuff in your little brackets and you can use... you can use variables like this. So I can just say turquoise is my background and that will resolve to some type of hexadecimal color. And then what... when you're developing it it will just like generate your CSS. You know, and your CSS of course is what tells your browser what things look like, right? You can use SAS or less to do this type of stuff but it's a little bit different. I'm going to talk about that, right? So flashback to 2010-ish. Nicole Sullivan used to work for Yahoo at the time and she created a specification submission to add CSS variable support into... into CSS. And so back forward to current time or even 2015 you can see that all the major browsers really support this. One of the reasons I'm talking about this is because it's not being used very often I'm going to you know, we'll kind of maybe talk a little bit why. So the kind of the meat and potatoes of this presentation is me talking about the different syntaxes why they're cool, how they work and yeah, if anyone has any questions or if I say something that's incorrect you can throw something at me or raise your hand. So basic CSS properties right here you can define your so I want to talk about it's custom properties like they're called CSS custom properties a lot of people refer to them as CSS variables but custom properties is a little bit more easier to understand right because when you're looking at like your CSS your CSS selector and all your properties and stuff this is the property that's the value or that's the rule, that's the value all together it's the property. So you're creating a custom property right here and then you're assigning a value to it right here so all custom properties are prefixed with just a double hyphen and then when you want to make use of this it's pretty easy, you just have this bar function right here and you just do bar, double hyphen and whatever you call this. Does this kind of make sense at this point? You're looking at it and like this is kind of as basic as it gets right here but there's a couple important things that you're probably looking at you're probably like what the hell is root? So root is just the root of your documents the same thing as using saying like the html tag or something like that that's pretty much always the html tag kind of like normal CSS it will cascade down so you know how like if you're if you're styling your web page and you set the font to something like future like aerial or something like that it will make the whole website that font, right? that right on your body tag because the styles are cascading down and so you're setting this custom property on the html tag up here and it's setting that property all the way down if you set you can also set your custom properties on like say an element down the DOM tree say like an h3 or a class selector or something like that and the custom property will cascade down but of course it doesn't cascade up because that's the way CSS works it's like CSS is cascading you know that's one of the seasons CSS so you can see what I'm doing right here is I'm doing a hover state right? so like a lot of times if you're doing a hover state you say like background green and then background and then you know for your hover selector you have background red or something like that right? but you can do things like this right here where you're changing the variable at runtime as the browser is interpreting it you're actually changing the variable and this is like where the real power up comes into you because this is something that you cannot do with sass or less or any type of CSS preprocessing so like at this point what we're doing is we are changing we are changing we are changing this variable color we're not editing the background or we're not changing the background color we're changing just the CSS variable which of course is being called up there does that kind of make sense a little bit? so that carries on as you go down unless you change it again absolutely of course this is just a hover state so it only carries on as your hovering exactly yeah they have like global variables or something you can't change yeah so you can actually override them well I'll talk a little bit about that so just like a normal CSS property say if I set my body background to red and then I set my footer background to green you can override it so you can do the same with CSS custom properties you can also override it in line like this and if you don't like any type of componentized CSS especially if you're using React you can like bind this stuff to your state or you can you can edit this directly like if you're doing like obviously if you're doing some type of server-side rendering stuff like WordPress you can output this stuff directly in your template files right there and it will override any type of default CSS that you have so for example you can have maybe a theme on your website for different sections and so I can say for this part of my website theme is purple and I can say I can have something in like the head tag or something like that says dash dash color instead of purple and then all of the styles in the regular style sheet just look at that custom property just kind of move on right here I already did that slide let's kind of look at it a little bit more so you can also have fallbacks right here maybe that's what I was talking about right here so you can have a fallback value so you can see there's two two parameters being passed into the var function right here you have your color but say if this is not defined you can have a default right there and the default in this case is just red so just to reiterate that like before we just had like dependencies that were being passed in and this one you can set a default now what's kind of cool is you can set for your default you can set that to another variable right so you can have your default to be variables all the way down and that created a meme for this this is the highlight of the section so if you guys all want to leave now it's okay so if you're doing ask supports does everybody know what ask supports does so ask supports is basically asking the browser do you support this do you support CSS variables do you support CSS grid or something like that and so you can actually detect support for this you're not actually detecting anything you're just conditionally throwing down your stuff based on that you don't have to remember all the syntax just know that it's possible because you can always Google stuff after you can set of course values in here right here this is what you cannot do so this is a media query right here right right now as it stands you cannot use CSS variables or CSS custom properties in media queries that's why they're called the properties for down here there's a proposal in Chrome to get this working and now it's not working so you still have to use things like sass variables or less variables or just like hard code your media queries in that way so what are we doing right here animations right so you can animate so when you're doing CSS animations you have your animation name and your animation name points to whatever keyframe that you're defining the keyframe with the keyframes and then you point to that your animation name right so what you can do CSS variables kind of works with your animation but it's a little bit funky where you can animate two stuff you know like so you can see and down here I'm animating from position left to position right but you cannot animate a CSS custom property in here you would think that would kind of work but it doesn't so just be aware of that if you're doing CSS animations and so here's kind of a complex example where what I'm doing is I'm setting I'm creating a div that kind of keeps an aspect ratio so there's a little different CSS hacks to do this but like in this case what I want is I want to create a box at a certain aspect ratio whether it be narrow, wide or something different and based on the size of a custom property up here I want to make it bigger or smaller but I always want to keep the same aspect ratio so you can see what I'm doing right here is I'm using the CSS calc function so CSS calc allows you to add like different units together so you can add like things like pixels with percentages with BW units and everything else so what I'm doing right here is I'm just basically using the CSS custom property and time using it by whatever the aspect ratio that I want right here is which in this case is 16 by 9 and then I want to add a unit on it so I'm just going to add ramps so that's the width and then of course you can do the height you can do your font size based on that and of course the background is just pointing to that so basically I have three CSS properties up here keying off of one CSS variable and that's pretty cool can it make sense does everybody understand what I'm doing? you always use two arguments in one function is it required? no you only need one you only need the one argument in there like the custom property name in this case I'm setting my default value just to one a size of one so this is like this is a more advanced use case right here but I just kind of want to show it because that's something that's pretty cool so the next thing I really want to talk about is the CSS grid so CSS let's recap this has anybody used CSS variables before? has anybody gone to use CSS variables? has anybody gone to use it? pretty easy, pretty cool you get a game like that I'm going to we'll see I'm pretty cool someone like elbow that guy so I'm going to talk about CSS grid right now so CSS grid a new way to basically allow all your data on your page right? so if you remember back in the 1990s you would use table based layouts in the early 2000s you would use table based layouts where you would create your TRs, TDs and you would put a little TD over here, put an image in it and put a TD over here and you'd put your H1 in it and stuff like that and then sometimes stuff would collapse like spacer drifts in there and all types of cool stuff and then sometimes you had to nest your tables to kind of keep stuff and it was pretty cool so back in 2003-2005 you started using you started using floats so you would float to the left, float to the right you would set your widths and then you would have to use clear so a lot of times you would float something right float something left or something like that but then the container div would not go all the way down to the bottom and you're like what the hell is going on you don't know what a clear fix is paying the buck because floats were not made for positioning so then you had like all these grid systems you know so you had stuff like I remember I think 960 was one of the first grid systems come out and basically you would just stick a CSS file in your theme and you could put CSS classes on there you know like span 4 grid 12 and stuff like that and that's honestly how bootstrap works a lot of people use bootstrap but you had this proliferation of grid systems and you know they would create stuff like this they would create like all these you know weird margins you're looking at developer tools you're like what the hell is all these you know decimal points I don't like decimal points and stuff like this you would find articles that say the 13 best responsive CSS grid systems like this is in my opinion like a little bit idiotic because I don't want to learn a grid system just to make a website I just want stuff to work I don't want to spend my time learning something new just so I can lay out stuff on the website you know and I'm in another game so you got CSS grid right so CSS grid is pretty new it's meeting potatoes of the website of my presentation again and so CSS grid is pretty easy so a couple of show hands here who has heard of CSS grid who has used CSS grid who has used Flexbox CSS grid is a lot easier than Flexbox but it is something additional to learn and all the examples are going to be using kind of markup similar to this right so when you're laying out your HTML you just basically have your wrapping element your container that has you know your grid laid out and then just a bunch of stuff underneath and at that point you can tell what to do right so the first thing we're going to talk about is we're going to talk about the different CSS properties that you can throw in your grid parent up there I created a a bunch of like code pens that you can screw around with at www.herchel.com and oh man you know what I'm not mirroring my display there we go so you can see there's a bunch of code pen links and stuff like that and you can just start screwing around with stuff like right here and the best way of course to to learn anything is to do it so if you want to start screwing around that's a good place to start so when you're doing CSS grid the first thing that you do is on the parent container you just say display grid it's pretty easy right but like you want to put in some columns right so like say if I have three columns in this grid that's pretty easy I can do this property grid type of columns and 200 pixels three times so at this point I have my parent container knows it's a grid and I know there's three columns in here 200 pixels, 200 pixels and 200 pixels you can start throwing stuff in there it's going to start throwing stuff in that column right now you can do the same with rows so you can do like 200, 200, 200 with rows or you can do auto, auto, auto auto just makes the rows conform to however big the content is so by default right here you're going to have three rows you can also have your grid automatically add rows and stuff which it'll do by default so this will set up so we're changing the syntax a little bit so instead of grid template rows and grid template columns we're going to use this grid template so at this point we have 450px rows 300px columns right so you can imagine how that would look like in a table right there 450px rows 300px columns it's pretty straightforward you can kind of change around the syntax a little bit and you can see in this case we're using the repeat function right here and so at this point you're going to do three 200px columns right pretty straightforward you can also mix and match them right here mix and match yeah mix and match them sure so at this point I have one 300px column and then three 200px columns in that order does that kind of make sense so you're typically going to want some gaps in between your columns and your rows and stuff like that or stuff will be budding right up against each other when you're doing a flexbox you typically use margins or padding or you're justifying stuff in a certain way within CSS grid you can set the gaps to whatever values you want using whatever units you want this is kind of cool because I don't know if anybody ever used grid systems like sucy and stuff like that it was always a real pain in the butt to use pixel based gutters as opposed to percentage based and stuff like that it was tough to mix and match them so this is pretty straightforward obviously the gap between the columns and the rows so looking at this right here we have a min max function we'll talk about this so of course we have the first column is 200 pixels then we have three columns and the three columns is doing this thing which is min max 100 and 200 and what the min max does it sets the minimum and maximum it just makes the column width right there kind of a little bit variable so this will slide in between 100 and 200 pixels depending on the content depending on the width of the container and stuff like that does that kind of make sense? I'm kind of going from like 10 miles an hour to right now we're probably going a good 40 but we're going to get up to probably like 60 or 70 we're talking so the next thing there's a new unit right here called the fr unit so you know how like in CSS you can you can specify stuff through pixels you can specify stuff through m's you can specify stuff through rams I think there's probably a couple others like you have viewport units like vw's which you can percentage of your width of your browser and your height of your browser well now you have fr units and fr stands for fraction so basically what it does is it adds up all of the fr units that are in your row and then it'll divide those so like how can I explain this if there's 5 fr units that means each one is 25% if there's 5 fr units each one's 20% if there's 6 fr units I don't know why that paper down to like 18% or something like that but it automatically handles all that math for you so you don't have to use any type of math and so basically it just makes it one unit but if you have say you know if you have a column and you set this column to 2 fr units you have 2 columns that are each 1 fr unit your 2 fr units is going to take up 50% and each of the 1 fr units are going to be 25% kind of makes sense? understanding that okay I have a couple so yeah so you have auto fill in here so basically what it will do it almost looks like a dpi but it's a hyphen you can see I have this grid up here I have an explicit width I'm setting this container to a width of 1,000 pixels and I'm repeating auto fill so I don't have a value there I'm not repeating 3 200 pixels I'm repeating auto fill the auto fill will fill as many as it can fill in there so at this point I can look at this there are 200 pixels how many times, how many columns are going to go in there in the answer would be 5 so what's kind of cool is you can do auto fill in min max and fr units right? so what this will do is this will take your grid container and it will all the when you set your min max to a pixel based value in fr unit what it will do is it will always take up the full width of your grid container so a lot of times if you're finding your grid you might have like an extra 50 pixels over to the right or 25 pixels and that will make the layout look all funky this will because you're using min max right here and you have it set to fr units this will automatically fill up that remaining space so it will always take up all your columns or rows whatever you're doing there will always take up that full amount and that's pretty cool for layout stuff auto rows and auto columns just basically auto generate the columns I think you can specify you specify the height so this is kind of cool right here masonry layout let's kind of maybe show an example of this let's see if I can get back to chrome so you see right here I have my css grid kind of nice to go up and down I have my grid created right here and I have a number of different little elements in here this one is probably taking up this one's definitely taking up two columns this one's taking up two rows and the thing is when grid changes these out of course it puts these in source order so if I scroll to top up here this one's obviously first in the source order then this then this then this it puts these gaps in here which is normal that's kind of what you would expect and that's what you would want but you can use this property in here called grid autoflow dense see if I can and what it will do is it will change it will kind of allow the browser to push things a little bit out of source order and just make stuff fit so there's like there's some javascript libraries I used to do this with the most common one is called jquery masonry and there's a couple other ones just like packery there's probably like 29 of them javascript jquery libraries so basically like you can lay out cool stuff like this but look at that there's no javascript you know because there's no javascript it stops there really fast to lay out you don't have that flash of onsite content and all that type of stuff it's pretty cool, right? yeah, good so yeah it's pretty neat we're doing pretty good on time but we still have the grid child syntax so we talked about all those items that were on the parent item on that like grid container item but now we have all the items that are on that grid child all the divs that are nested underneath of that right? so at this point we're going to use justify content and aligned items and what we can do is we can align these tracks so like say at this point right here I have a width of 1,000 pixels right? but I only have 300 pixel columns in here so at that point you're going to have like that extra 100 pixels is that 100 pixels going to go at the end at the beginning is it going to be in the middle of 50 pixels on each side by default it's going to be at the end right here but you can say I want to justify all this content to the end and you can say I want to align the items align is vertical right? I want to align the items at the end so let's say in this case I have a width where there's some left over area and height where the rest of the left over area this will move all the columns and rows that you have to find to the bottom right so you can do cool stuff like that so like let's say in this case right here I want to have a particular grid child and I don't want this to I don't want this to go into first column I want it to go into second column for whatever reason it's pretty easy right here grid column start to and you can have it span multiple columns so you can say grid column end span to so if you have so in this case right here we have grid column start to and grid column end span to so what that's going to do obviously it's going to start on the first column and then it's just going to go over to it's going to cover all the gaps and basically work work you can do the same thing right here instead of doing span to you can say grid column end for so at this point it's always going to end on column four instead of spanning to you know in this particular use case it's going to show the exact same thing right here's a little bit of shorthand to four right so you got grid column start in this case column end is going to be four so it's going to do the same thing as up here where it's going to start in the second column voted for and you can use spans in here kind of make sense for child elements yes thank you everybody else can screw off um yeah so we have spanning multiple rows putting it into a multiple row so at this case you can see right here um you see where I say grid column end and I have a negative value right there so if you do grid column start one it's going to start in the first column if you're referencing a negative number it's always going to start from the end so this is pretty cool so at that point what I can do I can do grid column one slash negative one the full row and this is pretty neat because even if you change around your grid tracks your number of columns which you might be doing in a media query for example I got a narrow width you might have six columns and at a wide width you might have twelve columns but for whatever reason you always want this particular div or whatever it is to span the full width grid column one slash negative one instead of like re-declaring span twelve or whatever you're going to do kind of cool yeah I think we already did that one right there so in this case right here we have it we have this item right here starting on the second column and then taking up to taking two columns beyond that so now everything I showed you right there is like what you need to get started this stuff right here gets a little funky and honestly it gets kind of complicated pretty quick so but I want to make sure that you're familiar with it because especially if you're looking at other people's code and you're like what the hell are these square brackets doing in my grid syntax and stuff like that this doesn't make sense so let's kind of talk about what these are so these are called named lines right here when you put these square brackets in here and so like imagine in this case right here we have a grid and it's just one column line right but imagine like as you're separating the columns you have these imaginary lines on each side you know at the very beginning and in between each one and at the very end ten minutes remain thank you sir so these lines you can name them and then refer to them later so in this case right here I have my I have this what am I doing right here grid type of column so I have my content start and content end so I can move these content starts and content ends within the media queries right and so I have my child right here and my child say well always start on content start so what happens right here is no I don't have a media query for the grid child but I'm moving around the content start within the parent grid so this will so that means the grid child will start right on the first column with my default and then for anything above 700 pixels right here it'll start on the second column kind of makes sense it's a little complicated at this point so basically you're naming the lines you can refer to these abstract named lines and then you can change around the position of those lines within your media queries and everything will just kind of follow and work so just remember that's possible if you see someone doing it then you know how to troubleshoot it so it gets a little more complicated that you have what's called named areas so in this case right here so this is kind of cool actually set up my grids by doing stuff like this right here so I'm setting up like a grid I'm using this property called grid template areas I'm a header going two columns I have my sidebar going one column on row two my content over here and then footer going two columns so your browser will look at this type of stuff and we'll see like the strings and everything like that and it'll say alright well this is two columns three rows and since these are exactly the same this is spanning two columns and it'll automatically like figure that type of stuff out right and so at this point you can change the position of these named areas based on your media queries and then what's really cool is you can put your header always in the header right so I can say header will always go into header my sidebar main will always go into content and footer will always go into footer right here I don't have to use media queries up on these child elements I can use all my media queries when defining the grid so like in this case the aside for small widths will always go below the content the aside for these tablet widths will go to the left of the content but below the header and above the footer very for larger widths will take up two rows but only one column and then everything else will flow it's kind of cool a little bit complicated but kind of cool what's the media query where it says why is header next to header like where are they because header is spanning two rows two columns I mean does it make sense so you can see down here we have content also spanning so right here you can see that this is empty I would like I was about to lift it up like this and then I realized that wasn't going to work so if you can see down here there's like a little dot in this space if there's a dot there that means it's an empty area so like say like if I'm defining my stuff like this and I want this grid column in a row to always be empty I put a dot there kind of makes sense grid template short here man this is like something from like a long time ago my slides might be out of order oh yeah so alright this right here is probably the most complicated syntax I've seen so this is valid syntax and you're looking to yourself and you're probably thinking like Mike what the hell is this stuff why would people want to do this and put it into their code it's confusing especially imagine if all this was on like one line if it was like minified put on one line you'd be like what's going on so what we have is we have the named areas to the left over here and these named areas of course are making the head area go full width and then we have like some side one side two regions and then over here we are doing rows and then columns right so in this case we have 10 pixels rows and we have 300 pixels repeat we have four a total of four columns right here we have three 1FR columns and one 300 pixel columns and you can define all those in just grid template and yeah that's something that I would not be doing just because I like my code to be readable but it's just possible so you can you can totally use CSS grid right now it's supported in all the major browsers all the major browsers it is it is not supported of course by internet explorer 11 so if you're still supported internet explorer 11 you have to use fallbacks right but honestly it's not terribly difficult to do that so the most recent project I'm working on I'm finally using CSS grid so it feels pretty good to do that yeah you can see IE 11 IE 11 does support it in a limited way it's of course like a really funky syntax of it and honestly it's kind of worthless do you use do you use flexbox to fall back or do you use something else it depends you know a lot of times like yeah flexbox widths auto margins just whatever normal stuff and honestly that's really about it right there I got three of my slides so this slide right here I googled thank you and took a screenshot and that's what it is anyway questions on all of this since we have about 3 minutes and 10 seconds like Mike what do you think about this yes Kyle what do you think about omni channel blockchain well in the I think it promotes synergy and out of the box thinking for a world where people have thought leadership an answer alright so that's it thank you thank you