How to Do Mobile First with Bourbon Neat Framework

Best way to support mobile first for IE8 without script?

I've written a solution for this myself. All you need is two different CSS files (one for modern browsers and one for older IE browsers) and a cleaver mixin.

Create a second SASS file which Compass can watch and call the file something like oldIE.scss. Copy all the imports from you original SASS file (styles.scss or whatever) to this file. Then put a new variable in both of them: $compile-IE. Set the values like this:

styles.scss

$compile-IE: false;

@import "all your other imports"

oldIE.scss

$compile-IE: true;

@import "all your other imports"

Compass will now create two different CSS files for you. You can place them in the HEAD of your Markup like this:

<link type="text/css" href="styles.css" rel="stylesheet" media="all" />
<!--[if (gte IE 6) & (lte IE 8)]>
<link type="text/css" href="oldIE.css" rel="stylesheet" media="all" />
<![endif]-->

Once you have the two files in place, you can start writing SASS with your breakpoints thanks to the following mixin:

// ----- Media-queries ----- // 
$breakpoints: S 480px, M 600px, L 769px;

@mixin bp($bp) {
// If compile-IE is true (IE8 <=) then just use the desktop overrides and parse them without @media queries
   @if $compile-IE {
      @content;
   }
   // If compile-IE is false (modern browsers) then parse the @media queries
   @else {
      @each $breakpoint in $breakpoints {
         @if $bp == nth($breakpoint, 1) {
            @media (min-width: nth($breakpoint, 2)) {
               @content;
            }
         }
      }
   }
}

Call the mixin as following:

p {
   color: blue;
   font-size: 16px;
   @include bp(L) {
     font-size: 13px;
   }
}

Now, if the variable $compile-IE is false (for modern browsers) the output will be this:

p {
  color: blue;
  font-size: 16px; }
  @media (min-width: 768px) {
    p {
       font-size: 13px; 
  } 
}

And when the variable $compile-IE is true (for older IE versions) the output will be this:

p {
  color: blue;
  font-size: 16px;
  font-size: 13px; 
}

Because the font-size: 13px is the parsed after the font-size: 16px the styles used for larger viewports (like bp L) will override the default mobile styling.

Hope this will help for you! :)

Bourbon Neat still using 12 columns even when guides show 4 columns

It turns out the issue was due to not using @include span-columns(4) on the div within the breakpoint that changes the number of columns ($phone-portrait: new-breakpoint(max-width $tiny-screen 4);). At first this seemed odd, until I understood what was actually going on. When I was setting the div to span 4 columns, neat takes the number of columns and divides them by the total number of columns at the current breakpoint. In my case this would be 0.333, which is then used as the width percentage of the div. The thing is, this doesn't ever change, even if the total number of columns later changes do a breakpoint. My div is always going to be 33.3% wide. What I need to do is repeat the span-columns include inside the media selector for the breakpoint, like this:

$phone-portrait: new-breakpoint(max-width $tiny-screen 4);

.my-div {
  @include span-columns(4);
}

@include media($phone-portrait) { 
    .my-div {
      @include span-columns(4);
    }
}

This ensures my div will be 100% wide on for the $phone-portrait breakpoint.

Vary outer-container size with Bourbon Neat

Something like the following may work:

$large-screen:  new-breakpoint(max-width 1200px 12);
$medium-screen: new-breakpoint(max-width  992px 12);
$small-screen:  new-breakpoint(max-width  768px  6);

@mixin bootstrap-container {
    @include outer-container;
    @include media($large-screen)  { max-width: 1170px; }
    @include media($medium-screen) { max-width:  970px; }
    @include media($small-screen)  { max-width:  750px; }
}

Then just use the mixin as follows:

#foo {
    @include bootstrap-container;
}

I'm interested to hear your feedback.

Bourbon Neat ignoring 'omega' in media query

The problem is that when the $desktop media query takes effect, it doesn't undo the $tablet omega mixin. So at $desktop your :nth-child(3n) has no right margin and 3n+1 is cleared left, but 2n still has no right margin and 2n+1 is still cleared left as well.

You might need to edit your media queries to include a max-width value on the $tablet query as well. With the em() mixin that's not so much of a pain since you can do something like:

$tablet:     em(768);
$tablet-max: em(959);
$desktop:    em(960);

Things could get confusing if you continue naming the media query variable the same as the breakpoint width, so I'd suggest something like $mq-tablet.

Alternatively, you could use Flexbox and span-columns() with the "block-collapse" display property. This might require some additional tweaks to the markup depending on your design.

On a general note, please include a full working demo of the problem to help in solving it.

Neat (Bourbon) compilation issues with webpack.config.js

The issue was that in my _layout.sass, sass syntax for indentation is without the curly brackets http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html

---

Related Topics