I am using Susy .
I was not able to use a content based approach and decided to go to window-px-width-first
At first I tried the content-first approach to grids, but I soon found that my site was behaving unexpectedly on different devices. It displays a mobile layout where I need a tablet, etc. I ended up setting em values for Susy parameters so that they match specific screen widths (pixel values). The code turned out to be ugly, and I realized that I no longer used a content-based approach.
Here is a static snapshot of the main page of the site that I created using this erroneous approach, and a snapshot of its code .
So, I decided to completely abandon the content-first approach and use the px values in the first place.
Before writing code, I formulated requirements for my grid
First of all, I grouped various devices according to the size of their screen. Then I came up with px values for breakpoints that are most suitable for these device groups:
Break- Layout Number of Common points name columns usage (px) (sample) 0 ┬ │ │ S 1 Smartphones-portrait, old phones │ 400 ┼ │ M 2 Smartphones-landscape 600 ┼ │ L 3 Tablets-portrait 800 ┼ │ XL 4 Tablets-landscape, netbooks 1000 ┼ │ XXL 5 Laptops, desktop computers 1200 ┼ ↓
I believe the following assumptions / requirements:
Window-px-width is the first approach (described above).
$ container style is fluid. When the width of the screen is somewhere between two breakpoints, the width of the containers is automatically adjusted to match the larger breakpoint. The number of columns in the layout does not change and corresponds to the lower breakpoint.
The last breakpoint is the maximum width of the container. The site will not stretch further; instead, it will have additional gutters.
Moving first. Start with layout “S” and redefine it with other layouts as the screen expands.
After much deliberation, my approach moved on to the next code.
(This code is a synthetic example. I took excerpts from my actual code and made some changes so that it might skip something or have inconsistencies.)
<div id="header-wrapper"> <header id="header"> ... </header> </div> <div id="main-wrapper"> <div id="main"> <article id="content">...</article> <aside id="sidebar">...</aside> </div> </div> <div id="footer-wrapper"> <footer id="footer"> ... </footer> </div>
///////////// // Variables ///////////// $development: true // This enables susy-grid-backgrounds and outlines // Breakpoints $bp-sm: 400px $bp-ml: 600px $bp-l-xl: 800px $bp-xl-xxl: 1000px $max-width: 1200px // Columns $cols-s: 1 $cols-m: 2 $cols-l: 3 $cols-xl: 4 $cols-xxl: 5 // Layouts // $layout-s is not necessary due to a mobile-first approach $layout-m: $bp-sm $cols-m $layout-l: $bp-ml $cols-l $layout-xl: $bp-l-xl $cols-xl $layout-xxl: $bp-xl-xxl $cols-xxl // Default grid settings $total-columns: $cols-s $column-width: 85% $gutter-width: 100% - $column-width $grid-padding: 1em $container-width: 100% $container-style: fluid +border-box-sizing ///////////// // Mixins ///////////// // A couple of mixins to open the developer third eye =dev-outline @if $development outline: 1px solid red =dev-grid-bg +dev-outline @if $development +susy-grid-background // A custom container declaration =standard-container +container // ← An actual line of Susy code, yay! :D // This whole post is actualy an attempt to make use of it. max-width: $max-width +dev-grid-bg +at-breakpoint($layout-m) +set-container-width +dev-grid-bg +at-breakpoint($layout-l) +set-container-width +dev-grid-bg +at-breakpoint($layout-xl) +set-container-width +dev-grid-bg +at-breakpoint($layout-xxl) +set-container-width +dev-grid-bg ///////////// // Backgrounds ///////////// // The wrapper divs are necessary for screen-wide backgrounds html background: url('../images/main-background.png') // also repeat, color, this kind of stuff #header-wrapper background: url('../images/header-background.png') #footer-wrapper background: url('../images/footer-background.png') ///////////// // Containers ///////////// // Actually declared in separate SASS files #header, #main, #footer +my-container ///////////// // Columns ///////////// // An example of declaring columns $cols-sidebar: 1 #sidebar-first +dev-outline +at-breakpoint($layout-l) +span-columns($cols-sidebar, $cols-l) +at-breakpoint($layout-xl) +span-columns($cols-sidebar, $cols-xl) +at-breakpoint($layout-xxl) +span-columns($cols-sidebar, $cols-xxl) #content +dev-outline +at-breakpoint($layout-l) +span-columns($cols-l - $cols-sidebar omega, $cols-l) +at-breakpoint($layout-xl) +span-columns($cols-xl - $cols-sidebar omega, $cols-xl) +at-breakpoint($layout-xxl) +span-columns($cols-xxl - $cols-sidebar omega, $cols-xxl)
Here is a static snapshot of the main page of the site I created using this approach, and a snapshot of its code .
Questions
Following the first method of window-px-widths-first, I intentionally make a decision and ask the following questions. I appreciate your arguments for the content - first, but please do not limit yourself to the fact that I'm wrong, answer the following questions regarding window-px-width-first.
Is my approach an elegant way to make windows-px-width-first with Susy or is this an ugly piece of code?
How to make the code more graceful?
I don't like the many breakpoint declarations that I have to repeat for each container and each column. I could only think of using the poorly documented ability to set multiple layouts for +container . But while +set-container-width not the only code I do in every media request, even this idea is not an option. :(
What is the recommended way to transition window-px-width first with Susy (and satisfying the requirements described above)?
Please report any flaws in my code that you find. I'm new to SASS, and I'm sure you can offer more efficient ways to do the same.