Responsive Design

Susyboot - Bootstrap Grid Replacement Powered by Susy

Grid Series no. 1 Image

I like Bootstrap because, with this framework, I do not need to think about how to name grid classes. This decision has already been made for me. From project to project, my content manager and I know exactly which classes we should use for building a table of three columns. Those classes are even supported by WYSIWYG editors. Also, there are many good CMS plugins, which depend on the Bootstrap grid classes, for example Panels Bootstrap Layouts for Drupal.

Susy is light and flexible and I love it for that. With Susy, I build the grid the way I prefer by naming grid classes as it is required by the application context. And that’s awesome. However, my content manager is not very fond of Susy because she has to put some effort into splitting the article content into three columns and make it look nice on mobiles in case of using Susy.

3 Simple Ways to Declare Media Query

Declare media query through @media

@media all and (min-width: 480px) {…}

It’s the most popular approach and it usually works fine.

But sometimes it’s necessary to split big CSS file and extract CSS rules for phone, tablet and desktop into separate files. In such case the following ways are reasonable...

Own Responsive Grid for Drupal 7 Views Using SCSS and CSS3 Media Queries

Developing responsive websites I created simple 3 columns grid for Views. It is based on CSS3 media queries, selectors and SCSS. I’d like to share it with you.

5 Most Popular HTML5 Responsive Frameworks

HTML5 Boilerplate

Boilerplate is not a framework, nor does it prescribe any philosophy of development, it's just got some tricks to get your project off the ground quickly and right-footed.

(html5boilerplate.com)

Although it is not a framework I decided to mention it first because it is good starting
point for any HTML5 project.