 My name is John Ferris. I'm the lead front-end developer at Atten Design Group, based out of Denver, Colorado, in the States. Atten is a design, development, and strategy shop helping organizations like these create positive change throughout the world. Today I want to talk to you about problems. I'll save you all from having to raise your hands and I'm just going to assume that most of you in here are either a designer, a developer, or an engineer. And you chose that path because deep down you like solving problems. If you see something in this world that's broken and you want to fix it, you want to make it better. And we end up having to solve a lot of the same problems over and over. And we end up using common solutions to those problems which you end up with are design patterns. Design patterns are just common solutions to reoccurring problems within a given context. So to give you an example of that, one of the reoccurring problems I deal with on a day-to-day basis, usually multiple times a day, I imagine you guys do too. Probably dealing with it right now is that I get hungry. And when I get hungry, I can sometimes turn into a jerk. I might start screwing up putting typos in my commit messages, just being snippy with my coworkers. So stuff like this can happen. And one of the common solutions that I use quite often to solve the hungry problem is tacos. Tacos are incredibly flexible, very reusable. You can make them in different ways. You just need, you know, flour or corn tortilla. You can use beef or chicken, ground beef, shredded beef, dried beef, fish, shrimp, all kinds of different things. You can create the taco pattern with all kinds of different iterations. You can even make it with ice cream. But tacos aren't always going to solve your hungry problem. Context is important. So for one, you have to like tacos. If you don't like tacos, then tacos probably aren't going to be the right solution for you. You have to be able to get them. My wife and I lived in Australia last year, and it was really hard to find Mexican food in Australia. So we ended up solving our hungry problem with the curry pattern or the meat pie pattern. We had to use different solutions to fix the problem at the time. But today we're going to talk about layouts. And just so we're all on the same page of what a layout is, layouts kind of create the structure of your page. So these are the containers on your page that you would put like your design components. Later on, I think today, John Albin is going to be talking about design components. What he's talking about in that session, that's the stuff that goes into your layout. So layouts hold the content. These components within your layout can have layouts themselves, so it's all recursive. It's all controlled or it's dictated by the HTML. So the order in which your HTML is written and what's nested and what's next to each other, that all affects layout and it's important. And then you kind of control that layout with the subset of CSS properties. So you have like your flow properties, like display and flex and float. You have your positioning properties. So top right, left bottom. And then you have your box sizing properties to actually size your containers. So the properties that affect that, like padding and margin and width. So this is an example of a site with a fairly complex layout. This is a site we did earlier this year for Colorado Public Radio. And there's a lot of layout problems to solve here. If we look at it without those properties we just talked about, we end up with this. And we have some background colors and font sizes and font colors, but it looks like a jumbled mess. The layout's important. So how do we get from this back to this? It can be overwhelming to look at an entire site like this and figure out how you're going to rearrange things and structure things. So it's helpful to kind of break it down. We have kind of this basic problem on this page. We have main content on the left and another column or sidebar, whatever you want to call it, on the right. And it's a pretty simple problem to solve, much easier than the rest of it. But if we look at other details in the site, that same two-column pattern shows up over and over. So we have the main menu at the top is a left column to the social menu on the right. A featured area split into two columns with thumbnails on the right and the main featured article on the left. And we have other featured news items at the bottom. And like I said earlier, they're recursive. So even inside the left column, inside the left column or inside the right column, you have those thumbnails there, again, broken out to two columns. So if we can come up with a common solution to solve this two-column column problem, then it'll work throughout and we save ourselves a lot of work and we can basically create this layout very efficiently. So let's look at some actual patterns. So I want to start off real simple. As first pattern I call constrained element. Give an element a defined width to prevent it from expanding too wide. It doesn't get much simpler than that. So let's look at an example. We have this really wide column of text. The measure here is a little too wide to make it readable. And if we want to kind of constrain that, we just put a width on it and shrink it down. Now it's a little bit more legible. So that's simple, but we can take that one pattern, apply it to a class, and just call it L-dash-constrained. That's just one of the naming conventions we use. And all this has is, you know, at a certain break point, it's got a width set on it or it just has a max width. And we could take that one class and apply it to all these rows of content to make sure that everything is aligned and doesn't bleed out until the actual edge. So that's simple. Use it all over the place. The next one that's related to that is rows of relevant content. So divide the screen into rows of relevant content such that the hierarchy and content relationships are preserved across different screen sizes. So looking at that same site, we have on the left here, we have these rows of content that are all related to each other. We don't have a long sidebar running down the side. And that's helpful when we get down to this mobile layout that everything that's related on the large screen is still related. The proximity is preserved and it all still makes sense. So another example of that is one of the sub-sites for that Colorado public radio site we just looked at. Here we had an issue where the actual desktop design called for this kind of continuous sidebar down the side. But at the top of that sidebar we have ads and ads are really important to this site because that's where they get a lot of their revenue to actually run the radio station. And nobody buying ads wants to buy an ad that's shoved down to the bottom. So when we were designing this for tablets or a mobile view we needed to make sure that that ad was still relatively close to the top. So what we ended up doing is breaking that sidebar up into essentially two sidebars and that way when it reflowed for tablet and mobile layouts we could kind of keep that ad up towards the top. So now I want to talk about the layout modifiers pattern. To follow a naming convention for classes intended to modify layout. So here's an example of just some markup where you have one container and three kind of sections within it and call those primary, secondary, and tertiary. I try to name these with a sort of a vague, reusable class so that no matter what modifier class we give it, the one at the top, like L-dash modifier those subclasses of primary, secondary, and tertiary will still make sense. And I want to point out that we're using the two dashes the sort of smack style. The two dashes for the modifier class and the one dash for that subcomponent we treat these sub elements of the layout as if they were subcomponents. So it's just what the markup would look like and then we can add a class so L-dash3-column so a three column layout. The actual CSS below this is just shorthand. I'm using, in this instance, it's SUSE so a grid framework that we'll talk a little bit more about later. We're just saying basically for each of those columns assuming that's a 12 column grid make them each four columns wide and place them at even intervals across. So sidebars after just adjust a little bit so we have the sidebars coming after the main content area. Sidebars before just flip those and then triptych where we have the sidebars running down the side. So all these are using the same HTML structure for the layout itself but just by switching out that one class we can apply a different CSS to actually create these different layouts which is really handy when you're actually developing. Component layouts this is the exact same thing just with a slightly different naming convention often find that when you're creating layouts for specific components like a node teaser or something like that that the actual layout within it can be very specific to that component and it doesn't really make it very reusable so I just use a slightly modified naming convention for those. I do want to point out the direct child selector that I guess would be a greater than or carrot symbol. Now that's specifying that only apply this style to like the article figure if it's a direct descendant of article teaser. This is less important on the component layouts but if we go back to say where we have primary secondary tertiary we're using these kind of vague naming conventions that we can actually do that recursive nesting of layouts inside layouts and because we're using this direct descendant selector those styles aren't going to bleed into say you have a primary class further down. So that's very helpful. Browser support on it is really good so you can definitely use it. Next pattern is called gutter pull so position an item by pulling it into the gutter established by its parent container. So this is just an example of maybe an article with a block quote in it and we want to pull that block quote off to the side to kind of highlight it a little bit. So we take that quote we float it left and give it a defined width and that allows that text to wrap around and then using the gutter pull pattern we just apply negative margin or negative left margin to that quote and that'll pull it into the gutter and the rest of the content will follow it. So that can be helpful in certain cases. Another example of where that's helpful is say we have a book listing and our markup looks similar to what we were just looking at. We have this book teaser container or layout and the book cover, book title, authors and summary and all those are kind of running together they're all siblings of each other what we want to do is have that book cover pulled off to the side and let everything wrap around it. So on the container we have some left padding to kind of create this gutter and then we take the book cover and we float it left and then add that negative margin to pull it into the gutter. So now we have this two column layout that we were looking at earlier nice thing about this is we don't have to wrap extra dibs around stuff if we resize this we can keep that left column fixed if we don't want to resize the image and all this text will keep flowing straight down and kind of preserve that grid structure that's not going to wrap around the book cover if the text gets long so it's very helpful. Margin overflow is another way we can exploit the kind of negative margin properties so allow an element to overflow its container by applying negative margins to both the left and right sides. So here's an example of a common block we have a block title and some block content so you've probably seen this mark up a lot if you do a lot of Drupal work and then applying negative margins to either side of the title we can actually have that title expand out beyond the edges of that container so that works for creating some fancy block titles another place that that pattern can be applied is say we have three columns and each one of those is just defined by setting the width to 33.33% floating them left and then adding padding to each one so it's very simple to create this three column layout but there's a problem there in that the actual edges of the text aren't lining up with our grid like these are pushed in so using the margin overflow we'll just set a negative margin or whatever the padding size is to kind of expand that container out beyond its parent and that lines everything up so there's other ways to tackle this using like nth child or whatever so it kind of depends on the context that you would use it if you have to support older browsers that don't support like the nth child selector you'll need to do something like this to get things to line up this one's kind of fun in terms of ratios when the aspect ratio of an element is known but the target size is not you use padding in absolute positioning to preserve the aspect ratio of an element so a good example of this is like a YouTube video which are normally added to a page with an iframe and I'm sure if anyone has done responsive sites where you have video or embedded media like that these can be painful so you can't do the max width 100% like you can with an image the browser doesn't know what the aspect ratio of an iframe is like it does with an image so what you have to do is actually oh, here's an example of it going wrong this is just using the max width so in order to fix this we take the parent container and we add top padding to it which is the ratio like the actual aspect ratio of the YouTube video or whatever that we're embedding and this is due to the fact that when you define top and bottom padding as a percentage it's actually a percentage of the width of the element not a percentage of the height so we're essentially creating this padding area along the top that is the aspect ratio of the video that we want so we just take the video itself we absolute position that at the top and then give it a height and width of 100% and then if our container expands or contracts then so does our video so there's libraries out there like FitVids that handles this for you it's pretty much the CSS that it uses I think the only advantage to using that is it'll actually calculate what that aspect ratio is if you don't happen to know it ahead of time like I know that all the YouTube videos that we're embedding on a site are going to be the same ratio so I don't necessarily need to use that library but if you're using Vimeo and you have just varied width things you might need to look at FitVids so now I want to talk about grids and the overall grid system pattern is divide the screen into a series of vertical columns to facilitate the organization and alignment of components so just give an example of this is a grid overlaying the Indianapolis Museum of Art Sites you just see that we're aligning all this content along the grid to keep things kind of ordered and clean I'm not going to get into why you should use grids I think they're a good idea there's great books out there that go way more in-depth about the value of grids and how to design them Ordering Disorder by Coy Van and Designing for the Web and Mark Bolton I highly recommend both of those but I want to talk about the actual patterns that you would use to implement grids on a site so you have a guttered grid so for each grid unit and grid system include a gutter to help space content if you dealt with grids before like 960 grid you've seen this a lot this is how we do a lot of grids so this is just a simple 12 column 12 column grid on Drupal.org so we have these columns and they're set gutters in between that help space the content so another option you have is a gutterless grid and this is how we've been designing sites for the last 8 months or so so you exclude gutters from the grid unit instead use empty columns as the gutters themselves so with this Colorado Public Radio site we just got rid of the grids altogether and did 24 columns and we actually use some of the columns themselves as the gutter I find this is a front end developer much easier to work with because you're not having to deal with some of those nested padding issues that you often get with a grid system and gutters in this particular case we used a 24 column grid now we often use a 23 column grid and that actually works out for using columns for the gutters if you have a 23 column grid and you want to do a two column layout you can have 11 columns on one side 11 columns on the other side and then one column down the middle it works for 3 columns 4 columns they could even work for 5 columns but as a front end developer much easier to work with and our designers are enjoying it as well so symmetric grid constructed grid from equal width grid units again the same thing what we're showing here is that each of these columns are the exact same width all the way across back to that Drupal.org example it's made of 12 equal columns so another option we have is the asymmetric grid so construct a grid from varied width grid units designed for the content so this is where we're actually designing a specific grid layout based on the actual content of your site so this is an example from a blog post that Mark Bolton did of like an e-commerce site that's selling t-shirts and the grid is constructed around this photo of the t-shirt and the actual information going down the side the colors on the edge so this grid is very specific to the content the math involved with doing this kind of made these to say impossible but a little too tedious to implement in the past but now with preprocessors like SAS unless this is far more doable and actually pretty easy I think it's just a matter of when you're actually designing the site at the beginning that's a decision you have to make at that point and kind of adopt a grid then as opposed to just starting off with a 23 column grid or a 16 or 12 column grid so one way to implement a grid system is with the class based grid system so align elements to the grid by applying a system of predefined classes to markup so a lot of you will probably recognize this this is the foundation grid framework and this grid framework is created by actually having these sets of predefined classes like large two or large three columns, large nine columns those all have CSS properties applied to them and you actually work with this and develop this grid by applying these classes to your markup this is really good for prototyping things quickly it's good in situations where you have like complete or a lot of control over the markup especially in your layouts which isn't always the case in Drupal it's getting better but sometimes there are things that are just hard to actually apply this class to that you need to make this grid system work so here's an example what that markup might look like one of the earlier problems with this approach and responsive design is you would give something a class like I think bootstrap used to use like span eight and that when you when that class is applied at different screen sizes you know you might not always want that to be eight columns you know at a smaller screen size you might want it to be a full twelve columns so there were some issues with like the semantic nature of that of like you know I declared this to be eight columns but I don't want any columns here so the way that a lot of grid systems are addressing that now is by using these prefixes for like small to large four so in this case small two means this should be two columns on a mobile layout and four columns on a larger screen another approach to that is the semantic grid system so align elements to the grid by applying layout properties to selectors using a grid framework so here we're not actually we don't have a set of pre-defined classes that we're using we're able to apply the CSS and all the math involved with it using grid framework in a preprocessor so these three examples here are all the exact same the same layouts defined in three different grid frameworks or SAS based grid frameworks are Singularity Suzy and Zengrids now all these pretty much do the exact same thing as far as the final output just the syntax is a little bit different in the actual underlying math and obviously the underlying features that come with the grid system are different so essentially these are just saying for the primary elements make it eight columns wide starting at the first column for the secondary element make it four columns wide starting at the ninth column of a 12 column grid so behind the scenes like how those are actually implemented in CSS one common way is using float layout pattern so create columns by floating a series of elements with defined widths so we already saw this earlier we have primary secondary tertiary containers and we want to create say three columns with that we just give each of those 33% width and then we float them left and we have three columns so a lot of grid frameworks were implemented this way this works really well if you don't know how many elements that you're going to have so say you have a view showing like profile teasers of all your staff members and you don't know if there's going to be nine or 11 or 24 staff members by using this type of layout you can apply that and they'll just kind of flow around into multiple rows of content works really well in those situations adding padding to each of those here we're using box sizing border box which if we add padding to the element it's not going to affect the overall width of it so we can add padding and it's not going to change the fact that it's 33% wide by default browsers use border box content box and that would actually if we added padding to something that would actually make the box larger and it would cause that last one to wrap around so here we're doing the same thing we just changed the width to 50% to create two columns so an alternative to that is isolation layout so given a series of floated elements give each a negative trailing margin in order to reset the orientation of the following element I think this is much better much easier to describe with an example so here we have that exact same layout everything's lined up three columns across and using the isolation method we'll actually give a negative right margin of 33% to all these elements and what that does is it kind of collapse the space that that occupied and sort of overlays everything and what you get is kind of a set orientation on your elements so that you can then with left margin be able to position those across the row anywhere you want this is really good for if you have a complex grid system that you can position these things isolating them from their surrounding elements so it gives you a lot of flexibility in where these items are placed you can change the order of things it works for if you're implementing a site with the right to left language and you can by messing with or playing with the settings for clearing you can actually have say we have this primary container we have secondary container that's taking up the right hand column and it can flow down as far as it wants because it's floated right and then third container tertiary is only clearing left so it clears that first item but it doesn't clear the second one can get as long as it needs and the third one will just kind of bump up underneath it as soon as we clear right with an element that's going to clear the secondary column so if you're looking at grid systems it's good to have one that actually allows you to control the direction of which way you're floating because it gives you this flexibility this is how we did that earlier example with ad on the colorado public radio site being able to take that column down the sidebar and still have the other content that comes after the ads float up underneath it so I'll talk a little bit about how you apply these to Drupal none of what we've talked about so far is Drupal specific, it's all CSS so as long as you can apply CSS to the right places in Drupal then you're golden and can use it but where do you do that a lot of times we do this in template files so we usually have a page template file is a good example because that's where all your main content regions are on the site so applying these classes directly to page templates and creating alternative page templates for different layouts that works really well as these things are recursive if you have to do layout on an individual node adding these classes directly to node templates works really well and then on the user side user profiles when you do this you can often end up with a lot of template files so one great way to share these common layouts across different template files is using theme hook suggestions so in Drupal 7 you have to do this in pre-process so you just tell Drupal sorry, I'm going to back up a little bit so this is an example of say if you need to override the front page template in Drupal you do that with page in front if you want to override the article content type in Drupal you want to override that node template use node-article those are theme hook suggestions that are already built into Drupal you can add as many theme hook suggestions as you want and you do that through pre-process so these are just little snippets, this is in a full example but we would have this variables array that we pre-processed for the node or page template and we can based on whatever logic whatever PHP logic we have on the server side with the page you can do it based on the path of your page if someone is logged in or not with the node you can do it based on view mode or content type these theme hook suggestions so it would be like page underscore underscore sidebars after is a good example one that we use a lot or node underscore underscore teaser if you are doing like a component layout and then this is just a way to allow a lot of different content on the site reuse those same templates and it keeps your templates nice and maintainable another great way for creating layouts is using C tools layouts there is a few modules and a couple of themes out there that actually use C tools layouts panels and display suites both use C tools layouts omega 4x I believe I haven't actually used it but I believe it uses C tools layouts and a C tools layout what it allows you to do is actually define a layout for your site with specific regions and a specific CSS file for it and a specific markup so if you have if you are creating regions the normal way in Drupal you do it by adding them to your .info file and your theme and basically that means that you have this one super set of regions that no matter what page you are on or what layout you are using those are the regions you have available to you C tools layouts allow you to define those regions for each specific layout which is really nice you don't end up with all these regions called above content or above below content or sidebar first, last all these weird regions that you need to kind of shim into whatever you are actually creating a layout for so creating your own C tools layouts you need a .info that actually defines those regions for you and what the layout is called and what not you don't necessarily need a thumbnail but you create a thumbnail so that when you are selecting a layout your content administrator is selecting a layout in the Drupal admin UI they can actually get a preview of what that layout is supposed to look like the actual CSS to create the layout and then the actual template file, the markup for your layout here is just an example of the .ink file it has the title, the category that is where it is going to show up in the admin UI the icon is the thumbnail the theme is the you are actually creating a theme hook in Drupal so this is going to be whatever you put the string you put in your theme variable or property key whatever it is for an array that is going to be the base name for your template file so in this case our template file is going to be sidebar-after .tpl that PHP and then an array of the actual regions that you can put content in here is an example of what this layout would look like pretty simple template file, I apologize the syntax highlighting in this thinks that the opening PHP tag is actually a comment so don't copy and paste this into your your file but this is just simple template file it is addressing the actual markup of our layout and then the actual CSS so in this case usually our layouts are going to be more much more complex than this but this gives you an idea so this CSS is actually going to be loaded dynamically on any page that is using this layout you can also define the admin CSS which is the CSS that is going to be used when this layout is previewed say in the panels UI so you can load separate maybe a smaller CSS file that doesn't collide with like your 7 admin theme or whatever you can load separate CSS files into the admin UI so I want to talk a little bit more about design patterns and where you can actually find them some examples of them so uipatterns.com is a great example of actually defining patterns this pattern this pattern library is actually pretty dated right now which is unfortunate because it is really good about actually giving good concrete examples giving reasons why you would actually use a pattern and the actual context that it applies to so if you are just looking for general information about design patterns this is a good place to go to for examples Luke Robluski wrote multi device layout patterns which is just a quick rundown of some general solutions for creating layouts for responsive sites Brad Frost has responsive navigation patterns these are patterns that are specific to the actual problem of how you do like mini structures or nested mini structures complex menus on mobile devices so that is definitely good he also has just a general I think it is called thisisresponsive.com which is just general patterns for responsive design and where a lot of people have heard of design patterns in the past was actually a book that came out in the 90s about object oriented programming called design patterns it is also known as the gough book or the gang of four and this is applying design patterns to actual object oriented programming which is pretty interesting to read the actual thing is that this is still very relevant today as you know it was written back in the early 90s but the idea of design patterns did not come from graphic design or web design or computer science it actually came from architecture so an architect named Christopher Alexander back in the 70s while he was a professor at UC Berkeley put forth this theory called the timeless way of building it was all about designing buildings not by their actual form but by the human interactions that they are designed to to facilitate he followed that up with a pattern language which is 253 different architectural patterns that him and his colleagues documented based on observations from like some of the most timeless and beautiful places around the world and these patterns don't just talk about architecture in terms of individual buildings they work on a much larger scale so like how how to design like a whole region and within that like cities and how do you relate cities to other cities and inside of that like neighborhoods recursively just like the layouts we were looking at all the way down to the actual building how do you design the entryway what's the built-in furniture and what are the things that you hang on the wall so it was very vast and these patterns allowed just the layman someone who wasn't necessarily trained in architecture to actually design the buildings that they lived in just by applying these specific patterns to their specific design problem or architectural problem so to give you an example of that pattern number 241 is called seat spots it says choosing good spots for outdoor seats is far more important than building fancy benches indeed if the spot is right the most simple kind of seat is perfect and cool climates choose them to face the sun and be protected from the wind and hot climates put them in the shade open to summer breezes in both cases place them to face activities this brings up an important point that design patterns are not designed they actually wrote this pattern based on going out and doing research and the students went out on the campus and they actually observed all these different park benches around the campus where people were sitting which benches were full of people which one sat empty and then they wrote that down it wasn't necessarily somebody just saying yeah I think I think good seats have cushions and then boom that's our pattern they actually did it by observing things that worked to try something and then the things that worked they actually get documented so design patterns are observed it's very important distinction you can't just go out and design a design pattern so what does that mean for us as developers and designers so start looking for patterns in your own work and you're solving a lot of these problems over and over again like just try to take note of what are the solutions that you're using you know be mindful of field good code and what I mean by field good code is the stuff that you know you're writing it and it just like it clicks you know it's going to work it's tested across different browsers you know which situations it's going to work in it doesn't matter in terms of layout like how long content is going to get the layout still going to be preserved it's not going to break down and then figure out what you need to do to make that repeatable like try to abstract the actual solution from the specific problem that you're addressing to make it work in different contexts and also define like what are those contexts in which this pattern doesn't work like we looked at the you know the float grid pattern and there's places that that doesn't work well the isolation pattern isn't going to work for something where you have a whole bunch of unknowns like how many elements you can't go in and actually say for all 24 elements I want this in the second column or third column so it's all about like finding which solutions work when and then share it with others and that's what I'm doing today so thank you this is just a link to the actual session if you want to mind leaving some comments let me know how it was if you learned anything and we do have time for questions so if anyone has any questions there's a microphone in the middle anyone? no? my favorite pattern depends on the context yeah I mean I think that the gutter pull one of being able to like the example of the book teaser being able to pull one element out of a bunch of elements without having to actually define the layout and all those other elements that one like when I figured that one out and realized that it worked everywhere like it was a good day yes would you mind stepping up to the mic so I was being recorded I'm just starting to work with design patterns to learn and to have a feel for them and I was also questioning myself how come it can be a pattern to be implemented while doing test-driven development starting from a test where you're starting from the solution kind of and you have to figure out which pattern fits the needs for my code are you asking how to choose the pattern? yes, something like that yeah I think it's defining the context of what I guess which pattern it's going to work in which will be the blueprints regarding which the developer could decide on the correct pattern of kind of should be implemented I'm not sure if I have an answer to that sorry I may not actually understand the question could be the problem well, sorry sorry I was wondering it's more of a UX question for people creating content than a layout or design question but when you use C-tools layouts what do you guys use so that content creators can pick a layout do you guys end up using context or panels how do you integrate like layout control with content creation and I know it's not quite the topic of your talk but you guys do this a lot so so, panels we have used DisplaySuite quite a bit in the past and just about all of those cases the particular clients that we were working with didn't want to even mess with that they didn't want to need to get in and actually change that layout but the same admin UI that we were using was available to them panels is something that we've let or we've had clients actually use and panels has a nice interface for actually choosing the layouts I think creating those thumbnails is extremely important I've actually created just a Photoshop template for creating those thumbnails real quick so for each custom layout we do, we create a thumbnail based on the desktop version of the site and I think that's pretty clear if, well it's clear in the context of the panel's interface is clear and easy to use which it isn't do you guys use IPE like the front end editor for panels the inline editor and then let people mess with that or do the content creators go through the panel's back end and then pick a layout and then kind of mock it up somehow the panel's back end so my issues with IPE is that in order for that to work it needs to add additional markup which, in a lot of cases will break the responsive layout your descendants selectors suddenly explode so no we haven't and I think it's a tricky issue because um responsive layouts they're complex I don't think there's any way around that and when you start adding additional markup and CSS to handle like this whizzy wig editor on top of creating layouts I think, yeah that's a tough nut to crack could you give an example of where things might have gone wrong or if you've realized midway through a project that perhaps you would like to have implemented things differently would you go back and kind of reimplement those things or do you just kind of put that to one side and say right we'll do it better next time yeah so naming things is always hard that primary secondary tertiary naming convention is something that came out of a lot of pains of naming something like sidebar and then all of a sudden we want to change the layout and it's no longer a sidebar so naming things is often something that I'll have to go back and refactor and I've found the more general you can make something the better, you know if you're styling layouts based on like a class that's say node article teaser like it's a layout specific for the article teaser and then you have this other content type called news or whatever you want to call it and you realize that oh I can use this exact same layout for this but then you name it you add that article teaser class to it and then all of a sudden like the semantics of that class name have gotten jumbled because you're naming things based on a Drupal implementation rather than the actual design semantics of it is that good, you want more examples of when things have gone bad no that's good I suppose would you say it's to do with documentation and kind of trying to set standards for yourselves internally that you're carrying through to the next project yes so documentation is something often times we'll start off documenting things well and then as you get down to like crunch time and actually implementing a project on budget that that becomes a very much like it's a lower client priority than getting the site launched and done so then it kind of comes down to you know does your does your client want to actually pay for the time to go back and document you know it's a business decision yeah thank you you mentioned architects who had written a book of good patterns and it seems like a really useful thing for architects is there any kind of similar resource a book or a site that does the same thing for patterns that can be used in sites in Drupal not that I know of yeah definitely nothing specific to Drupal something at all I mean the ones that I listed for like Brad Frost and Luke Robluski are good in terms of just like responsive stuff are there are there specific types of problems that you'd be looking to solve or just in general like there isn't we should start one all right thank you over oh sorry yes is the presentation online yep this is on my get up page I will add a link to the actual session page on the Drupal con sites so go to that link find the slides and give me some feedback thank you