![]() Lets start applying susy span column mixins to the rest of our grids. Other methods can be found on Chris Coyier’s ntainer container For simplicity, I’m using overflow hidden as the self clearing method here. We must also make the container clear its childrens since Susy makes use of floats to align our grids. Using Susy for the AG Grid TestĪs we have mentioned above, we need to tell Susy what is the containing element for the Susy grid. Since we’re clear of the two basic mixins used, we can start applying them to create the grid. It defaults to the total number of columns you specified within the container. $context tells Susy the current nesting context. Omega is an optional flag to tell Susy that this is the final element in a row. $columns means the number of columns you would like the particular element to take up. The rest of the explanation can be viewed on the Susy Reference page. The most important arguments to be included here in span-columns are $columns, omega and $context. The span column mixin takes a minimum of 1 argument and has the potential to accept a few more to customize to your needs. It allows you to align an element to the grid you would like defined. The Span Column mixin is probably the one used most while using Susy. This will be elaborated on in part 2 of the tutorial. If were are to use Susy with responsive design, we have to pass some arguments into container. This tells Susy where to start all the calculations ntainer container Given our html, the container mixin will be applied to the container class. ContainerĬontainer establishes the grid containing element for the webpage. **īefore diving into writing susy mixins, I hope you wont mind if I explained how they work. We’re going give each ag a color like the one on Susy’s main webpage. In our case, AG 3 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 The HTML for the grid test is as follows. This is what we are going to obtain by the end of the tutorial With this, we are now ready to tackle the 10 column AG test. border-box-sizing Īlso, the susy grid background helps alot when trying to understand how columns are ntainer susy-grid-background Read on about border-box over at CSS Tricks if have no idea what it is. Susy has a built-in mixin for border-box sizing. I’ll also recommend using border boxes to help you with creating layouts. $container-style: magic // default to magic. Susy accepts px, em and rem for the magic and fixed grid, and % for the fluid grid For the rest of this tutorial, you have to use susyone instead of importing "susy" as in previous versions. To revert all browser default "susyone" The very first step of using Susy in your project is to import Susy in your sass file and set its defaults. Now, we can get into the very basics of using Susy. The process to use Susy in a project is to add a line of code in the config.rb found in the compass. # I personally use -pre, but you should be able to get by without the -pre since Susy 2.0 was officially released. The most important thing here is that sass and compass needs to upgrade if you are using old versions (I have no clue how to update so I just reinstalled everything) sudo gem uninstall sass If you have any errors running Susy, I would recommended you to uninstall all versions of Sass, Compass and Susy, and reinstall them altogether. Important Note: Susy has been upgraded to Susy 2, and a lot of the configurations is changed. Once you have Sass and Compass installed, go ahead and install Susy from the command line: # Command line If not, I suggest you check out some awesome video tutorials at LevelUpTuts for Sass and Compass. This tutorial assumes that you already have Sass and Compass installed. Head over here to find the latest article on Susy 2 instead. Susy 2 is now released, which makes this tutorial obsolete. In this tutorial, we are going to install Susy, set up Susy defaults and understand how to create the 10-column complex nested grid AG test found on the susy website. This is the first of a two part tutorial that covers the basics of Susy. If you need to create repsonsive websites do not want to constrain your design with available frameworks out in the open, Susy might be the perfect answer. It makes responsive design extremely easy by removing the need to manually calculate widths. Susy is a plugin to Compass that allows you to create customizable grid frameworks easily. ![]() A Complete Tutorial to Susy 22nd Sep 2013
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |