i would to test bourbon neat grid and i try actually to do a mobile first approach grid.
My structure look like:
#general
#header
.headHaut
.headBas
#content-global
#left-content
#content-inner
#right-content
#footer
My grid settings:
$mobile-size:em(320);
$tablet-size:em(720);
$desktop-size:em(1000);
// Bourbon Neat Breakpoints - règle le nombre de colonnes
$mobile: new-breakpoint(min-width $mobile-size 4);
$tablet: new-breakpoint(min-width $tablet-size 8);
$desktop: new-breakpoint(min-width $desktop-size 12);
My scss:
body #general{
//Approche mobile-first,réglage pour mobile
#include outer-container;
padding-top: 2em;
background: transparent;
#header{#include span-columns(4);}
#content-global{#include span-columns(2);}
#left-content{}
#content-inner{}
#right-content{}
#footer{#include span-columns(4);
#include background-size;}
#include breakpoint ($desktop) {/* //Dimensions pour les pc*/
background: transparent;
#header{#include span-columns(12);}
#content-global{#include span-columns(12);}
#left-content{#include span-columns(2 of 12);}
#content-inner{#include span-columns(8 of 12);}
#right-content{#include span-columns(2 of 12);}
#footer{#include span-columns(12);
#include background-size(auto);
}
}
#include breakpoint($tablet) {/* //Dimensions pour les tablettes*/
}
}
For example, i change background color depending on breakpoint, and on a pc screen, the color is override by the mobile one..but columns number is the right one...strange.
thanks for help
EDIT1: i need to specify the breakpoint to apply settings for mobile.Like this:
body #general{
//Approche mobile-first,réglage pour mobile
#include outer-container;
padding-top: 2em;
background: transparent;
#include breakpoint ($mobile){}
#header{#include span-columns(4);}
#content-global{#include span-columns(2);}
#left-content{}
#content-inner{}
#right-content{}
#footer{#include span-columns(4);
#include background-size;}
#include breakpoint ($desktop) {/* //Dimensions pour les pc*/
background: transparent;
#header{#include span-columns(12);}
#content-global{#include span-columns(12);}
#left-content{#include span-columns(2 of 12);}
#content-inner{#include span-columns(8 of 12);}
#right-content{#include span-columns(2 of 12);}
#footer{#include span-columns(12);
#include background-size(auto);
}
}
#include breakpoint($tablet) {/* //Dimensions pour les tablettes*/
#header{}
#content-global{}
#left-content{}
#content-inner{}
#right-content{}
#footer{}
}
}
but i get troubles with inside parts of the page.do i need to specify the container or just span columns mixin is enought ?
You need to make sure you #import 'neat-helpers'; before you declare your breakpoints. See the Getting Started instructions here: https://github.com/thoughtbot/neat#getting-started
Related
How do I make a fixed positioned element work with Neat grid system? box3 is an element with fixed position, I didn't give it a width because I want it to fit in the grid with span-columns(6) and shift(3), so it is centered. Anyway can make this happen? Any help would be appreciated.
.test {
#include outer-container;
#include padding(15px);
border: 1px solid red;
.box1 {
#include span-columns(6);
border: 1px dashed green;
height: 100px;
}
.box2 {
#include span-columns(6);
#include omega;
border: 1px dashed green;
height: 100px;
}
.box3 {
#include span-columns
background:red;
opacity:.5;
#include position(fixed);
padding:30px;
color:white;
}
Live code is here
Your live code does not reflect what you have above.
As for the fixed positioning breaking the grid, fixed positioning is always relative to the window, not an element.
To fix, put a wrap inside of your ".box3" class, position that fixed, and give "box3" a height.
Using:
susy (2.0.0.alpha.6)
sass (3.3.0.rc.2)
compass (1.0.0.alpha.17)
with the following SCSS:
$susy: (
columns: 12,
column-width: 5em,
gutter-width: 1em,
gutter-position: after,
grid-padding: gutter-width,
);
$small: 36em;
$medium: 50em;
$large: 65em;
.hlt-container{
#include at-breakpoint($small) {
#include span(6);
#include nth-omega(2n);
margin-bottom: gutter(12);
}
#include at-breakpoint($small $large) {
&:last-child:nth-child(odd){
float: none;
clear: both;
margin-right: auto;
margin-left: auto;
}
}
#include at-breakpoint($large) {
#include span(4);
#include remove-nth-omega(2n,12);
#include nth-omega(3n);
margin-bottom: 0;
}
}
I first get the error:
error source/scss/style.scss (Line 10 of source/scss/01-molecules/02-blocks/_00-highlight-block.scss: Undefined mixin 'at-breakpoint'.)
If I remove the at-breakpoint styles, It moves on and chokes again on remove-nth-omega:
error source/scss/style.scss (Line 26 of source/scss/01-molecules/02-blocks/_00-highlight-block.scss: Undefined mixin 'remove-nth-omega'.)
I've searched through docs and Googled everything I could think of, but can't seem to find issues, like perhaps at-breakpoint and remove-nth-omega being deprecated with Susy Next.
EDIT:
If I change back to
compass (0.12.2)
sass (3.2.12)
susy (1.0.9)
(thank goodness for RVM & gemsets)
and revert the .scss to reflect older Susy syntax:
$columns: 12;
$column-width: 5em;
$gutter-width: 1em;
$gutter-position: after;
$grid-padding: $gutter-width;
$small: 36em;
$medium: 50em;
$large: 65em;
.hlt-container{
#include at-breakpoint($small) {
#include span-columns(6,12);
#include nth-omega(2n);
margin-bottom: gutter(12);
}
#include at-breakpoint($small $large) {
&:last-child:nth-child(odd){
float: none;
clear: both;
margin-right: auto;
margin-left: auto;
}
}
#include at-breakpoint($large) {
#include span-columns(4,12);
#include remove-nth-omega(2n);
#include nth-omega(3n);
margin-bottom: 0;
}
}
everything works fine.
if you want to use the old susy syntax then write:
// With Susy 2 installed...
#import "susyone";
instead of
// With Susy 2 installed...
#import "susy";
I had this same problem with at-breakpoint and once I switched over it was fine. > susy documentation
Yes, both of those mixins are being deprecated in Susy 2.0, so neither is available in alpha. We haven't built a clean upgrade path yet, but I promise there's one on the way.
I want to use susy for two nested grids. One that defines the page layout (menu on the left, content on the right) and one inside content.
Reason for that is that the content is created by a CMS where different templates can be used and I'd like to have the scss code together with the template. Using a fluid grid seems to solve exactly that problem:
<div class="page">
<div class="menu">
<ul><li>foo</li><li>bar</li></ul>
</div>
<div class="content">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>
#import "susy";
/* Outer Grid (Page Layout) */
$total-columns : 4;
$column-width : 1024px / $total-columns;
$gutter-width : 0px;
$grid-padding : 0px;
.page {
#include container;
.menu {
#include span-columns(1);
}
.content {
#include span-columns(3);
}
}
/* Inner Grid */
$total-columns : 1;
$column-width : 200px;
$gutter-width : 0px;
$grid-padding : 0px;
$container-style: fluid;
.page .content {
#include container;
.item {
#include span-columns(1);
}
#include at-breakpoint(3) {
#include container;
.item {
#include span-columns(1);
}
}
}
My problem is the $column-width: 200px; for the inner grid, as the generated media query uses min-widht: 600px, although at this point there is only 75% width available.
What's the best way to implement this?
The container mixin doesn't do anything useful in a nested context. It sets a max-width and auto margins (for page centering) - both of which are already taken care of by your outer container.
I also recommend against 1-column grids. Start with your smallest useful grid (3), and just don't use the columns until you get past your mobile breakpoint.
It will become more clear in Susy 2.0, but column and gutter widths are mainly used to create a ratio - so the units you use don't matter much if you want to set them based on container width. That may sound confusing, but here's how I would achieve what you want:
$total-columns : 4;
$column-width : 200px;
$gutter-width : 0px;
$grid-padding : 0px;
$container-width: 1024px;
Based on those settings, Susy creates 4 columns without gutters, divided evenly from the available 1024px container-width. Since you set the $container-width, Susy is using $column-width and $gutter-width to determine a ratio - and since one side of that ratio is 0, it doesn't matter what the other side is, as long as it's something. The other use of those values is for calculating breakpoints. We'll see that a bit later. Now you can do your things:
.page {
#include container;
.menu {
#include span-columns(1);
}
.content {
#include span-columns(3 omega);
}
}
and:
.page .content {
.item {
// Elements span the full width by default, so nothing is needed in mobile view.
#include at-breakpoint($total-columns) {
#include span-columns(1,3);
#include nth-omega(3n);
}
}
}
The settings for the outer grid work just fine for the inner grid as well. They aren't actually different grids, just elements nested inside other elements.
I have a navigation bar, where the buttons have a hover state but also need to be "active" on their respective page. Since this navigation bar is part of an include, I decided to do the active state via a class on the body tag, as in .dashboard .dashboard-button. So I have the hover and this.
I was trying to figure out the most streamlined way to do this with Sass/Compass. I created a couple of mixins:
#mixin nav-button-on($icon) {
background-color: #2f3684; // Old browsers
#include filter-gradient($offwhite, #E5E5E5, vertical); // IE6-9
#include background-image(url('../images/'+$icon+'-on.png'),linear-gradient(top, $offwhite 0%, #E5E5E5 100%));
border-bottom: $borderbottom solid #F31A35;
a { color: $red;}
}
#mixin nav-button($icon){
background-color: #fff; // Old browsers
#include filter-gradient(#fff, #fff, vertical); // IE6-9
#include background-image(url('../images/'+$icon+'.png'),linear-gradient(top, #fff 0%, #fff 100%));
}
And then in the LI where the buttons are defined, I have
li {
&.dashboard {
#include nav-button('dashboard');
}
.dashboard &.dashboard {
#include nav-button-on('dashboard');
&:hover {
#include nav-button-on('dashboard');
}
}
}
HTML:
<body class="dashboard">
<div id="nav">
<ul>
<li class="first dashboard">Dashboard</li>
<li class="challenges">Challenges & Teams</li>
<li class="goals">Goals</li>
<li class="activity">My Activity</li>
<li class="destinations">Destinations</li>
<li class="fitness last">Fitness Resources</li>
</ul>
</div>
This seems a bit convoluted, I was wondering if anyone had any advice to streamline this at all.
NOTE: I had to add the white-to-white gradient, since when hovering over a solid-color background with the gradient hover state caused a flash.
There are a number of things to improve here:
Are you really dealing with that hierarchy of dashboard classes? For example, you're currently compiling to:
li.dashboard {
...
}
li .dashboard li.dashboard {
...
}
This seems wrong or at least poorly structured. Perhaps you could simplify things here.
Assuming you need this for each of your nav <li> elements, DRY it up with an iterated mixin:
li {
#each $item in dashboard, challenges, goals, activity, destinations, fitness {
&.#{$item} {
#include nav-button($item);
}
.#{$item} &.#{$item} {
#include nav-button-on($item);
&:hover {
#include nav-button-on($item);
}
}
}
}
But #2 is not actually the best way. Use placeholders rather than mixins for this kind of stuff, or combine the two. I'd do something like this:
%nav-button {
background-color: #fff; // Old browsers
#include filter-gradient(#fff, #fff, vertical); // IE6-9
}
%nav-button-on {
background-color: #2f3684; // Old browsers
#include filter-gradient($offwhite, #E5E5E5, vertical); // IE6-9
border-bottom: $borderbottom solid #F31A35;
a { color: $red;}
}
#mixin li-image($icon) {
#include background-image(url('../images/'+$icon+'.png'),linear-gradient(top, #fff 0%, #fff 100%));
}
#mixin li-image-on($icon) {
#include background-image(url('../images/'+$icon+'-on.png'),linear-gradient(top, $offwhite 0%, #E5E5E5 100%));
}
#each $item in dashboard, challenges, goals, activity, destinations, fitness {
body.#{$item} li, li.#{$item}:hover {
#extend %nav-button-on;
#include li-image-on($item);
}
li.#{$item} {
#extend %nav-button;
#include li-image($item);
}
}
Compare the outputs and maintainability of these and I think you'll find this quite a bit more streamlined!
You have a wrong } after #include nav-button('dashboard');
try it:
li {
&.dashboard {
#include nav-button('dashboard');
.dashboard &.dashboard {
#include nav-button-on('dashboard');
&:hover {
#include nav-button-on('dashboard');
}
}
}
}
Getting my feet wet with Susy/sass/haml etc (using adjusted middleman - with latest susy from master branch)
Have this in grid.css.scss
#import 'susy';
$total-columns : 8;
$column-width : 4em;
$gutter-width : 0em;
$grid-padding : $gutter-width;
$break-max : 12;
$container-style: magic;
// Container
.page {
#include container($total-columns, $break-max);
}
// Layout
.header {
#include at-breakpoint($break-max) {
#include pad(1,1);
}
}
.pagenav {
clear: both;
#include at-breakpoint($break-max) {
#include pad(1,1);
}
}
.main {
clear: both;
.main-left {
#include span-columns($total-columns omega);
#include at-breakpoint(10) {
#include span-columns(7);
}
}
.main-right {
#include span-columns($total-columns omega);
#include at-breakpoint(10) {
#include span-columns(3 omega);
}
}
#include at-breakpoint($break-max) {
#include pad(1,1);
}
}
.footer {
clear: both;
#include at-breakpoint($break-max) {
#include pad(1,1);
}
}
this snippet comes from site.css.scss
.main {
background-color: #eee;
}
.main-left {
background-color: #fff;
}
.main-right {
background-color: #eee;
}
.body background is black...
Now when content in main-left is larger than main-right I see a black square on the bottom right...
Any way I can make that bottom right #eee i.o.w. main-right the same height (dynamic) as main-left - or have the .main background to apply...???
Thanks
Peter
PS Somebody with more credits should make a Susy tag in stackoverflow...
#main {
display: table;
background-color: #eee;
}
.main-left,
.main-right{
display: table-cell;
vertical-align: top;
}
.main-left {
background-color: #fff;
}
.main-right {
background-color: #eee;
}
This will make the two divs match each other as if they were adjacent table cells.
Don't worry, this doesn't qualify as using tables for layout, it's cool for columns, and it's not caused me any problems.
Of course, shitty old browsers don't support it, but you could use a .js script like ie9.js to patch it where necessary.