This content originally appeared on Zell Liew and was authored by Zell Liew
Sometimes, there is a need to repeatedly declare new layouts as a project goes along. As more layouts gets declared, it can get quite difficult to manage and change these layouts when the need arises.
Because of this, I’ve been toying with the idea of consolidating different kinds of layouts into a sass map and calling the maps with Susy. Thankfully, I managed to hit onto something decent recently. This post shares my method for organizing layouts with Susy
Overview of the method
The very first requirement that I had was that the Sass map could house different layouts for various responsive breakpoints, and the layouts themselves must be easily differentiatable.
$layouts: (
name-of-layout: (
breakpoint-1: full,
breakpoint-2: 9 of 12
)
)
In each layout, I was able to add a breakpoint argument and allow it to take any number of keywords that form the span() mixin that susy provides.
In addition to this, I would like to be able to recursively get futher layouts within layouts themselves.
Here’s an example of what I mean.
$layouts: (
content: (
med: full,
large: 9 of 12
gallery: (
small: full
large: 3 of 9
)
)
)
In this case, wouldn’t it be great if we could write something like @include get-layout(content large) or @include get-layout(content gallery large) and Susy will create that content block automatically?
When doing responsive layouts, this makes it as easy as the following:
.content {
@include get-layout(content med);
@include breakpoint(large) {
@include get-layout(content large);
}
}
This makes a ton of semantic sense and it could be reused for other areas if required.
Turns out, its relatively simple to accomplish.
Setting the method up
3 things are required for setting this up. The first is obviously the layouts map I mentioned above.
$layouts: (
content: (
med: full,
large: 9 of 12
),
sidebar: (
med: full,
large: 3 of 12
),
);
The second requirement is the map-fetch function found here.
The third and final requirement is to construct a get-layout function and mixin so you could use it just like how you’ll use a span mixin or function.
@mixin get-layout($args, $map: $layouts) {
@include span(map-fetch($map, $args));
}
@function get-layout($args, $map: $layouts) {
@return span(map-fetch($map, $args));
}
That’s all you need to create a neatly organized sass map packed with the juicy Susy features.
Using the method
Once you setup the mixins and functions, using it is as simple as calling the key to the map you’re trying to use.
Once again, here’s a quick example of how to use it.
.content {
@include get-layout(content med);
@include breakpoint(1200px) {
@include get-layout(content large);
}
}
You might want to create a separate map for the breakpoints so large = 1200px and you can write the keyword instead, but thats another topic.
If you use this or have an improvement to make, let me know what you think!
This content originally appeared on Zell Liew and was authored by Zell Liew
Zell Liew | Sciencx (2014-05-12T00:00:00+00:00) Neatly Organized Layouts with Sass Maps and Susy. Retrieved from https://www.scien.cx/2014/05/12/neatly-organized-layouts-with-sass-maps-and-susy/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.