 I think they're always starting to clear out, so we can go ahead and get started. This is Intro to Singularity, and either I'm in the wrong room or you are if that wasn't what you were expecting. Thank you very much for joining me today. All the slides and the references and examples that you'll see today's presentation are available online. The GitHub repo is Intro to Singularity. My username is T-Smith512, so you can find this here. My name is Taylor Smith. It's nice to meet you. I'm a designer and front-end developer at Four Kitchens. We're based in Austin, Texas in the U.S. My username is T-Smith512 on a bunch of places, including Drupal.org, which is not on this slide, which surprises me. We're going to talk about Singularity grid system today. Because that's SAS and grids, I'm going to go ahead and assume that everybody is familiar with SAS, anybody not familiar with SAS? Good. Compass is no longer a dependency. When I first wrote this, it was. So if you've seen this before or you've been reading about Singularity or Breakpoint that goes along with it, Compass is no longer required for either of those in the work that is going to allow this all to work on Lib SAS. I also assume that you can get these things running with Bundler. Bundler is a dependency manager for RubyGems. It makes it really easy to make sure that everybody that's working on a project has the same version of every gem running. That way you don't get weird diffs when you rebuild stuff. So that's a great tool that's helped us get everybody synchronized, and it will help you then run multiple versions of a gem if you're on different projects that are on different versions of things. It'll help you switch between those. So we use Bundler. And I'm going to assume, since we're all here, that you've used at least one grid system before, 960 Bootstrap Foundation, Susie Grids, specifically the version 1.0. And then finally that you are familiar with BorderBox, which is a box sizing model that we'll talk about and why it is awesome and why you should use it on everything. Any questions about that so far? Okay. Singularity is a grid system that lets you create your own grid system just the way you want it. It is a tool that will not dictate the outcome. You probably never needed 12 column grids. You just needed the fractions that that makes easy. And maybe you sometimes ran into a situation where you needed something that didn't fit that way. Like a five column grid or three. Three is divisible, oops. It sets you free from presentational classes. Push three, call MD six, large eight. Those are not classes that mean anything. And it's also not something that Drupal is going to give you, which means you had to go in there and inject it yourself and that's always a pain anyway. So these presentational classes, I say that there's no use for them. It's just litter in your code. And this will allow you to sidestep having to do that. Singularity makes it very easy to create grids of different types. What singularity refers to is symmetrical where every column is the same width or asymmetric where you've got individual columns that are varied in width. Singularity is also designed to work with breakpoint. Breakpoint makes these grids powerfully responsive. You can change your layouts at different sizes, which makes it really easy to start moving things around when you have to deal with different device sizes. And then also singularity will help you detach your visual order from your source order. And that's a really cool thing that we'll get into at the very end when we look at Aunt Flossy's resume, which is my example case for all of this. Any questions so far? OK. Today is an overview. Sorry, I just ran off the subway. Today is an overview. Singularity is really, really flexible. And Sam Richard and Ian Carrico, the maintainers of it, have added a lot both to singularity and a gem that's very related. Singularity extras that has a whole bunch of different generation features that will make all sorts of crazy stuff possible. And I'm still playing with all of those possibilities myself. So they are both very receptive to being asked for assistance. So jump into the issue queue on those projects on GitHub or tweet at one of them or me. And it's a very active community within SAS that is willing to help people. And there's a lot of stuff, so always play with all the possibilities of this tool. A quick review, I said I'd talk about the box sizing, the two different box sizing options, because this is a really critical thing to get singularity running. Content box and border box are for the most part the only two options for this attribute. Content box is the default for everything but IE6. IE6 actually defaulted to border box, which confused everyone at the time, but is now what everybody wants. Content box, sorry, when using content box as your box sizing model, the fixed size that you set for a width or a height applies to the content area, the white space inside that shape. And that seems to make a lot of sense until you start adding padding and borders and really quickly you have to start doing complicated math to make stuff fit next to each other or align things visually. Border box steps in and says that the fixed size of something like its width or its height applies to the very outside edge of the border. So then any visual space you take with the border or its padding gets subtracted from the content space on the inside. And that means that you're not specifying the shape of the content inside but it makes it really, really easy to set up regions and containers that will be next to each other or floating around each other to line everything up. So as a practical example of that, has this ever happened to you? When you were trying to set up something where you set your width to be 33% and you had three boxes next to each other and then you just had to space some things out with padding and then your last box dropped, you were using content box and that was always a big pain in setting up grid systems. But border box is probably what you wanted in this case because you still have your width of 33% and then we added padding and border to each of these containers and they still fit in that one line like you expected. So that's why border box is important and there's an entire article written by Paul Irish, border box for the win. And he actually recommends specifying your border box this way and this is something that singularity does require. Actually, applying it to the wild card selector, which I know sounds scary and unperformant, but when used in this way it's not and it'll help make sure that that standard is applied to every element that you might come in contact with. So this is the way we start all of our projects at Four Kitchens and it makes singularity a lot easier to use. Everybody with me so far? This is short talk, so if you've got questions, stop me. So a review, backing up a little bit, what was 960? 960 was a simple 12 column grid system. Others include Bootstrap, Foundation, UE Grids. There are all these 12 column grid systems because it made math really easy. With one system you could make a two column grid or a six column grid or three or four, but very rarely did you actually ever need all 12 columns and if you did, I implore you to investigate Flexbox. It makes it a lot easier to deal with. Singularity is another way to create columns and gutters. It's the same system built on the same principles but you can futz with them and change the sizes of things in really convenient ways and then have SAS to all of the math for you and that's what SAS is good at. So you can build, this is a picture of the different column layouts you can get out of 960 or any other 12 column grid. And you can rebuild this in Singularity if you want. I would recommend that you don't, but it's really easy. Here we go. Once you include Singularity, which requires Breakpoint and SAS to be running, in a global space, Adgrid with an argument we'll say 12 because that's the number of columns we want and add gutter, which is one third, which matches most of the other grid systems. 960 and Bootstrap both have a gutter space that's about one third. The difference between Bootstrap and 960 is whether or not there's an external gutter on the side. And then the container has to have a ClearFix applied. You can do that. SAS and Compass both include different ClearFix patterns. You can write your own but it does have to have something on it to keep everything inside. And then you would use this by doing an add include grid span. Grid span is what Singularity uses to apply the margins and the widths on an element to put it in the right position. And if you can see for each, oh, I can't step away from this or they'll yell at me, for each item, simply add include grid span. And then the first argument is the width and the second argument is the starting position. So you can see the blue item on the top left one and one, one column wide, starting at the first. And then all the way on the right side, the black box is four columns wide, starting at the seventh. And it is one based, not zero based because CSS starts counting at one. There's an example file. And let's take a look on SAS Meister. If you don't know what this is, it's like code pen for SAS. It includes a bunch of gems, makes it really easy to play with stuff. So we will back out. I'll just take a look at this real quick. Okay, on a small resolution screen, this isn't so great. You can see we've included, I included toolkit and the toolkit kickstart because that gives you the border box sizing model and also image and video max width and height auto to just sort of kick off fluid media and not have to worry about it. And you can see that I've included on my outer wrapper a width of 960. Oops, let me scroll on this one. There we go. Add grid of 12. So I got my 12 column grid and gutters of one third. And that's a global setting. So that applies to anything in the file unless you override it, which I'll talk about in a little bit. So you do that outside of your container. That's not a property of the container that you're using. And then for my outer wrapper, I have a clear fix concluded and I set a width of 960 so that it matches the grid systems that we're talking about. And then this is a really neat debugging feature of Singularity. Add include background grid and you can specify its color if you choose. And that's how I have the overlay in the back that shows me where the columns and the gutters are and that makes it really easy to see what you're doing as you start laying things out. That does require that you use the settings change include, debug true, and that'll turn on a whole bunch of extra output that'll then help Singularity start to put together stuff like this background image. It should be noted that this is done using CSS3's gradients, which is really cool, but it does set a requirement that you use a browser that supports that. And also it means it may not line up pixel for pixel with the layout of the elements that you're putting in the grid. So the element positions are always right. It's the background grid because browsers round sometimes their CSS3 gradient math a little bit differently than they would their margin and width math. Because that's annoying and makes sense. So that's the background grid, which makes it really easy to deal with. And then scrolling down, you can see that the item, which is red, I just have it's one column wide and it starts at the second. I set a height on it because there's no content, but I could make it five wide. And then if the wifi is working, you're gonna do this to me today. Oh, this is unfortunate. This is not an error I've gotten before. They may have updated to a newer version of singularity than this just was originally written with. Don't play with fire on a live demo. I will figure out why this did not work and I will post it to Twitter if I find the answer. Sorry about that guys. But there is a link to both SAS Meister and an example file that explains all of these properties in the slide deck. One thing I would like to point out, look at these selectors. These are just class names that I wrote that describe the content that I've placed in the grid using, and then the grid code gets added to whatever selector I used. And that can be a class or an element or an int child or whatever makes sense for your markup. So that way you don't have to have presentational class names. You can have lean, legible, maintainable markup. Also it's easier to deal with with Drupal because we know how hard it can be to shoehorn a class name in somewhere specific. So this is my first win on singularity is that we can ditch all of the terrible class names. Everybody with me so far, any questions? So we saw the ad grid global configuration directive and that just takes an integer. So you can specify the number of columns that you want and that can be 12, which was my previous example or any other number, but it makes getting out of the 12 column grid really easy. So we can do a 10 in column grid or a five or whatever it is that you need for your content. So that's ad grid where X is the number of columns you want and then ad gutter, which is a fraction or a decimal and it's a ratio of the, it's not a ratio, it's just a multiplier for the width of a column and that's gonna be your gutter space in between. So there's another way you can specify grids with singularity and it is with a list. Ad grid can take a list instead. So instead of ad grid four, you could type 1111 and I'll give you your four column grid, but that begs the question, what happens if you change that digit? And that's how we get to asymmetric grids. And this is my next big part for singularity that I really like. Not all grid columns have to be the same width. So you can have, by changing the numbers here, you can have columns that are different widths in relation to each other. So you see that the left and right most columns are both one and then the columns in the middle alternate between two and three and one and it's always a multiplier of the widths of them and so singularity will go through and add up the number of columns that you specify in total and then divide that out and each one becomes that fraction. Does that make sense? I think that was kind of clumsily worded. And then the add gutter is a multiplier on whatever the value of one would be. So if you don't actually have a one width, if you have columns, for example, two and three, if you're trying to set up that relationship, you would end up with, if you specified a one third gutter, it's the one third of whatever the value of one is. So it's multiplier of then one out of the total number of columns added together, you specified, if that makes sense. So that's a big win over, I think, other grid systems. Other than Susie, too, I don't know if another grid system that allows you to specify columns that aren't all the same width and that gets really helpful when you're trying to lay out content instead of trying to save shoehorn stuff into, is this gonna be four out of 12 or is this gonna be five out of 12? But I couldn't make myself think this way and any front end dev at Four Kitchens is probably laughing at me for this because I used to kind of get, there were office arguments around the water cooler about this didn't make sense and 12 column grids always worked. I don't have a problem with that. And I stuck to my 12 column grid system until I was working on this really big project and they asked me to change the width of some sidebar somewhere. And that was horrible because I had to go through and change not just what was in the sidebar but what was next to it in every partial where I had made class definitions or grid definitions. And it was, do I change that to a five or a six or was that three or a four? And it made it really, really easy to make mistakes. And we use SAS because control F is not a dev tool and that's why I use Singularity. If I'd been using Singularity and a asymmetric grid or a symmetric grid even based on the needs of my content that would have been a really easy change to make. Go change your ad grid definition and then the changes reflected globally. Everybody with me? So it's a new thought process for me or it was but it goes back to my background as a graphic designer. It's not about the first, second or 12th column it's about the main column and the rail or that side by side product comparison with a sidebar or the nav and the filters and ads or that stupid mega-mini dredge talk them out of. And these are the words that are coming from your design department. It lets you speak the language that they are speaking about the content that everybody's trying to put together instead of how are we gonna move this content and sandwich it into whatever grid system we happen to pick. So you can create grids for your content. My example of not real code. Ad grid, left nav, body area and the right rail. And that might be for what you need with multipliers two, four and one. Another possibility that is very cool that Singularity Extras provides is the ability to use the calc output method. And this does require that your browser standards are CSS three and higher. So that is sort of IE nine but not really and Android five and up. I think there's some calc problems in 4.4 but all modern browsers and recent Android phones should have no trouble with this and I love this. And I'm not gonna edit it this time. So we've got a output method or let's go back through. You can see that I added Singularity Extras and Singularity Extras outputs which are for whatever reason split up. Debug mode does not work with a calc output method because then it would get into really weird nested math. So that's just not available if you're gonna use calc for your output. You can see from my ad grid, I did a 300 pixel column and then one and two. And those multipliers work the same way with an asymmetric grid that we had before but this first column is specified in a fixed size and you can use pixels or Ms or any other unit. And then I added a fixed gutter size of one EM and that is also, I really like that because I don't always want different widths of gutters. I want just that one because it usually matches some vertical padding or something. And then I include my SGS change. The output style by default is isolation which I'll talk about in a minute. I changed that over to calc. And then for my outer wrapper, you've seen this before. I have my clear fix. I set the width to be 960 but then I animated it later. I added a border so we could see it. As I said, the background grid does not work with this output method. And then I'm spanning the grid the same way as before. Each one of these is only one column wide starting at the first, second and third respectively but that first column is 300 pixels and that would be great if you needed to shove in some kind of a fluid layout next to an ad that you can't shrink or some piece of media that you wanted to give its full size to when you've got that much space in the browser to work with. Oh, there's my animation. So that gets a little bit tricky but CST Singularity Extras does include a lot of really neat functions and output styles like this. And I use them when I can, although I have too many clients still sticking around thinking that they need IE8 support because we all know how hard that is to talk about it. Yes, yes. The question was, are the gutters fixed with and they are? We'll see if this breaks. There we go. So you can see you can set these if you're using Singularity Extras you can set your fixed gutter size and that can be whatever you need it to be. I set it in M's out of habit but you could probably do that in pixels too. Probably, let's see, the other question was can I use REMs? Oh, you're right. Oh, that's because I, no? Oh, you're right I still had my brain in pixels. There we go. Okay, yes. Sorry. Anything else? Curious if you're just using this negative margin left, right, the trick from the bootstrap or do you do something different? So that is part of isolation which I'll get into in a little bit. But yes, it does use a negative 100% right margin for isolation's output method. The gutter with left and right negative margin compensate for the padding on each column. So I don't know if you use the same trick You can do that if you want. So there is a singularly output option to be able to specify if you want gutters just between the columns or if you want that half gutter on the outside. And if you specify that you want the half gutter on the outside, then yes, it'll add that. But it uses the same mathematical output so it would actually just be it would still be a negative 100% right margin and a left margin to compensate, add that extra half of the gutter to everything. If that makes sense. I've actually dove too far into the bootstrap code in a while, because we don't use it because we use this or other systems like it. The question was, is it possible to have one gutter fixed and the other be fluid? I don't know. I don't know of a way to do that though because add gutter only takes one argument. Oh, I'm not sure how I'd go about adding that here. What I would probably do is set up two grid containers so you can override your singularity. You can have multiple singularity grids in one file by using the at include layout directive and it allows you to specify all of the grid and gutter settings and then within that code block, you can set up whatever you want. So you could, for that I would do something like your fixed width column and a fixed width gutter next to an element and then inside of that, define whatever you need that needs to be fluid. Any other questions? So it is responsive out of the box. If you don't do what I did, which was specify a width. So I specified a width for the purposes of the demonstration but you can go back and not set a width or max width 100% auto or an outer container if you need something that's not the full size of your container and then all of the output from singularity is based in percentages. Unless you've done output style equals calc here, in that case it is all based on the units you specified in percentages. So this would not be responsive because I haven't included anything to do if the column gets so narrow that there's not enough space for that 300 pixel thing. So this in and of itself is not but the other, the 12 column grid that I showed you earlier, if I'd shrunk the window and removed the width, it would have just, and then it would be really, really narrow columns but 12 of them. But what we'll get into in a minute is how to make a better grid system for a smaller device and then how to build that out as your device gets wider. The height, the height would be the height of the tallest container or sorry, the tallest item. I specified heights here just for the benefit of the demo because there's no content in these items. Singularity doesn't care about height. If you want to override some of the way Singularity clears things, you can actually set up some stuff that'll float around next to columns if you wanna do that. Anything else? Okay, let's get back to it. So I wanna talk through an example case that uses all of these tools as best as I can put them all into one file. Meet Aunt Flossie, which I found her picture by typing scary old lady on Google. And what could be more tabular and grid-centric than a resume? So let's build one. It's a very simple grid setup. You can see I've got the first line of her resume, the most recent work experience and a header where we've got a little logo and her name and the photo, web address, social media icons and then one headline and then all of these items. And then you can see the date takes the same column as the name and then within that sort of content block we have where it says the Flamingo and then that's one column and then her job title and then the location of the position is all the way on this one really narrow column at the end. And then underneath that, the job responsibilities, that spans three columns because I needed that much space for that content. So you can see that the grid that I have is asymmetric. We have one for the really narrow column at the front and then two equal width columns next to it and then a third that's pretty wide which is where the job title is and then the last column, the fifth, is another narrow column like the first. And then my gutter space between them is the width of a quarter of a gutter. So a gutter space is a fourth of that. Everybody follow so far? So back to the responsive question, should this website be responsive? Absolutely. And Singularity and Breakpoint were built to work in a mobile first way. So if you've used Susie Grids before, which I had when I was first exposed to Singularity, I thought, oh, this makes sense. I've got, and this is Susie one, Susie two is different. I just need to change what my grids are. Yeah, I've got my 12 column grid and when something is really wide it needs to take up four columns and on a narrow screen it needs to take up six so I can do side by side and on a full or on a narrow device it needs to be 100% or all 12 columns. Singularity has a better answer to this. Susie two has added this. Different grids at different sizes. So we have my desktop only grids first so we see one, two, two, three, one, and then a quarter. What Singularity allows you to do is build grid systems that grow and change at different sizes. So I will start first with a two column grid for all devices because I'm mobile first and then at 850 pixels we'll do a three column asymmetric grid, one, two, two, and then at 1000 pixels we'll go back out to what I had before. Also, because the grids at the top there's gonna be either a two column grid or five columns in total, a quarter of that is gonna be a lot of space. So I shrink my gutter so that when I've got this two column grid on mobile I've got a much thinner gutter by the numbers and it ends up looking the same. And then at 850 where I add that three column in I drop it down to a quarter and I've got an example file in the repo that shows those options. There we go. So that explains what you can do with all of those. So when you look at that and let's add the background grid back in and look at the animation. So we start at the narrow, we've got two columns and then three and then five. Man, that's choppy. Makes sense? So this gets away from the trying to do the find and replace and how many columns and what context and all that stuff that I find to be very confusing when all I really wanna do is just write a frame for my content. And this was designed to work with Breakpoint. And Breakpoint is another SAS plugin that lets you specify media queries in really easy to write syntaxes including no query fallbacks for browsers that don't support media queries and other stuff. But specifically what Breakpoint and Singularity do together is sync up on a min-width property. So that makes Mobile First really easy. And you can see that what I do, I have for that where it said work, I should re-include this animation. So watch where it says work, that's my headline, that's that H2 that I'm about to talk about. So the H2 by default, Mobile First, we've got two columns I just, I don't specify a width and I say that it's centered. And then at 850 where I've changed the grid I'm gonna go ahead and include it first column starting at the first, or sorry, one column wide starting at the first and text a line to the right. And then at 1,000 pixels we do it again because we have a new grid system. First column starting at the first but instead of being a three-column grid now we're at five. And that's the big catch when you're using responsive grids with Singularity. You have to make sure that when the grid changes Singularity's not gonna go back in and figure that out for you. Because there might be cases where you want it to keep its old value at larger sizes. So when you want to change the grid system something sits on, you have to include the grid span again. Even if the starting position and width are the same because the underlying system has changed. Does that make sense? If you don't, then it keeps its same measurements. So it will still sit on whatever grid system you had before with, if you had a four-column grid with no gutters because math in my head then you'd have a width of 25%. And then you resize your window, you load that up on a larger device. You didn't specify another grid span at a wider breakpoint. You might be in say a six-column grid system at the widest breakpoint but because you didn't re-specify the grid span you'd still have that width of 25%. So that way if you've got a layout that works at wider sizes you can just keep it unless you wanna specify other stuff. The other thing I'd like to point out about Singularity and this I think is maybe its most powerful feature for us as we work through content prioritization and user experience is you can change the order of stuff with CSS. Your output order and your source or your source output order and your visual order do not have to be the same within one row. And we've got another example on Sassmeister for this. So you can see that for each they're all one column wide and they're specified in HTML order, ABCD but you can change the order in which they appear. So I have my first all the way to the right and I have my last all the way on the left. And you can do that within a row easily every time. And you can even kinda get tricky if you're gonna override clears and change some margins a little bit. You can start to do some other stuff especially if you wanna like break lines and make other systems which I'll show you in a second from the resume. So you could swap out. Okay, so I got another one of those that I need to figure out. Chris, would you write that down? Thank you. And this is based on Singularity's isolation output style which I think someone had asked about earlier. It's that margin right of negative 100%. And John Albin wrote a really, really awesome article that explains why that works but the TLDR on that is browsers were really bad at being consistent in how they rounded. And when you've got a system, a grid system that's like four columns, that's really easy cause it's all based on 25%. But if you do something like a 12 column grid or three, you've got these repeating decimals and some browsers rounded them in different ways. And frequently in the old days of old versions of IE, the IE would round up and other browsers round down. And so you'd either have a gap at the end or you'd have that last element wrap down. What John Albin describes is a process by applying a negative 100% margin to the right side of any element in the grid and then pushing it back out from the edge of the container with a margin left. And so that way you can actually have stuff overlap but stuff will run into each other but not make things wrap around each other. So that's a really awesome article because he explains that a lot better than I do but it explains all about how to do that and then what tricks you can build on top of it. But singularity is based around that technique. So just change the ad grid arguments to reorder any elements within a single row. And if you get clever with clears, you can get even more flexibility out of that. So to see how that works, we did that in a couple of places here. The source order of the headline for a job in this resume reads from October to present at, yeah, it is at, at the Flamingo as a senior pit boss in Las Vegas. And then I dropped all of the articles and pronouns with the element invisible that I stole from Drupal and then used singularity to move around stuff to make that row look better at smaller device sizes. So if you watch the date which is source first and the city which is source last move in relation to the other items in that headline, you can see what I'm doing with that. And another example would be the headline. Watch the portrait in relation to the name and you see how they swap around a little bit. And it was all to make the content that I was given work within whatever browser size I have. And that has solved a lot of problems for us. As we start to do content prioritization, you'll have something that needs to be on the right side in a desktop display but the client might want it above the main content area. Common examples include things like filters or maybe advertisements that you don't want to lose to beneath all of the body content because users will scroll but users will see first what you put up there. So this helps us with content prioritization. So the resume is also included in this repo. So we'll check it out real quick. And I included a button to turn on and off that background grid. So let's jump out of this. I hope I didn't leave too much stuff on it in the background. And you can see that we had, you can barely get a five column layout on this present projector but you've got that five column and then we've got drops down to a three and then two. And then sort of centered but the two column grid is still in place because there's no reason to specify a one column grid. You just don't use it. Any questions so far? Mm-hmm. Yes. They do. And I'll show you that again. I meant to bring that up and then I did not. So the question that was asked was about the social media icons at the widest point. You can see that they overflow that last column. Remember how I said with isolation you can have items that overlap each other? That's what I've done here. The web address and the social media icons both are two columns wide starting at the third and then I use text align to make sure that visually they weren't on top of each other. No, that's not gonna work. There we go. So you can see that container of the social media icons. It does take both sides and then if we back out to the website you can see what I did was add width auto. So it still has the margins that it's supposed to have but I took the width out. It should have been 30% for this layout but I added auto so that the element would shrink so that it wouldn't be on top of the social media icons because even if the element doesn't have a content in it it was still preventing me from being able to click on those icons. Not generally, the question was if I had something at the very bottom of this page could I bring it way up and put it in the header somewhere? And the answer is mostly no. If you get creative in how you nest things you can sometimes do a little bit of that but really not. Now Flexbox would make that easy for you because you can use once you've got stuff in a Flexbox even if it's only one column you can use the order attribute to change the rendering order of something. So if that's what I had to do that's how I'd do it. Any other questions? Okay, and jumping back over here. We're at DrupalCon, so I thought I'd talk about how Four Kitchens uses this in Drupal. Singularity is just CSS so you can use it with whatever theme you want whether you're coding a theme from scratch or you're using a base theme. For Kitchens most of the time we use Aurora. That was mostly started by we had the Aurora maintainer on staff and if we didn't use Aurora we'd hear about it really loudly so we did but it's a good lean theme of, quit laughing, so it's a good base theme that's got really lean markup by default and it plays really well with a bunch of other tools and it's set up to make jump-starting a SAS project very easy and then we use fences for leaner field markup. So between Aurora and fences that gives us pretty clear markup because the problem with this, or sorry, the problem with using something like Flexbox is that nesting matters. With Singularity it really doesn't but the leaner the markup is, the easier it is to start putting things, moving source order and visual order around. And then we can use as a container for a grid something like a whole panel's layout or a view or write elements into your template files if you write template files from scratch. I do sometimes and this makes that a lot easier to deal with. You could also use a multi-value field wrapper as a grid container and then the grid items could be either the pane regions or the panels within them. If it's pane regions and you set up your admin CSS, the panel's UI looks right. If you're styling panes directly but you don't put stuff on, you don't put widths and clears on the region UI then it'll be labeled in the panel's UI but it won't actually have, it'll look like a one column layout. And then within a view, each view's row or fields within them could be a grid item or you could do grid items as either block regions or the blocks within or individual field values. And also remember that grids can be nested and overwritten using at include layout. So within a code block of at include layout, the arguments you pass that are grid and you define your new grid and gutter and you define your new gutters and you can even define your own output style there too. And then that would be how if you wanted to set up a three column grid in a view in that's sitting in a five column grid space. That's how you could do that. That make sense? Any other questions? So that's what I got. Singularity is a new kind of grid system which lets you write grids for your content and that's why it's so important to me because it focuses on the content instead of trying to make you match your content to something else. And columns can be equaled in width and Singularity's documentation will call that symmetric or varied in width and Singularity's documentation will refer to that as asymmetric. And Singularity plays really, really nice with break point so that you can get different column layouts at different sizes and that your visual order and your source order do not have to match. Again, I'm Taylor Smith, T Smith 512 on GitHub and all of these documents are there. Also for kitchens is hiring. We mostly have people in the United States but currently we have one in Germany. So there's that open door if anybody wants to talk to me after the thing. There are any other questions? Yeah, usually I have this conflict either do I do the HTML and content first and then I style that or do I prepare some styles that I can later use and the thing is if the site builder wants or maybe a content manager wants to reorder some stuff to reorder some blocks or something then maybe my CSS was targeted only at a specific order of the blocks and then it does no longer do what I was intending. So it doesn't give the more specific my CSS becomes the more freedom I take away from the site builder from someone who manages content. Yes, so we run into that sometimes too. For the most part though we've got only developers doing site building tasks because we follow a consultancy model so we build something for the clients but they don't come in and do a lot of configuration work. But you're right if you write CSS in general regardless of a grid system to specifically for the place that something is within Drupal's output and then it gets moved you'll run into that. So what we'll do is focus on I think the new buzzword now is component design where what I might do is have a SAS partial specifically targeting a view or a block and then define the style rules for that item and the things that it contains as generically as I can within that partial. So that way that's how the view just looks no matter what page it's included on or what region it's been moved into. Is that? Yeah, because the difference is usually traditionally you get like a design from a designer with these blocks and this stuff on the front page and you implement that and it's going to look like that and if they want to rearrange the blocks or insert something then you have to work again. And I think it's nicer if you have something where they can rearrange stuff at least to some limited degree on the front page. Oh, I see, okay, there are and there are whether it's blocks or panels or the thing that came with Omega-3 that drove me nuts there are visual tools that can allow site builders to do that. I prefer this way but that's mostly because of the way we work. Usually we will through our discovery process decide what that content prioritization is and then it becomes safe to hard code at least what type of content's going to go in what place even though the clients can certainly come in and change it and we show them where in the code if they want to change something for themselves but it results in leaner markup that runs a little bit faster that is more performant and helps us avoid putting too much of that work in the theme layer. Yeah, and sometimes the audio stuff should depend on some dynamic things. So for instance, you have three blocks but one of them could be empty and if so then you want to show them three and two big columns and but maybe if you have three of them have a corner then one of them should be in the big column and the other one should be in the small column. For that kind of challenge I'd probably look towards Flexbox for that because you can set the grow and shrink basis and amend width and then that way you'd have something that would automatically expand to fit extra space if you have empty output. Because like if you work with Bootstrap then there would be a matter of how you write the HTML so the PHP does the dynamic stuff and it gives a different Bootstrap class based on some dynamic arguments. Yes, and my reasoning away from using Bootstrap as a base is that then you don't have to have PHP trying to do layout math. It's a long discussion. Oh yeah, absolutely. Anything else? I think I saw some. Yeah. Mm-hmm. It is. Mm-hmm. Someone always asks me this question and it's fun because I get to say that a lot of this is going to go away. The grid system thing in general I think there are good and bad ways to do grid systems but I think a lot of that is going to be... The use case for that is going to change when Flexbox catches on to a point where it can be used without fallbacks. This is my Flexbox fallback too if I've got something like that. Flexbox is really great but it is limited to the direct children of whatever is the Flex container. So if you've got a Flex container it is the immediate children of that that are all considered to be Flex items and they all inherit those properties. And so that is really great if you're going to set up something like I use Flexbox on views a lot so that's kind of the thing that always comes to mind whether you've got tiles of article teasers or whatever. But if you wanted to position stuff that's not at the same level in the DOM Flexbox won't let you do that without a whole lot of work. Singularity makes that a lot easier because you can float something outside of its container and then you can put it wherever you need it. But you're right, you might do either large scale the outermost template with a grid system and then any little pieces on the inside that need to be lined up like a display of thumbnails that might be done in Flexbox. I'm not sure what the relationship between the two is going to be I just know that Flexbox uses is going to increase a lot. Grid system use is going to decrease a good amount would be my guess. So float and isolation are related but the sorry, I'm supposed to repeat all the questions through the question was if I can talk a little bit more about output styles from Singularity I've talked about calc and isolation is the default so that's what everything else has been shown in but the third one is float and that output style is most related to what you would have gotten out of the 960 grid system. So when you use float style output you get the right width and you get a margin left of a gutter and nothing on the right and unless it's the right most column everything floats to the left so you build it out but what it does not let you do is change the visual and source order you're locked into reading top to bottom left to right or right to left if that's your source or if that's your display but you can't do changing the visual order because all your left margin is that extra next column and it also means that if you leave out columns you can end up with gaps so I've actually never, that's not true I've used it on a couple of occasions if I do within, it's actually my fallback for Flexbox now that I think about it within a view if I wanted to do a three column list of article teasers I would probably do that with Flexbox but the fallback would be nth child three in and three in plus one I think would be just one column starting at the first because output style for float is always just the left margin is the gutter so that gives you the right widths and the right margins to float stuff out and then three in plus two which is the right most column would be one column starting at the last so that it floats to the right and that way it can just tile out if that makes sense the singular documentation can be kind of a bear to get through but it has really good write ups on the math on each yes you can but because within isolation you can have overlapping elements within one row it's harder to code that out because you'd have to make sure that each row is accounted for so you'd have to do three in plus the first column would be one column starting at the first and the second column would have to be one column starting at the second and the third would have to be one column starting at the third and so you'd have to do the instrialed math on each rather than just one set and override on the right you'd have to do all of the left, the middle and the right and then the right has to clear left to force the wrap yes, that's another way to do it yeah, that would work yeah, yes so the pro tip here was use it's what's the include it's grid, no it's width span and so as an alternate to grid span which gives you both the width and the margins for the gutters using width span gives you just the width so if you wanted to then handle your spacing in a way that will work for all of your elements within one, you know, like a view or something that way that does save you a little bit of code thank you yes the only thing you can run into with that is math related you can end up with a gap between because you'd be floating to the left if the number, if the math doesn't reach 100% exactly, you can end up with like under or over a pixel which can make designers like me freak out yes, yes so you can force a clear on what would be the first column so 3 and plus 0 you could set a clear of left to fix that but that's when I start jumping into flexbox if I know that the widths or the heights aren't going to match because I also want it to look right if that makes sense but yeah I think I'm about to get kicked out of here yeah, are you typically using the Drupal provided markup with the Drupal classes from views and everything so what are you trying to do nicer than that? I use, so we've used, we use Aurora to thin down some of the template markup and then we'll use fences to thin down some of the field markup and then I'll sometimes go in and throw in a views template that basically just says print content but for the most part because Drupal is very heavy with adding all these class names already I don't want to go in and try and inject more so for the most part I will either stick to because fences also gives you semantic elements element selectors or classes that already exist within the markup so that the heavy lifting in the theme layer is minified because I've discovered that can be a maintainability issue if there's not a front end or a designer working on a project when it goes to the support department that's the problem that a lot of them have our support department has a lot of great back-end devs and some good front-end devs but the weird what did I do to get this Drupal site to do what I wanted it to do for me a lot of the time seems to end up somewhere in the theme layer so just using Drupal's markup as it comes for me seems more maintainable I think I got to go thank you all very much for coming and I will be in the hallway if there's anything else