In this article, we will help you understand how to build an Adaptive Grid with MUELLER but before that you need to know what MUELLER is all about. MUELLER is a modular grid system for responsive/adaptive and non-responsive layouts, depending on the Compass. As a result of this, a user can have full control over the column width, media queries, baseline grids and gutter width.
Table of Contents
But the question arises as to why another grid system is required?
Knowing Grid System is an advantage and not a guarantee despite of the many advantages. Each designer has its own personal style and hence, one must learn how to use a grid.
Designers require full-control, cleaner and leaner code with flexibility which no other grid system was unable to meet. Thus MUELLER is being used for building complex, adaptive and standard layout with media queries.
MUELLER also allows fluid designs but designer might lose control over typography although you might need to use fluid designs with small handhelds.
As grid systems shouldn’t restrict you in any way; similarly MUELLER doesn’t help with the Layouts such as the number of columns or width and margin between columns as that is a developer’s call to decide on the layout. Thus, it is better to have an idea about the device you are targeting, kind of grid to be used like 12 cols for tablets, 24 cols for large desktops and so on.
MUELLER is not an out of the box grid system as it requires coding. Thus, instead of being scared of the, one must understand the defined grid that will adapt to all the devices.
To get started, obviously, first of all MUELLER Source needs to be downloaded. Source code is available on GITHUB repository.
Then just replace two folders (partials, grids) in the working version of Compass and file screen.scss in Sass folder. If you are struggling, then use the SASS DOCUMENTATION or use CODEKIT that automatically compile both SASS and COMPASS files.
Initial steps involve defining columns for each device and then building layouts on the top of media classes.
In the folder media, there are various files for media queries these files can be renamed and files that won’t be used can be deleted or combined in a folder.
The layout design is a personal choice. For e.g. if target device is in portrait mode you need to define 12 columns each with a width of 40px and margin of 20px these variables can be changed as per the requirements.
This can be repeated for each media query. Using media classes in the template these classes can be appended, pushed or pulled.
Don’t forget to add default valued files for browsers so that browser can interpret media queries.
The above code might look like
This is fine for prototyping and in order to achieve clean and maintainable code layouts needs to be used.
By using the layout classes templates become more maintainable and readable. Although templates provide readable code which is very tempting but it might outsize your code thus ending up with a heavy stylesheet. So, it’s better not to use layouts until browser support @extend directive.
MUELLER’s Helpers allows user to pull and push columns, append or prepend, show or hide some elements per media query.
Columns can be appended/prepended by extending the classes defined in the grid setup. Same concept applies to push/pull.
Moreover hiding and showing certain elements can be done by using classes like .hl-hide for hiding the element or .tp-show to show the elements.
So, far we were working on horizontal grids such as splitting screen into columns and adjusting the width on the basis of devices; but working on vertical dimension is also important such as line height and font size in order to preserve harmony.
As already discussed, there are a lot of grid systems available. You just need to find the one that fits into your needs. Though this article we tried to give you an idea about how you can achieve an adaptive website using MUELLER. Hope it was helpful!
