{"id":64578,"date":"2015-09-14T00:00:00","date_gmt":"2015-09-14T04:00:00","guid":{"rendered":"https:\/\/www.gticanada.com\/susy-an-alternative-to-responsive-design\/"},"modified":"2015-09-14T00:00:00","modified_gmt":"2015-09-14T04:00:00","slug":"susy-an-alternative-to-responsive-design","status":"publish","type":"post","link":"https:\/\/www.gticanada.com\/en\/blog\/susy-an-alternative-to-responsive-design\/","title":{"rendered":"SUSY, an alternative to responsive design"},"content":{"rendered":"

During the last couple of years, responsive systems and frameworks running on Sass<\/em><\/a> have proliferated over the Internet almost virally. It seems nowadays we can find a responsive system just by stumbling around on the internet; nonetheless one has stood out consistently: Susy<\/em><\/a>.<\/p>\n

So what’s all the fuss about Susy<\/em> and the alternatives? With so many choices out there, it might seem like a simple one to make, and easy to distinguish from the others, but it’s not. So in order to maintain focus through the article, I will try to keep it simple and break things down with one goal in mind: to answer the question What kind of project is better suited for Susy<\/em>?<\/strong><\/p>\n

So, let’s get cracking. We’ll go through the following elements as we move on: Definition, Pros & Cons, Compatibility and Alternatives.<\/p>\n

 <\/p>\n

AN UNAVOIDABLE COMPARISON THAT ISN\u2019T ONE<\/h3>\n

My literature teacher always told me it was tasteless to define something by comparison or by what that something is not. In this specific case however, the comparison with Bootstrap<\/em><\/a> is unavoidable due to its popularity. Most people hear “responsive” and picture Bootstrap<\/em> in their minds. So let’s get that one out of the way: Susy<\/em> is NOT like Bootstrap<\/em> at all<\/strong>.<\/p>\n

That said, Bootstrap<\/a><\/em> is a template framework whereas Susy<\/em> is a Grid<\/strong> Framework; let me elaborate on this a bit more.<\/p>\n

 <\/p>\n

Template framework<\/h4>\n

\"420x250-2\"On one hand, Bootstrap<\/em> was originally born as a template, a non-responsive one by the way; responsiveness came after. Its pre-defined grid can be customized to a certain extent and complemented with ready-to-use jQuery plugins and pre-made components like carousels, accordions, navigation and the like, allowing you to have a website assembled in no time.<\/p>\n

Prototyping a website with Bootstrap<\/em> is a breeze whereas trying to do precisely that with Susy<\/em> (although they provide a starting point) would take much longer.<\/p>\n

With Bootstrap,<\/em> you customize (or code) both ends: HTML and CSS. These two codes are then associated or paired to shape the solution. Now, from this perspective, Bootstrap<\/em> is tough to maintain. If you want to change the website grid in the future you will have to edit BOTH ends, change the HTML first and then the CSS.<\/p>\n

 <\/p>\n

Grid framework<\/h4>\n

On the other hand, there’s Susy<\/em>, which provides you with the tools to build a custom<\/strong> grid framework that matches the needs of your website. The grid is NOT predefined for beginners, providing the ground for those trendy asymmetric designs that are impossible to create with traditional rigid frameworks; Susy<\/em> gives you the flexibility and freedom to play with your design.<\/p>\n

As for coding, Susy<\/em> leaves the HTML alone and most of the magic happens in the Sass<\/em> file that generates the CSS, therefore Susy<\/em> is built to evolve with a project for the long run, or update it at any point. Maintainability<\/strong> is the cherry on top of this cake, since the HTML and the CSS are actually not paired.<\/p>\n

Again, Susy<\/em> is only a Grid Framework, and does not include any components, although some third parties are starting to arise as we’ll see later on.<\/p>\n

 <\/p>\n

SUSY\u2019S PROS & CONS<\/h3>\n

Ok, so let\u2019s go through the top Pros & Cons of using Susy <\/em>as a Grid Framework for any given project:<\/p>\n

 <\/p>\n

\"450x160\"PROS<\/h4>\n