I'm using bourbon neat for the first time and it's not behaving exactly how I would expect - which probably means I've set things up wrong.
I'm developing mobile-first, so I would expect my layout to remain the same between my desktop breakpoint and my larger breakpoint (for the styles to cascade to the next breakpoint). However, my layout jumps back to the mobile layout unless I redefine the styles again in the larger breakpoint.
Here is how I've defined my breakpoints in my base/_grid-settings.scss:
// Neat Overrides
$grid-columns: 4;
$max-width: 90%;
// Breakpoints
$first-breakpoint-value: 641px;
$second-breakpoint-value: 1024px;
$third-breakpoint-value: 1440px;
$fourth-breakpoint-value: 1920px;
$tablet: new-breakpoint(min-width em($first-breakpoint-value) max-width em($second-breakpoint-value) 8 );
$desktop: new-breakpoint(min-width em($second-breakpoint-value + 1) max-width em($third-breakpoint-value) 12 );
$large: new-breakpoint(min-width em($third-breakpoint-value + 1) max-width em($fourth-breakpoint-value) 12 );
$xlarge: new-breakpoint(min-width em($fourth-breakpoint-value +1) 12 );
Then my element looks like this:
.container {
#include outer-container;
.swatch {
// mobile styles (here my swatch has a width of 100%)
border: 1px solid #000;
text-align: center;
margin-bottom: $gutter;
//MEDIA QUERIES
#include media($tablet) {
#include span-columns(4);
#include omega(2n);
}
#include media($desktop) {
#include span-columns(3);
#include omega(4n);
padding: 2em -0px;
}
#include media($large) { }
#include media($xlarge) { }
}
}
Now I was expecting the styles from my $desktop media query to cascade all the way up to the $xlarge media query, however currently the .swatch element jumps back to being 100% of it's parent container at the $large and $xlarge breakpoints.
What have I done wrong?
I shouldn't need to keep repeating the same code for every breakpoint if I want the styles to cascade up.
You are defining a media query range, which is why it is snapping back to the mobile view in between.
Remove the max value from your breakpoint and the values will cascade up to desktop.
Im not too familiar with neat but the following should work:
$tablet: new-breakpoint(min-width em($first-breakpoint-value) max-width em($second-breakpoint-value) 8 );
becomes:
$tablet: new-breakpoint(min-width em($first-breakpoint-value) 8);
Hope this helps you or any one else reading this post, I had a similar issue and found this handy omega reset mixin.
http://www.joshfry.me/blog/2013/05/13/omega-reset-for-bourbon-neat
Thanks #nickspiel - that was half the answer! You are correct, adding min-with only breakpoints is the way to get the styles to cascade up the breakpoints. Doing that with Bourbon Neat and an element that is using omega is a bit more tricky.
It seems that I have 2 choices:
Use media query splitting, as per the docs, but then you need to set styles for every breakpoint.
Use your suggestion of min-width breakpoints in conjunction with an Omega reset - I'm going with this option.
Related
I need to use bootstrap 12 columns grid to get a responsive form based on the parent div's size.
As an exemple, whatever the size of the screen, the content need to see the div A's width and base the bootstrap's responsive design on that width.
My goal is to base my responsive design on the size of a modal window (in dhtmlx). If the user resize the modal window, the row should follow the rules (e.g. col-xs-12, col-sm-6, etc, but based on the size of the modal window, not the screen).
This fiddle show a modal window with some bootstrap form inside. I need the form to be responsive to the size of the modal form, not the screen size.
class="col-xs-12 col-sm-6"
As #makshh mentionned in the comment, it does not seem to be possible to do this right now. The only way I found is from another stack overflow question by #tsdexter:
$(document).ready(function(){
$('.somecontainer').on('resize',function(){
if ($('.somecontainer').width() < 640) {
$('.somecontainer').addClass('m');
} else {
$('.somecontainer').removeClass('m');
}
});
});
I just managed to make the grid system inside a modal act responsive to the modal's breakpoints in Bootstrap 4 with scss. Since the modal's max-width is responsive itself on some breakpoints, we need to generate new css on those breakpoints for that specific modal size (sm, md, lg, xl) which just overrules the Bootstrap's css media queries
Just copy/paste everything into a separate scss file, activate it and you are good to go
// This is a stripped version of the original "make-grid-columns" mixin from Bootstrap
#mixin make-modal-grid-columns($breakpoints) {
#each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
#include media-breakpoint-up($breakpoint, $breakpoints) {
#for $i from 1 through $grid-columns {
.col#{$infix}-#{$i} {
#include make-col($i, $grid-columns);
}
}
}
}
}
$breakpoint-sm: 576px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
.modal {
// Overrules all .col css inside .modal-sm to a single col
.modal-sm {
#include make-modal-grid-columns((
xs: 0
));
}
// modal-md (no specific class is also modal-md)
#include make-modal-grid-columns((
sm: $breakpoint-sm
));
.modal-lg {
#include make-modal-grid-columns((
md: $breakpoint-lg
));
}
.modal-xl {
#include make-modal-grid-columns((
md: $breakpoint-lg,
lg: $breakpoint-xl
));
}
}
FYI: it generates 350 lines of code
I'm not using Compass
I prefer to use Breakpoint.scss
I'm on susy 2.0
I know there are lot of posts with this question but I'm having 0 luck finding any regarding Breakpoint.scss and Susy 2.0 on this topic.
#import "susy";
#import "breakpoint";
$medium: 800px;
$susy: (
columns: 6,
gutters: 3/4,
gutter-position: split
);
#include breakpoint($medium) {
$susy: layout(12 1/4 split);
}
body {
#include container(show);
#include breakpoint($medium) {
#include container(show);
}
}
Do I have to use susy-breakpoint or can something like this be achieved?
I want 6 columns at anything at/below 800px and 12 at/above 800px
I'm trying to stay DRY so adding a susy-breakpoint in my styles does not help.
I've also tried below code but I think I just have an error somewhere cause it's not working.
$susy: layout(6 1/4 split);
$small: 400px, 6 1/4 split;
$medium: 800px, 8 1/4 split;
$large: 1000px, 12 1/4 split;
#mixin media($size) {
#include susy-breakpoint($size...) {
#content;
}
}
body {
#include container(show);
#include media($small) {
#include container(show);
}
// debugging. didnt work either
#include susy-breakpoint($small...) {
#include container(show);
}
}
I don't know what your media mixin does, so I can't really comment on anything related to that. Your initial example doesn't work because Sass, CSS, and therefor Susy, are not aware of the DOM - or relationships between media-queries. When you change the value of $susy inside one media-query, that does not propagate to all similar media-query contexts. Because of that, you do have to set both the media-query and the desired layout every time you want a breakpoint to change the layout context.
susy-breakpoint is not the only way to do that, but it is the shortest. Here's the longhand:
body {
#include container(show);
#include breakpoint(800px) {
#include with-layout(8) { // default is set to 8-columns
#include container(show);
} // default is returned to global setting
}
}
Your $small breakpoint currently doesn't change anything, because it is identical to your default layout. The larger ones will change the layout context for nested code — though you can simplify: Since `1/4 split' gutters aren't changing at all, they don't need to be re-stated at every breakpoint.
$susy: layout(6 1/4 split);
$medium: 800px, 8;
body {
#include container(show);
#include susy-breakpoint($medium...) {
#include container(show);
}
}
That will be identical to the longhand above.
I've been using bourbon neat to do a desktop first layout that worked fine.
However, I would like to do a mobile first versions, starting with mobile and working my way up. The default grid is 12 columns and for mobile I usually use a grid of 4. I tried changine my grid to 4 and scaling up to 12 but this didn't work.
Is there a better way to do mobile first other than creating the standard desktop layout, then putting a mobile media query into each CSS selector and starting with the mobile version and building up the way?
You should create new breakpoints with the new-breakpoint mixin from Neat. But instead of using max-width like they do in their examples, you can use min-width.
For example:
#import "bourbon/bourbon";
#import "neat/neat";
$mobile: new-breakpoint(min-width 0px 4);
$tablet: new-breakpoint(min-width 760px 8);
.main {
background: grey;
#include media( $mobile ) {
#include span-columns(4);
background: white;
}
#include media( $tablet ) {
#include span-columns(8);
background: black;
color: white;
}
}
In the example .main will have a white background and consist out of 4 columns. When the viewport is at least 760 pixels width, it will get a black background and span 8 columns.
To expand on Jorn's answer... you also need to set the $grid-columns variable to the mobile width number, as opposed to the desktop number that it is set as a default. This is what the _grid_settings.scss file looks like for a project I'm currently working on:
#import "../neat/neat-helpers";
// Neat Overrides
$column: golden-ratio(1em, 3);
$gutter: golden-ratio(1em, 1);
$grid-columns: 6;
$max-width: em(1280);
// Neat Breakpoints
$mobile-large-screen: em(480);
$tablet-small-screen: em(560);
$medium-screen: em(640);
$medium-large-screen: em(750);
$large-screen: em(860);
$x-large-screen: em(970);
$xx-large-screen: em(1088);
$super-large-screen: em(1280);
$mobile-large-screen-up: new-breakpoint(min-width $mobile-large-screen 6);
$tablet-small-screen-up: new-breakpoint(min-width $tablet-small-screen 6);
$medium-screen-up: new-breakpoint(min-width $medium-screen 12);
$medium-large-screen-up: new-breakpoint(min-width $medium-large-screen 12);
$large-screen-up: new-breakpoint(min-width $large-screen 12);
$x-large-screen-up: new-breakpoint(min-width $x-large-screen 12);
$xx-large-screen-up: new-breakpoint(min-width $xx-large-screen 12);
$super-large-screen-up: new-breakpoint(min-width $super-large-screen 12);
You can see I've created a lot of new breakpoints and I'm using 6 cols at mobile width as opposed to 4 in the original Neat settings (necessary for what I have going on in my project). You should tailor these settings to work for your own project. The takeaway though is that I'm overriding the $grid-columns variable and then creating my new breakpoints. Also, be sure to import your _grid_setting.scss BEFORE Neat...
#import "bourbon/bourbon";
#import "grid_settings";
#import "neat/neat";
I would scope out Chasers by Kenneth Ormandy. It's a little omega-reset(xn) include passing "xn" from the previous media-query's omega(xn). He provides plenty of documentation on the github repo and you can easily install it with Bower or NPM.
I am just atarting to use Susy
I have defined my layouts, I needed to start with the desktop version and add 2 more: one for tablets and one for phones:
$total-columns : 12;
$column-width : 4em;
$gutter-width : 1.4em;
$grid-padding : $gutter-width;
$phone: 4 35em;
$tablet: 35em 8 70em;
Seems to be working. My issues arise when there's a change I need to make to something that should appear in the desktop but not in EITHER of the other 2, I find myself repeating myself:
#my-div {
#include span-columns(3 omega,7);
#include at-breakpoint($tablet) {
display:none;
}
#include at-breakpoint($phone) {
display:none;
}
}
How can I simplify this?
In that instance, you don't need susy, you just need a basic CSS media-query with max-width 70em. the only reason for at-breakpoint is to get a media-query/layout change combination. Alternatly, add '$small: 8 70em;' and use that.
I recently implemented this technique with SASS 3.2 using #content blocks on a project I've been working on, and I've just gotten to the point where I need to include support for older browsers such as IE7 and 8.
Example:
.overview {
padding: 0 0 19px;
#include respond-to(medium-screens) {
padding-top: 19px;
} //medium-screens
#include respond-to(wide-screens) {
padding-top: 19px;
} //medium-screens
}
They both don't support media queries, and I've often handled this in the past by serving up all styles to these browsers when I had my media queries separated into separate partial files such as _320.scss, _480.scss and in my IE stylesheet loading them like so:
#import 320.scss;
#import 480.scss;
etc.
Which would load all styles, and always assign IE7 - 8 a 940px (or whatever the max width is) layout and styles. By nesting styles in SASS 3.2 inline like this, it eliminates the need for separate partial stylesheets, but totally screws up how I load styles for IE.
Any ideas or solutions on how to combat this? I could use a polyfill such as respond.js to force IE to use media queries, but would prefer to just serve up a non-flexible site to IE.
Any ideas on either how to best organize these files, or a better solution?
You can generate a separate stylesheet for IE<9 that contains everything your normal sheet has, but with flattened media queries based on a set width.
Full explanation here http://jakearchibald.github.com/sass-ie/, but basically you have this mixin:
$fix-mqs: false !default;
#mixin respond-min($width) {
// If we're outputting for a fixed media query set...
#if $fix-mqs {
// ...and if we should apply these rules...
#if $fix-mqs >= $width {
// ...output the content the user gave us.
#content;
}
}
#else {
// Otherwise, output it using a regular media query
#media screen and (min-width: $width) {
#content;
}
}
}
Which you'd use like this:
#include respond-min(45em) {
float: left;
width: 70%;
}
This would be inside all.scss, which would compile down to all.css with media queries. However, you'd also have an additional file, all-old-ie.scss:
$fix-mqs: 65em;
#import 'all';
That simply imports all, but flattens media query blocks given a fake width of 65em.
I use LESS for a lot of my work, but on larger projects, with many people working across files, I don't like using breakpoint files, such as 1024.less.
My and my team use a modular approach, such as header.less which contains all the code for just the header, including the associated breakpoints.
To get round IE problems (we work in a corporate environment), I use this approach:
#media screen\9, screen and (min-width: 40em) {
/* Media queries here */
}
The code inside the media query is always executed by IE7 and less. IE9 and above obeys the media queries like a proper browser should. The problem is IE8. To solve this, you need to make it behave like IE7
X-UA-Compatible "IE=7,IE=9,IE=edge"
I've found this doesn't always work if set in the metatags in the HTML, so set it using the server headers.
See the gist here:
https://gist.github.com/thefella/9888963
Making IE8 act like IE7 isn't a solution that works for everyone, but it suits my needs.
Jake Archibald has the best technique I've seen to date for achieving this. This technique automatically creates a separate stylesheet for IE, with all the same styles inside of your media queries but without the media query itself.
I also campaigned to get this technique built into the popular breakpoint extension for Sass, if you're interested in using that!
If you wanted to keep everything under one roof and only have a single http request for your older browser visitors you could do something like this
Setting up your initial respondto mixin
// initial variables set-up
$doc-font-size: 16;
$doc-line-height: 24;
// media query mixin (min-width only)
#mixin breakpoint($point) {
#media (min-width: $point / $doc-font-size +em) { #content; }
}
this will create a min-width media query and output your px value ($point) as an em value.
From this you'd need to create this mixin
#mixin rwdIE($name, $wrapper-class, $IE: true) {
#if $IE == true {
.lt-ie9 .#{$wrapper-class} {
#content;
}
.#{$wrapper-class} {
#include breakpoint($name) {
#content;
}
}
}
#else if $IE == false {
.#{$wrapper-class} {
#include breakpoint($name) {
#content;
}
}
}
}
Here if you pass a piece of Sass(SCSS) like this
#include rwdIE(456, test) {
background-color: #d13400;
}
it will return this code
.lt-ie9 .test {
background-color: #d13400;
}
#media (min-width: 28.5em) {
.test {
background-color: #d13400;
}
}
This will give you the you the IE and 'new browser' CSS in one file. If you write -
#include rwdIE(456, test, false) {
background-color: #d13400;
}
You will get -
#media (min-width: 28.5em) {
.test {
background-color: #d13400;
}
}
I hope this helps, I've got this on a codepen here too - http://codepen.io/sturobson/pen/CzGuI
There is a CSS3 Mixin I use that has a variable for IE filters. You could do something similar by having a global variable, $forIE or something, wrap the media query mixin within an if and then generate the stylesheet with or w/o the queries.
#if $forIE == 0 {
// Media Query Mixin
}
Or use the #if to import a 3rd scss (_forIE.scss?) that will override things with your IE specific styles.