Geekly Articles each Day
📜 ⬆️ ⬇️

Sass maps: responsive design without routine computing

Foreword


Having received a regular psd file at my disposal, I already knew the list of requirements for the future site, in one of the points of which there was a responsive design. I started working on it with the layout of the main page and at the same time I thought it would be good not to use the well-known formula (target / context * 100 = result) given in Ethan Marcott’s book “Responsive Web Design”, but write the width of each block immediately. in pixels, pre-measuring it in Photoshop, while getting everything in percent. The thought seemed to me quite good and I decided to google and try to find something on the question that interests me, but, unfortunately, I did not manage to find something useful. Well, well, I thought, since there is nothing ready to help me, then you need to do it yourself. In this question, I relied on the Sass preprocessor, which has repeatedly helped me avoid unnecessary headaches and lines of code. In addition, I already knew about the existence of new data types in Sass such as lists and maps. The first was not interesting to me, but without the last, my idea would have failed. The main idea was that I know the width of each block and the sum of widths of blocks with one nesting level is 100% and if the preprocessor allows me to process this data in the right way, then setting the width in pixels, I could get it in percent without worrying about calculations.

Let's get started


For greater clarity, I made a conditional prototype of the page.

For example, from the prototype it is clear that the block with the main-content class is at the same nesting level with the block having the sidebar class, therefore the sum of their widths is 100%. It is also worth noting that the nested blocks are “ugly” width and I would not be able to avoid formula calculations using the old scheme. Let's reflect this structure in HTML:

<html> <head></head> <body> <section class="page-wrap"> <header></header> <section class="main"> <section class"main-content"> <div class="article-feature"></div> <div class="article-listing"></div> </section> <aside class="sidebar"></aside> </section> <footer> <div class="social-list"></div> <div class="partners-list"></div> <div class="subscribe"></div> </footer> </section> </body> </html>

To simplify the visual comparison of the site with the layout, let's set the width of the block with the page-wrap class the same as in Photoshop. In the end, do not forget to change the value from pixels to percentages, but you will not see a responsive site.

 .page-wrap { width: 1021px; }

It is known from what was said earlier that the sum of widths of blocks with the classes main-content and sidebar is 100% and one could proceed to the calculations, but first we need to group this data, then the previously mentioned data type maps will help us.
') 
 $main: (main-content: 705, sidebar: 316);

Now you can write a small mixin, which will be occupied directly by calculations.

 @mixin grid($grid) { $totalWidth: 0; @each $className, $width in $grid { $totalWidth: $totalWidth + $width; } @each $className, $width in $grid { .#{$className} { width: (#{$width / $totalWidth * 100}) + '%'; } } }

Call our newly created mixin, passing it the $ main variable.

 @include grid($main);

Now open the file with the css-generated styles, we see the width we need so much as a percentage.

 .main-content { width: 69.04995%; } .sidebar { width: 30.95005%; }

Similarly, we calculate the widths for the block with the main-content class and the footer block.

 $mainContent: (article-feature: 493, article-listing: 212); @include grid($mainContent); $footer: (social-list: 234, partners-list: 553, subscribe: 234); @include grid($footer);

Content of css file:

 .article-feature { width: 69.92908%; } .article-listing { width: 30.07092%; } .social-list { width: 22.91871%; } .partners-list { width: 54.16259%; } .subscribe { width: 22.91871%; }

findings


Of course, this small mixin is not a silver bullet and is not intended to solve all the problems with page layout, but as a solution to a particular case, it is quite suitable. I hope that he will at least ease the work of the web designers and reduce the time spent on routine calculations.

PS In order to work with the maps type, compass version 1.0.0 is required.

Source: https://habr.com/ru/post/231281/

More articles:


All Articles