 Just finished my slides So today we're going to be talking about Rethinking responsive building techniques using SAS Drupal themes and modules This is basically the one idea that I've been thinking about for the past year If you don't know who I am I'm John Albin Wilkins I'm a core maintainer which is actually quite easy to become all I have to do is submit a patch on Drupal.org like everybody here should and I'm also the maintainer of the Zen theme and people ask me why Zen isn't responsive yet, and I've been doing a lot of sort of Preparatory work in order to have Zen be the best possible base theme for responsive designs And that includes all of these ideas that I'm talking about today Actually probably Zen version 5 will be out I'm hoping within the next month now that I've got all this stuff done, so I'm really excited to get this talk today. This is the slide they told us put in here. I'm not sure why I have to remember not to pace I like to walk around but I don't have a Mike today When you start doing responsive designs One of the first ways that you do it especially with Drupal is to sort of do Region-based layout right you're positioning all of your regions like your your content region your sidebars and stuff and this is an image from Luke Rucklowski's recent article from last week actually and He talked about some patterns that he was seeing in responsive design and you can see that Over here on the right here is sort of the traditional Drupal layout with the content in the middle and then left and right sidebars And then he sees some of the secondary sidebars sort of dropping down and then becoming sort of more traditional single column layout This actually We had a mobile initiative Sprint Just a couple days ago, and one of the things that we got done is we actually made this the pattern that's used in stark for Drupal 8 So you'll be seeing this And this is perfectly fine if what you want to do is region-based layouts, but there's really two problems with this And that's one is that it's boring right? Luke saw this as a pattern because he sees lots and lots of sites doing this exact same way of responsiveness, so You know you can do it and you can build a site really quickly using this technique But it's gonna look like a lot of other designs And the other problem with it is actually it's kind of dangerous especially in Drupal so The issue here is When you think about building a mobile site the content is the most important thing so You put your content in the middle or at the very top of your page Hopefully, and then you think okay in order to make this responsive. I've got to add some blocks Right so that I can have these extra regions so they can move stuff around inside the other regions And this is a way of like basically Filling up the page with extra blocks just so you can make it responsive to be on mobile This is kind of crazy This is not how you build a responsive site, you know just fill it out with Whatever The way that you should be looking at your site is to be thinking about mobile first now Who here has heard about the mobile first technique Fantastic, this is an intermediate session. You should all be raising your hand if not. There's good news because Luke Riebuski is giving a Keynote on Thursday. Excellent. You should be talking about this but when you think about mobile first and designing For the mobile layouts first before you start designing the layouts for the larger screen sizes Really what we're talking here is content first. It's the most important thing on your site That's why your users are here, and that's why it's also users first These are all basically the same thing for the same idea. You should be thinking about your users And I'd just like to say if Luke Luke's talk on Thursday is you know first thing in the morning But you should definitely you know don't drink that much even if you do Drag your butt out of bed even if you only had two hours sleep and go see him. It should be excellent So when we start thinking about Drupal sites Content first What does that mean for Drupal sites? If you're thinking about sort of the traditional region-based layouts Content first it just means that your content region goes first in layout It's not that exciting, but actually you start thinking about Drupal 7 There's a huge opportunity there to really focus on content first And that's because Drupal 7 of course has fields, right? It has very structured content So each of our individual fields Can be part of the layout we don't have to have to move the entire node around as one solid object We can have our fields be part of the layout Field Bay responsive layouts means responsive content if you follow any of the Sort of mobile gurus and their talks they talk about CMS is this big black box where users stick all of their content inside a wissy wig And then you can't actually make it responsive because they've put all these tables and stuff like that That's not true with Drupal if you've built the site correctly You have your structure content and we can access these fields and make them responsive This is this is just really exciting to me A great example of responsive content is actually Palantir.net's website This is the company that I work for and I was I was really Really glad that I was able to work on their site and help make it responsive. There was a team of people designers Themers and it was just a lot of fun and Here's the So here's what does this one page looks like on like a traditional desktop We have sort of main image our main content down here and these are some additional fields And you can see that they're in sort of these other sidebars And this is what it looks like on desktop and Yeah, here's what it's sort of a tablet looks like so you can see the image now spans the entire width and all of the Fields that were here have moved over here and it's in two columns and now this slightly smaller So now our content sort of fills the entire width But actually we have secondary fields which are very narrow So we still stick those in two sidebars and then of course once we get down to the traditional mobile everything's in one column This is fun. This is great. This is exactly what I want to see everybody's website become Because I know that his community will be able to pull off some really stunning Responsive sites using field-based responsive layouts So how do we get there? Let's start with fields Drupal 7 I know you love the field tpl right who loves the field tpl Yeah, most people don't love the field tpl. It's it's great concept with a Really crappily implementation Drupal 7 assumes the worst And basically what it's assuming is a multi value plain text field with a label That's the use case that it built the fee tpl to handle How many people have multi value tech plain text fields there's not that many That's really really an edge case and yet that's the primary That's the reason why we have the field tpl looking the way it is So let's look at it remind ourselves of just how awful this is right So we have this wrapping div where our class field name is a bunch of other classes on here Our label is wrapped in a div and for extra awfulness. There's a colon and a non-breaking space in there Then we have each our individual field wrapped in a div and then all of the values are then wrapped in an additional div And so we end up with like one two three Nesting deeps just to get to the content of the field plus an extra one if you happen to have a label I'll just let you look at that for a little bit so I Started looking at Zen saying okay, how can I fix this and I realized that it couldn't And the reason why is because as a distributed or as a contributed theme as Just something that's ready-made and I hand over to you and let you start using it I have no idea what the semantics are of your site and I can never know at the theme level What is inside your field I? can get a little hint based on the field type whether it is a text or images stuff like that but Most of the semantics no clue. It's not possible so the only way to go about fixing this problem is with the module and to have the site creator specify what the semantics are of each of your fields and That's how the fences module was built We had a pound here on site last year and we had Jen Simmons myself Pat Teglia Nate Stridinger and Greg Leroux worked on building a sort of model for what the fences module should do and how it goes about the easiest way for a site Builder to specify the semantics sort of get out of its ways and then always use those semantics no matter where on the site So And by the way, this is sort of a pun fences are the wrappers around fields. That's how God with a name So as opposed to what Drupal 7 does Fences assumes the norm what you usually do with fields And that's that most of you fields already have markup inside them, right? So you don't need very many wrappers if any at all so there's actually maybe about 30 different TPLs in the fences module, which we'll talk about in a minute, but the basic sort of pattern for those those Template files are this right so our label is inside a header. This makes sense, right? H3 and Then all of our values are inside a single wrapper, which is the element that you specify the HTML 5 element that you've specified So this is a pattern and for if you decide that you want a UL though It's there's an exception here, of course It wraps each of your values in an LI and then each of the values get wrapped in the UL that makes sense But this is our basic pattern for any sort of HTML 5 element Let's look at some screenshots here Traditional managed fields page Let's go and click on edit on one of these things and at the very bottom of sort of the Field settings if you can't remember the label of the this particular field set, but at the bottom there It says wrapper markup This is the only UI that fences module exposes because it's the only UI that it needs In order to let the site builder do what it needs to do You can see here the default is generic container only used as a last resort, right? It is what it is So let's see what happens when we sort of click on that pull-down menu You can see there is a giant list of HTML 5 elements and they are organized by whether the block level lists You know a phrasing type we have you know a div of course Pre the pre code together that means we use two elements to wrap it. This is a sort of common HTML 5 pattern for putting code on inside of fields Menus unordered lists ordered lists Bold italics insertion keyboard mark. I had no idea what you guys might use. I Think most of these are completely crazy ideas But I don't know your use case So I went through the entire HTML 5 spec and picked out all the ones that you could possibly use There's no body tag in here. There's no HTML tag in here But everything that you could possibly use to wrap a piece of content is in this list And I would like to point out actually that the very first thing here is really useful No markup no wrapping HTML at all Your body field for example already has lots of HTML in it. It's got paragraphs and all that stuff You usually don't need a wrapping element around the main body field. So why add one? just like no markup and basically what happens is the the Template file that gets used is still has that h3 if you want to put you know a label on it You wouldn't want to do that for the body obviously, but you could still have h3 and then the label And then it just prints the values with no wrapping at all No classes But this is really useful. Let's look at the bottom of this list here You can see it even has Ruby This is a Japanese and Chinese thing HTML 5 markup in order to show the pronunciation of particular characters Like I said, I put everything in here Then we have sectioning headers address asides section navigation everything This means that as you build the site you add a field and you just pick the markup that you want to use for that field and I would say When in doubt go naked right Use the no wrapper Just have H3 and the values If you figure out that you need a wrapper later, then you go in and choose a wrapper choose the one that makes sense, right? The other nice thing about fences is that it's everywhere and it's automatic like I said The only UI is on the field itself and it automatically it's used for every single view mode because You're specifying the semantics of the field and the semantics of the field don't change Depending on the view mode that you've chosen the way you've decided to display the content the semantics of the field is the same Also works in views. We've added a couple views hooks in there so that if you use Just if you use display modes or view modes with inside views all of this stuff works naturally and basically Anywhere that the field TPL is used in Drupal if any new module comes along and decide Hey, I'm gonna use a field TPL for this particular use case Because it's a field TPL fences will be able to put the semantic wrapper around it The reason why I put this first and the reason why I spent some time on it here is because it's really important that your site is Very lean and Drupal 7's fields are not lean by default So I really feel like getting the right semantic markup lean semantic markup is essential The way this actually works is with the theme hook suggestions How many people here know what theme hook suggestions are Fair amount of you. I'm not gonna go into it But basically there's a page on Drupal.org in the documentation that talks about theme hook suggestions This is how the magic works and basically because they're not standard theme hook suggestions You're able to override the TPL that fences use for a particular use case Let's say you've got You're doing like a carousel on the home page So you've got a special view mode just for that and you need to tweak the markup just a little bit just so the jQuery Hooks into it properly. You can override it and use theme hook suggestions to override it just for that use case fences works as normal the the Your suggestions will override what fences says So yeah, so smart custom markup that you get to define This is this is the way Drupal 7 works. I highly recommend if you don't know what theme hook suggestions are go and learn about them So one other thing I want to talk about fences is that field collection and fences work together really great When you go and add a new field and you have field collection installed you can it's a type of field So I was just saying I'm gonna create a field collection a field collection is basically say I'm gonna take a bunch of fields and sort of Put them together and treat them as one field. So I've created a field collection, which is a grouping of fields on them going to define Because it's a you know a normal fields We can specify the wrapper for the collection and in this case We've chosen figure if you know HTML 5 figure goes around like an image in a caption, right? and so if we go in and go into our structure pages field collections right here it allows you to Look at the field collections that you've created on any type of entity like a node or a user And then you can manage the fields kind of similarly the way that nodes work. You see get a very similar page here This is just for this this Field collection that we just created we're gonna add an image We're gonna add a caption and these are just image and long text fields And again those are normal fields too because they're basically nested fields so you can configure them to use the You know the fig caption for example you would want to use To back too much For the the long text description you would want to use Fig caption element around that and then for the image you actually don't need a wrapper for that You would specify no wrapper and that's sort of the traditional way that you would create a figure using HTML 5 so field collection and Fences go together Really great. I love it. I just looking at the time is to 237. Okay. Yeah So let's look at the layout markup. So we've looked at fields now. Let's start looking at a layout This is one of the most interesting things and I gave a talk in Dribble con London and This was a thing that people had lots and lots of questions about and I only had like one slide on it like Yeah, we just use C tools layouts and people were like what what and they were like huge follow-up questions. So Let's talk about it Custom C tools layouts. This is a documentation for C tools layouts. These are are really powerful You notice that I'm not talking about I'm talking about the chaos tools suite. I'm not talking about panels I'm talking about C tools. There's an important distinction here because C tools layouts The the layouts used to be part of panels, but they got moved to a lower level inside the C tools and Because of that other modules can now use these layouts as well. For example display suite uses C tools So if you create a C tools layout, you can either use it in panels or you can use it in display suite So Step one, it's pretty basic really. We're gonna go through it pretty quickly here, but you should get a good idea of how to do it Add this to your themes info file basically that says and it still says panels even in there even though it's C tools I don't know That's that's the way it is And basically you're specifying the subdirectory of your theme where you're gonna put all of these custom layouts here about to build Okay Really simple, but if you forget that like I was trying to build all these screenshots and I kept I forgot to do step one So I'm like, why isn't this working? I cleared the cache like eight times Don't forget that step two Add these files to your themes. This is the minimal files that you need for a particular layout. You've got inside your layouts directory you create a A another directory which is the sort of machine name of this particular layout And then you have to have that same machine name dot ink Okay And then you'll need to create a TPL and you got to convert any underscores into dashes And then a CSS And some dashes there, right now the dot ink file. That's where you specify Hey, we're gonna use this TPL. Hey, we're gonna use this CSS Here's the regions that I'm gonna add to the TPL I'm not gonna show you the innards of that file just because you can look it up in the docs and it's it's boring slide anyway There's some other things that you can specify you can specify a sort of custom Icon for this layout so that when you're selecting layouts inside the various module C tools or display suite It'll show the custom icon and then you can have separate TPL for the sort of back end versus the front end So this is the back end CSS and the front end CSS Step three edit all files Yeah, that's all I'm gonna show you Look up it on the documentation. You see exactly how to do it And I'm gonna start showing you some of the configuration so we're gonna use display suite To configure our nodes to use a particular custom layout that we just built so you go into structure and Whereas it's oh No, we're already going to structure and then into display suite and then here's where we can specify layout This is what This is what they sort of oh, yeah yeah, we get a pick which we're what we're gonna layout first so we're gonna go down and pick a node and and You're gonna see sort of the traditional fields that you can for a normal view mode we're gonna pick the layout and There's gonna be a pop-down menu shows all of the layouts that are available for C tools or for panels or for display Sleet plus the cut to one you just built so we select that And then suddenly instead of the normal just these are shown or hidden We have regions now, so I've put these particular fields inside these regions on the manage display setting and that's how display suite works as far as putting fields inside of the TPLs and The The contents of your TPL is just sort of very similar to the page TPL right so you've got some some variables that Pronounce the regions that you specify and one of the super nice things about creating custom layouts like this is you can reuse them, right? Because you specified the sort of structure for it You can just take that custom layout you built and use it on a new site, you know and just keep repeating It's it's a really great way to you know reuse your work I realized when I Did the pitch for this session that I put a lot of things in it sort of Overpromised because I've only got an hour. I think I have about eight hours of material But so I decided I'm gonna for front-end performance, which I think is extremely important And that's why I'm not gonna show any slides on it. I'm punting But fortunately right after this Matt Frina is giving an entire hour just about front-end performance So he can talk about it more than I can in two or three slides So do go see Matt Frina's 345 Which is right after the break after this session? so Let's talk about some tangents Responsive images. Yeah, I know I said I wasn't gonna talk about front-end performance But there's a couple of things that you would just lynch me if I didn't talk about so responsive images At Dream of Con London, I said hey, we don't know what to do here So let's all figure it out together and people were throwing like tomatoes. They were not pleased with me You know, they thought I was gonna pull some magic rabbit out of the back pocket Yeah, I Have not written a responsive image module because I'm hoping the community comes up with something and there's good news They've started to right right now I Feel like the best one is the adaptive image module This is based on Matt Wilcox's adaptive images technique, which is is the The best technique that I think will work with Drupal There are several techniques In sort of for doing responsive images in the sort of greater web design Community and none of them are perfect But this is the Matt Wilcox's idea is the one I think would integrate best with Drupal And so we've got somebody who's who's integrating that into a Drupal module and I really feel like that's gonna be That right right now that is the best solution But there are other modules out there for example, Borealis is a new one just popped up like last week as far as first time I saw it. I Don't know anything about it But you can sort of start to evaluate these modules yourself and figure out Because this is going to be constantly changing for the next several months before there's sort of a Winner in the Drupal sphere of which module is best and the best way that you evaluate these is understanding the sort of base problem the the problem space and Jason Grigsby had Has written like a series of three or four blog posts that perfectly describe What is the problem with responsive images if you haven't read these go read them? These are fantastic. I by the way, if you don't have to frantically type the URLs down. I'm gonna post the slides As soon as I finish this session, I'll post the slides up. I Couldn't do it before because I hadn't finished them until yeah, okay, so Read Jason Grigsby's article. It's really good now. Let's talk about natural versus unnatural breakpoints. I See a lot of articles talk about 320 pixels 480 pixels 768 they're using the the dimensions of Devices like the iPad and of iPhone and Sort of the you know, 960 traditional desktop sizes and they're using those as the break break points This is kind of a crazy idea and the reason for that is that You are basing your responsive design on the mobile devices that are available right now And the thing is by the time you finish developing the site There's gonna be some new hot iPad 4 right Whatever it is is gonna come out and it's gonna be right in between the breakpoints that you specified from the previous devices And it's gonna kind of look like crap because you weren't really thinking about that particular space, right? Don't think about device dimensions when you're thinking about what breakpoints to pick Try to feel what your content what your design wants to say about hey This is where you should start changing the layout because I look a little goofy over here, right? This is going funky over here. Now's a good place Now's a good spot to put a break point in so that you can fix those problems, right and a colleague of mine Did a much better what summer's summary of what I was just describing in this blog post on Palantir.net And he had a great illustration So here's a traditional traditional approach with the sort of device size break points and instead of putting your break points right there and having the design sort of in between if If you still want to think of if you still you can't get the device sizes out of your head or you know Your boss wants it to absolutely look good on the iPad instead of putting the break point where the device is put the device right in the middle of This particular design media query and your break points then go You know bound that device size This is a really good approach. I like this And I want to thank think Patrick for for putting that together Really great. Great idea. Oh When I started calling the term sort of natural versus unnatural Natural break points are the break points that are specified by your design by your content unnatural break points Those are the device break points. Don't do break non natural break points gutters This is another tip that actually Patrick gave me Box sizing border box I had missed this in the CSS 3 spec basically this takes the Traditional box model and fixes it so that finally makes sense instead of having the padding and border outside the width You know like okay, I'm gonna put some Content I'm gonna put some padding in my box and that's gonna make my box bigger doesn't happen in the real world, right? so If you have box sizing border box something the padding goes inside the box right your content goes inside the box So the width now specifies The edge of your border to the other edge of your border This has huge implications for a responsive design and That's because percentage-based Border or gutters suck Right, you've got a fluid grid and your all of your sort of columns are based on percentages and The the space that you want to put inside between these columns if they're also percentages They fluctuate so Much based on the viewport with that it just is really painful you end up having your are Wanting to put in a lot of breakpoints just so you can keep the gutter size sort of consistent This fixes that completely Just use box size border and then you can specify your padding in pixels Your or which is your your gutter you can specify the gutter Padding in pixels and then still keep your layout using percentages One last sort of tangent. I want to talk about here is that though. Who are your users? I'm thinking about this on the airplane right here and that You know traditionally when you think about who are your users you start looking at your site statistics, right? and you really need to be aware of statistics and that's because Relying on statistics to tell you who your users are like, you know Oh, I've got you know these smartphones or visiting the site and I've got these desktop browsers visiting the site Relying on that is a bad idea sort of the analogy is basically like building a restaurant and Accidentally drywalling over the women's restroom door and not realizing it and then taking a survey a little while later I'm going hey, there's only men visiting the restaurant Obviously I need to cater just to men. There's those are my users Uh That's the same issue and the reason for this is because a lot of mobile devices don't show up on Google Analytics because Google Analytics relies on some semi Complex JavaScript and they don't work on a lot of mobile devices So you could have a whole bunch of mobile devices Going to your site and not show up and you can also have a whole bunch of mobile sites going to your site And then getting frustrated with how inaccessible your site is there's like hey There's no place for me to go to the bathroom, right? I'm not coming back to this place So don't rely on site statistics But I'm gonna show you some statistics So a lot of people are thinking about iPhone Android devices and the thing is that you don't always realize as that Opera is that browser we love to ignore on the desktop But the company is positioning itself Really really strategically well they have been talking to mobile device creators for about 10 years now and Slowly getting tons and tons of mobile devices using opera mini and you can see that Over the past several years here the number of opera mini users is climbed like 15 million and This number is just gonna keep getting bigger and bigger So if you think hey, I'm gonna check my responsive site on iPhone and Android Make sure you check it on opera mini. That should be the first one you check it on The the good news is that there's some mobile testing things that you can get there's not been mirroring simulator It's available online. There's also opera mini emulator, which is desktop app Which is really cool. I'm gonna show you screens on just second and then of course iPhone at iPad simulators You've seen lots of these Android emulator this thing runs like a Dog that's been shot in the leg. It's awful. It's really slow, but it's the emulator, right? But here's here's opera mini emulator, which is a desktop app Which you can download and you start it up and says okay Which which device do you want to emulate and there's a huge list of mobile devices that they've included out of the box And you select the one you want and I think I did Samsung's Galaxy s1 here and it's showing you What the Samsung Galaxy looks like and you can browse your sites using this and it's a great emulator Even more mobile testing so mobile emulators and simulators This page is kind of crazy. There's like a 120 different emulators you can download or something crazy like that if they're all listed there Have fun but Let's start talking about the thing that I really wanted to talk about which is responsive layout building techniques I Know all of you guys know about your your masters at CSS you can push You can float stuff you can do crazy stuff with CSS but Talking about building techniques There's a difference between having the right tools and knowing how to use them, right? So even though you know the how to float stuff I really feel like there's it's important to start thinking about the way that you do that and Defining the techniques and naming the techniques so that you can go. Hey, I can build it this way Hey, I can build it that way because I know my craft. I'm you know sort of apprenticed And I've learned my craft and I want to talk about building techniques for building responsible signs and the first thing I want to talk about those is is adding classes to your HTML is It's not going to work anymore, right? So you've got 960 blueprint all of these sort of traditional desktop based layout builders And the way that they work is you add some extra classes to the particular Elements and they sort of magically float them and and put positions exactly the way you want inside a grid This doesn't work anymore because you've got a single source with four different layouts on it Which class are you gonna stick on the second element in your page, right? Because it needs four different classes So CSS has really failed us here Tremendously, there's just no way there's no way to fix this in CSS fortunately sass a CSS preprocessor can solve this problem for you and the way that CSS who here Uses CSS preprocessors just whether you're less or sass who here's sort of heard about programming processors No, the general idea good excellent. So Yeah, so so the CSS processor you can you can write some some for example in sass you can write a mix in and apply it to the one class that you have on that element and You can apply different You can use the The same same. Yeah, this sort of the same selector and different media queries And it does a great job with and Zen grids I'm actually giving a buff about this is a compass extension to sass that I wrote that makes it really really easy to apply Layout to a particular element If you've ever looked at Zen's default layout, it's crazy complicated, and I'm sorry. I really am But The sass allows you to abstract that right so you hide all of those crazy negative margin the stuff behind a really easy Abstracted layer where you just see the you know in this case Zen grid item, and then I want to position it in the first column, and I wanted to span Two grid columns. So it says Zen grid item 1 comma 2 like it's really really simple Once you get to learn the syntax, it's much easier to see how your layouts being built Using compass using sass using less than it ever will be if you try to build it using CSS Right now we just finished putting the the the CSS Responsive design on stark. It's really short file It is also really hard to read and figure out what's going on even though It's really simple because it's not abstracted at all. It's raw CSS and You know all of different floats or position resets and it gets complicated very fast and it's hard to Remember where you are just using CSS. I highly recommend if you're doing responsive layouts learn sass So what are some of the building techniques we can use Content first I'm going to present a six or seven different building techniques here and the first one is Content first Hopefully this is this is obvious, right? This is your this is your mobile layout the the mobile first you put your content first and sort of the the main Main main point of the page at the top and any sort of supporting content goes after that right It's essential that you start with this technique because all the other building techniques sort of rely on this semantic ordering of your content The first rule is the first real rule I'm going to talk about is the Jason sibling rule And basically what this means is here so We've got a grid here and we're sort of laying out this is the source ordering This is these numbers represent the source ordering of these particular elements and sort of the natural, you know, we're floating them Using whatever grid technique we was because these techniques don't just apply to Zen grids. They apply to Any technique that that you want to use you can use it you could even use like 960 blueprint or yeah blueprint to do something like this So we're doing a traditional one two three four and then What the adjacent sibling rule says is that each inside a row of grid items? They have to be next to each other in the source order They have to be adjacent siblings in the source order, but within Those adjacent siblings you can actually rearrange stuff right So This second row we put five over here six seven eight. We've rearranged them But as long as they're next to each other in the source order, this is possible right the thing that we can't do is for example Move six up into this row and have it be over here because it's not adjacent to one two three four There's you know five in between it So they're no longer adjacent. This is what adjacent sibling rule means The way that you you can do this with like the Blueprint GS for example if you're familiar with that There's these push and pull classes You could do it that way so like five would be here and then you sort of push it over here And six would be naturally here and you push it over that I don't know which way it is Maybe seven at pole. I don't know but that's how you rearrange it and it's based on the adjacent sibling rule Next is opposing float In this diagram here one two four and five are actually floated left and number three is floated right And this is how we Get a particular grid item to span multiple rows is using opposing flows. So float left float left float this one right and Then clear this one on the left since it's only clearing things floated on the left It will clear both of these elements and ignore this one, which is floated right opposing floats so you're able to Alternate left and right and have items that span multiple rows And you can actually get really complicated and do something like this. So the left. These are floated left still this is floated right This item is It's adjacent to four and it's floated That's a floated. It's oh, yeah, it's floated right But it's clearing left actually I should say four is clearing left one two Four is clearing left. So it clears these two which are floated left. It's also floated left Five is floated right and since it's adjacent to four. It's in that same Row It doesn't need any clearing on it. It's just floated right like number three is and then we can do another clear left here To create a new row and just have that, you know be pushed over to the other side there You can use opposing floats in these very complicated ways to get Really sort of interesting layout techniques that are all based on the previous rules that are selected opposing floats adjacent rules semantic source ordering Let's look at the lasso technique Lasso technique oops, that's the wrong one. I have got the wrong slide up there lasso, I know exactly where this is. Sorry Let's We do it that way. Sorry about this. Okay Lasso technique Basically it's putting a wrapper around a couple of adjacent elements, right? So we've positioned this element and the wrapper and number four Inside our grid and then two and three are just sort of naturally they're sort of nested inside the lasso Right and this allows us to really easily create this more Interesting layout where these two particular pieces of items are sort of stacked on top of each other and the other items are floated and sort of appear to be spanning below this other row Now let's go back to the slides There's a corset variant of the lasso rule right and that basically is okay We're gonna put a wrapper around this and Then no wrapper around this and then wrap around this if you sort of imagine this sort of white box as your viewports you're using the the corset here to Constrict the layout of these elements and then you can see how to have this Breakout in the middle there where suddenly you know You can like you could keep this restricted to some percentage of your viewports and then this have be a hundred percent of your viewport And it creates a really interesting dynamic with white space where these you know like you can put a carousel there or something right? This is using two lassoes around these Around these other elements And because you always have to have exceptions to the rules This is the absolute exception Which is the absolute exception to the adjacent sibling rule if you remember the adjacent sibling rule I said that for everything in a single row they have to be next to each other inside the asian will source The absolute exception is of course that you can use absolute positioning right, but you have to use it in a Very controlled way so one two three four five and we've taken number six and put it over here on the right side And because it's absolute positioned we can't guarantee You know how far is this gonna go I don't know right But you it knowing your content for example here That's a quite a bit of content over here if we just leave space over here We can absolutely position it and put it over there and then We create this way of Make any exception to the rule of What things have to be next to each other inside the row and when you start thinking about all these rules together you realize that The content first mobile first semantic ordering of your content is really essential But there can be a little bit of wiggle room right because there's some fields where They're both sort of equally important They're like some extra feels like the the team members and and maybe the team members on a project for example if you had a product page and and You know how many sodas they drank or something right? It doesn't really matter which order in the semantics. Those are listed per se So you can list them one way in the semantic ordering and as you start to build your layouts if you need to switch those around you still can And just remember all the building techniques that you have one last thing This is the violator This is actually a really simple technique you can break the grid By breaking the grid you've created some Some visual interest right suddenly this number two really pops out because you've aligned it to this sort of half grid space And and this can be a really important technique when you're building grid sites One of the things that I see too often with grid designs is that they absolutely are inside the grid no matter what? It doesn't have to be that way Using the violator you can create some visual interest using for example the grid Zen grids that I've created When you when you specify for example the column that the grid column that you want a particular element to specify instead of just saying You know first column or second column you can say 2.5 internal position it at the second and a half spot in your grid This is a really important technique And I really I hope that you can use these techniques in order to have great Awesome websites, and I want I want everybody to go out and try this out So thank you questions and answers now So if you got a question you can go up to the front here, and of course there's a survey here to fill out and talk about how well I did or how poorly and just go ahead and Fill that out when you get a chance Let's start right here. Okay questions. So I'm just wondering if you want fences to be in core The question is do I want fences in core? Maybe right now a JC is running the HTML 5 initiative. I feel like this technique is Very powerful and also really simple at the UI level. It could be a solution that we look at and build and I'm not opposed to it Next how does Fences differ from the semantic fields module From which module semantic fields semantic fields. So yeah, we did look at some other modules before we built the fences module and Some of them and I can't remember the specifics of semantic fields There's a there's a couple of them that basically the UI is much more complicated than it needs to be you specify The wrapper like it takes the the field TPL from core and just makes each of those wrappers be configurable You don't need every single one of those fields to be configurable, right? You just need to have like one wrapper so that it's giving you a UI for three wrappers and you have to type in exactly what you want and You know with with fences it gives you the exact HMO 5 lists You can you can learn about new elements by looking through that list, right? And you pick what you want. It's really simple UI and also some of them actually are applying the semantics at the Display mode or the view mode So you actually have to reconfigure it for every single view mode that you create Fences adds the configuration inside the field You know editing settings itself so it's used for every single view mode. So that's the differences next Can you go over the? Natural versus unnatural device breakpoint thing one more time. It's both those seem to me the same side So unnatural break breakpoints are device breakpoints because you shouldn't be thinking about your site in terms of devices you should be thinking about your site in terms of content and your design your design has sort of Natural breakpoints that it wants you to find and it's begging you to find them, right? So that's the differences don't think about the devices think about what your design is telling you Just to piggyback on that a little bit on unnatural versus natural breakpoints I we've come up a lot of cases where they we want to want to serve different content or change the markup based on I don't want to say the device, but I guess it would be smaller devices seeing different markup What is the best practice for that currently? so In the Drupal 8 and mobile initiative We're making sure that Drupal it can support all of the different ways of building stuff actually Luke Luke Robluski talks about res which is responsive design plus server side components And basically is you start with a responsive design And then you you if there is certain device criteria You sort of you don't look at the device itself you look at the properties of the device right and Based on those sort of different properties you can tweak the markup just slightly using server side components This is possible with Drupal, but you have to It's a very advanced technique because Drupal caches this pages per anonymous user There's also proxy caching. So there's a lot of caching involved. You have to be very careful. You can write it a custom cache Methodology for Drupal that overrides the default caching method that allows you to have you know One set of markup that gets cached for these device Properties and another set for different properties. That's the Theoretical way best way to do it. It's very advanced First off, thank you for all your work on Zen and the work you continue to do. Thank you. You're welcome I was curious as your opinion is between sass less and other CSS preprocessors Why'd you pick sass over the others? the reason why I picked sass over less for example was Because of the project maturity really sass has been around a lot longer Yes Less did come in and sort of kick sass in the pants and say hey look this syntax is a lot better and sass said, okay You're right. So it created this new CSS SCSS syntax within sass which is now the default syntax by the way so the syntax is very similar between sass and less but Within if you choose sass there is this extra project called compass compasses kind of like It does two things one is that it's a library of Pre-configured mix ins so there's a bunch of mix ins for like CSS 3 so you you never have to write a Vendor prefix again because you just use this one mix in for you know box sizing for example and it just writes It compiles to the CSS that includes all of the different vendor prefix that you happen to need for that Property so you don't have to research. Okay, which device prefix is we need you know This whole blow-up that we had about a month ago about vendor prefix and whether they're good or bad within the you know Web development community that's it's a non issue for sass developer because we just write a mix in and it does all that Stuff for us and it includes opera which is you know and it doesn't just do safari prefixes or web kit prefixes It does all the prefixes So it's a maturity of compass that made me pick sass over less Plus I just think it's completely insane that they added this whole JavaScript thing where you can do Less compilation from within the browser like why would you I know it's just for the development But it it really slows down in side performance and makes it things kind of wonky so anyway You're you're using sass for Different class names for different viewports. Would it also be possible to use media queries for that purpose? I'm not quite sure if I understand the the I'm using sass I'm using sat so basically what sass does it doesn't create class names it it adds in groups of properties, right so You can use a sass mix in on a particular selector and that could be inside a media query just fine and Actually, if you use sass there's an interesting technique where you can actually put a media query inside the sort of nested rules of sass This is a slightly advanced technique in sass, but basically it's smart enough to know okay I just put this media query deeply or you know nested inside this I'm going to pull it out to the top like CSS Requires it to be and then it rewrites the CSS appropriately. So did that answer your question? Okay, great What would you recommend for handling Basically bigger navigation structures and hierarchical navigation structures on like a small screen because I've seen like To in order to avoid a lot of duplicate markup and display none. It seems like you have to use JavaScript almost Yeah So the question was What what techniques can you use to avoid having duplicate markup in order to have different types of Navigation based on mobile or your desktop, right? Yeah I Feel like You can combine the absolute exception rule with your you know Semantic with your semantic ordering in order to achieve something that works relatively well For example, you you put your content first and then the navigation directly after it in the source order. So inside mobile It's sort of we can have like a link at the very top This is go to navigation and to scroll right right down to the navigation which is right after your content, right? Because those are the two most important things on your site the actual content and then some navigation to get to the other place That's one way you can handle Mobile navigation and then on the desktop side you can use absolute positioning and pop that up to the very top Works That's one way. There are other ways, but that's what I like I guess kind of a follow-up to that is I recently did a Zen could you speak up just a little bit? Sorry. I recently did a zen based responsive design Trying to have absolutely no fixed with anything in it And the main thing that I ran into was navigation coming last source order and ever putting it up at the top So not just moving columns with negative margins, but putting it way up at the top and end up having to do Java script on the desktop so desktops bore the burden, but to actually to move the source order how does Zen grids deal with that or what would be your idea of a best practice to do that? well Zen grids for example doesn't actually have a mix in for the absolute exception because it's It just doesn't have one. It's it's it's a grid-based system It has the the violator because it's part of the grid But the absolute is basically you you're making room somewhere to absolute precision something It's not complicated CSS to do that. So there's not a mix and provide it to do that And you're absolutely right you need to avoid fixed size Anything inside of responsive design because as you do different sizes You know those those fixed-sized ads for example that are sitting over there in the sidebar are going to screw things up So you should really try to avoid Fix sizes at all possible Without the absolute I mean without knowing what the height of anything is yeah positioning to the you know absolute positioning to the top Falls apart. Yeah Yeah Yeah, if you're not sure exactly how tall your header is going to be you do need to use some JavaScript because you can't you don't Don't necessarily know The best you can do is use like position Relative on a wrapper that happens to be below the variable Variableness of your header area and then you can sort of pop it to you know top zero It's tricky Hi, I work for a large organization that's Dozens and in some cases hundreds of sites with the Zen theme is the basis for the look and And there's a big push for the responsive design and and some of them want to switch to another theme What can I go back and tell them? Because I really want to stay with Zen. What can I tell them and say hey, I want to stay with Zen I think that I Promise I will release at least an alpha version of Zen of Zen 5 by the end of the weekend at the latest so People are you know, there's like a long thread on groups died your ball or grow about what's the best responsive base theme to use and Like nobody's picking Zen because Zen 3 just it isn't responsive. It's fixed with right? So they don't even know they're not looking at the desk dev version yet So once we have sort of an official release out there It's some suddenly something you can sort of look at we're I'm really close I know there are a bunch of people who are helping out too, but we're really close to like having it already and and like I said the reason why it's taken so long is because I Made the fences module because I couldn't do fields inside Zen I I started adding sass because I realized that the layout structures sucked Zen grids in order to make Building the layouts really easy because the CSS for doing layouts. It's complicated and was responsive layouts. You have Multiple more complicated CSS, so I wanted something even simpler So I went down all these sort of tangents in order to get those fixed in order to have a really easy Zen release that's responsive We the thing that I did last week was adding normalized Porting that over to sass and then making a Drupal port of the sass port or actually a compass port I made and then I did a Zen a Drupal port of the compass port and now I've added that and to I've carried like four different projects just to get to the place We need to be for Zen and there's so much awesomeness in the fifth version. I'm really excited about it I'm gonna have a buff about the the Zen grid sass mixes, but you can also ask me questions about Zen 5 as well That's at five o'clock today in one of the buff rooms. So I've been told to wrap it up here So thank you very much. I really appreciate it