There are a lot of grid frameworks for us the to choose from while developing websites nowadays. * Tells Susy there's 4 columns in the sidebar, and its the last item on the row.Bootstrap’s grid system vs. * Tells Susy there's 8 columns in the content */ We do have to let Susy know that sidebar is the last item on the row so it can make the necessary adjustments. To do this, you’ll just have to tell Susy that content is 8 columns and sidebar is 4 columns. This time round, instead of manually calculating the exact pixels and percentages for the layout, we’re going to tell Susy to do it for us. It is recommended that you use the container mixin to create the container for the website whenever you use Susy. * Makes border-box properties border-box-sizing * Tells Susy that the container has a max-width of 1120px */ * Changing Susy default global settings */ You do need to change three properties though, and you change them by declaring them on the $susy map.Īt the same time, let’s also apply the border-box property like we have done above. I’m assuming this is your first experience with Susy, so we’ll stick with most of the defaults for now. There are a whole bunch of default settings that Susy uses to kickstart every project. When using Susy to create any layout, you’ll first have to let it know what settings you want it to use. That’s precisely what Susy helps you with. Imagine calculating all those percentages every single time! Chris has written extensively about box-sizing here.Īnyway, the hand-coding from scratch method can start to get tedious if you have multiple layouts to work with. Margin-right: 1.6964286% /* 19px/1120px */Ī quick note before we continue further: I love to set the box-sizing property to border-box for all of my web elements, and I highly recommend you do the same as well. So the corresponding CSS would probably look something like this: /* I tend to use border-box sizing for all my web layouts. One rule of responsive web development is to output these widths in percentages, so you’ll have to convert them accordingly. To create an 8-column content and 4-column sidebar, you’ll have to measure widths of the content, the gutter and the sidebar. If you don’t need most of the other stuff that comes with Bootstrap and Foundation, Susy would be a much better fit for you.Ī stoic developer who hand-codes all his sites from scratch, no frameworks or frills, would probably write his mark-up like so: But Bootstrap and Foundation also come with a lot of baggage, that a lot of the time, we just don’t want to deal with. If you have used Bootstrap or Foundation before, the markup for this site layout would be: Quite standard stuff if you’ve worked with grids before. We’ll assume CSS-Tricks uses a 12-column layout for the whole site, and it’s content area takes up 8 of 12 columns while the sidebar takes up 4 of 12 columns. Have a look at the blog and you’ll find that CSS-Tricks is made up of two content areas: the main content and the sidebar area. Sorry, LESS folks! Creating a Very Simple LayoutĬSS-Tricks has a pretty straightforward layout, so let’s use that for our first example. You MUST use the Sass preprocessor language for it, which means you have to at least know how to convert Sass into CSS. We’ll start off simple, and progress on to more fancy layouts once you’ve gotten to know Susy a bit better.īefore we start, there are some things you must know about our friend, Susy. And you can compare it with the experience of creating the same layout by hand (which involves calculating pixels…by yourself). We’ll see why Susy is so special, and how it can help you out.Īs they say, there’s no substitute for experience, so I’m going to walk you through the Susy experience of creating a layout. Still not convinced? Well then, all I ask is you give me the opportunity to try and change your mind through this article. It’s an in-depth guide on Susy and how you can use it to easily create any website design you want. It has helped me out so much that I decided to write a book about it to share it’s merits with the world. Susy is one of the best things that happened to me in terms of my front-end development workflow over the past few months. Why would you pick Susy over the million other frameworks out there on the internet? You may never even heard of it before. Unequal width columns? Susy’s got you covered. It doesn’t matter if your design has 5, 14 or 48 columns. It gives you the freedom and flexibility to build any design that you can imagine. Susy provides you with the tools to build your own grid layouts that match the needs of your website.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |