I am trying to make a responsive website based on the Bourbon Neat grid. My media queries work perfectly when I am resizing the browser on my own computer to the size of a phone, yet when I load the site on my phone, none of the mobile changes appear.
I have the following code at the moment:
// Breakpoints
$mobile: new-breakpoint(max-width 480px, 12);
$landscape: new-breakpoint(max-width 780px min-width 481px, 16);
$desktop: new-breakpoint(min-width 781px);
/***************
ONBOARDING
***************/
.onboarding {
#include media($mobile) {
#include span-columns(10);
#include shift(1);
}
#include media($landscape) {
#include span-columns(9);
#include shift(4);
}
#include media($desktop) {
#include span-columns(8);
#include shift(8);
}
}
Is there anything else I need to include in order to make this work?
Seems like you're forgetting the viewport meta tag.
Try adding this to your html head:
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
i am able to reorder content using shift(+2). But i am unable to reorder if i have to place column down to second row...
Here is what i am doing...
2 columns left and right, and using shifts in mobile view i do right to left and left to right but when i do shifts they go off screen like margin-left:100% will not make it come to second row.. How can i achieve that?
thanks.
here is the code
html
<div class="mainContainer redbordered">
<div class="leftCont">Left </div>
<div class="rightCont">Right</div>
</div>
And Sass
#include media($mobile) {
#include span-columns(10 of 10);
#include shift(+10);
}
#include media($tablet) {
#include span-columns(5 of 10)
}
#include media($laptop) {
#include span-columns(5 of 10)
}
#include media($large-desktop) {
#include span-columns(5 of 10)
}
}
.rightCont
{
padding:20px;
font-size:22px;
background-color: crimson;
#include media($mobile) {
#include span-columns(10 of 10);
#include shift(-10);
}
#include media($tablet) {
#include span-columns(5 of 10)
}
#include media($laptop) {
#include span-columns(5 of 10)
}
#include media($large-desktop) {
#include span-columns(5 of 10)
}
}
Thanks..
Shifting something that has #include span-columns(10 of 10) on it doesn't really make sense, as shifting only works inside a single row.
If I understand your example correctly, you don't really need shifts. You can also remove the #include span-columns(10 of 10) on mobile, as elements will collapse naturally there. You then just set column sizes (5 of 10) to both elements on wider breakpoints (tablet, desktop, ...) and you should get the desired behaviour.
Here's a really simple codepen example. You can ignore most of the CSS, as it's just copy-pasted Neat, the styling I wrote starts on line 539. Try resizing it to see if this is what you're trying to achieve.
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.
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 trying to create a sprite mixin, based on the compass sprite mixins for SCSS.
The trouble is that the image is loading multiple times. One for each unique call of the image (so each new class name that refers to the sprite)
Here is the SCSS I am using. First we call the compass mixins:
$sprite-default-size:29px;
#import "compass/utilities/sprites/sprite-img";
Then I create my own mixin, designed to accept a column of images, with hover states to the right of each image:
$icons: "/assets/icons/socialMediaSprite.png";
#mixin verticalHoverSprite($row){
#include sprite-img("/assets/icons/socialMediaSprite.png",1,$row);
&:hover{
#include sprite-img($icons,2, $row);
}
}
The I use the apply the mixins to each required class:
.socialMediaLink{
#include verticalHoverSprite(1);
&.facebook{
#include verticalHoverSprite(2);
}
&.twitter{
#include verticalHoverSprite(3);
}
}
Here is the HTML I am attaching the images to:
<span class="socialMediaLink"></span>
<span class="facebook socialMediaLink"></span>
<span class="twitter socialMediaLink"></span>
Screen shot from Chrome network panel, which shows the image loading three times:
Check that caching is not disabled in your browser (it can be disabled from about v17).
Another idea is you include your image only once:
background: url(yourimage.png) no-repeat;
And then only change it's position with CSS without including the image again:
background-position: 0px 100px;
I guess you are trying to do this way I would just suggest not to include the image for every class, change only the position.
RynoRn was correct, but I thought his answer needed expanding to be specific to Compass SCSS, and not just CSS.
To fix it using compass and scss, I changed the code from the question to the following:
The mixin now has no reference to the image, just changes the position:
#mixin verticalHoverSprite($row){
#include sprite-position(1, $row);
&:hover{
#include sprite-position(2, $row);
}
}
and we add the background image to the socialMediaLink class:
.socialMediaLink{
#include sprite-background("/assets/icons/socialMediaSprite.png");
#include verticalHoverSprite(1);
&.facebook{
#include verticalHoverSprite(2);
}
&.twitter{
#include verticalHoverSprite(3);
}
}