refers to the number of columns the element going to take up.Let me break this down and full explain whats happening here. If you used Susy 1, you would have noticed that this is very similar to the span-column mixin, with very subtle differences. I generally follow the Susy way for writing my layouts. The span mixin is the heart of Susy layouts. To keep it auto, you can omit the length argument. If you are using static grids, Susy advises that you should make it auto instead and let Susy calculate the max width for you. If this number is not found, Susy will default to max-width: 100% instead. The container mixin has an optional length argument, with allows you to set a max width to the container. Note: Optional arguments are enclosed in The first thing you need to do is to define a container for Susy to do its magical calulations. If you understood these things, you can do anything with Susy. Important Susy 2 Mixins and Functionsīefore diving straight into using Susy 2 for the grid, lets go through three very important mixins and functions used in Susy. Now that we’re all prepped up, we can dive into the some more Susy details. The CSS for the grid backgrounds will remain the same as well. In this case, AG 4 to AG 7 will be nested under AG 2 while AG 8, AG 9 and AG 10 are nested under AG 7. Simply speaking, whenever something is found within another div, you should nest it within the previous div. The 10 column complex nested grid AG test Since we’re going to create the same AG Grid as with the Susy 1 Tutorial, the html will remain exactly the same as before. In all, the initial configuration up to this part should be this. The major difference between these two modes come in when responsifying your styles, which will be covered in another tutorial.Īlso note that you’ll have to include normalize and compass into the project as well. If you like to use Susy with fixed widths at certain breakpoints instead, change the math key to static. This means that width of the outer containing element will be 100%. Note that Susy uses a fluid layout by default. You can use Susy with the defaults immediately now, but since I love working with border-box and rem units, I’m going to change some defaults. I’ll go a little deeper regarding these defaults in another tutorial. You’ll want to play around with the defaults and try them out depending on how you want to work with Susy. You can change the defaults with the code // Configuring Susy 2 Global Defaults Susy 2 has list of global defaults that are built into it. You now need to import and use Susy in your stylesheets. Likewise to the previous version, you need to require susy in the config.rb file if you were to use Susy 2. Now that you’re done installing Susy 2, we can now begin setting Susy 2 up. Its the best way to avoid any errors if you didn’t go by the update route. Its to uninstall the two gems mentioned above and reinstall them. The second method to installing Susy 2 is a little more manual. If this doesn’t work, it means you need to try the next method, or install Ruby RVM first. If you already have Susy installed and have Ruby RVM on your system, you can update the gems. If you don’t have them installed, you can install them with the following commands $ sudo gem install sass Susy requires you to have both Sass installed. Installing Susy 2 If You Don’t Already Have Susy Installed Instead of only talking about theory, we are going to use Susy 2 to help us build a complicated grid system devised by Arnaud Guera (AG) that uses 10 columns. Yeah I know this is totally abstract and its difficult to grasp. You can immediately target any css class and apply a grid to it. Furthermore, classes have to be added to the HTML if you decide to change your layout. If you have used traditional grid frameworks like Foundation and Bootstrap before, you already know that the grids that come with these frameworks already have fixed widths and breakpoints. The beauty about Susy is that it separates presentational CSS from the HTML. Why Susy?Īs I mentioned, Susy is a helper tool that lets you create any kind of grids easily without the need do a ton of math. This is a two part tutorial for Susy 2, and in this tutorial, I will be sharing with you how to create the Complex AG Grid with Susy 2. If you loved Susy 1, you will definitely love to use Susy 2 because it offers so much more flexibility. Its been a while since Susy 2 is officially released. Susy is a helper tool that lets you created ultra customizable grids on the fly easily. A Complete Tutorial to Susy 2 14th Apr 2014
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |