I just started using compass blueprint and I'm making a simple frame with the following:
$blueprint_grid_columns: 12;
$blueprint_grid_width: 60px;
$blueprint-grid-margin: 20px;
#import "blueprint";
.frame {
#include container;
.header{
#include column(12);
background:#000;
height:100px;
}
.left_bar{
#include column(1);
background:#ccc;
height:450px;
}
.content{
#include column(10);
background: #000;
height:450px;
}
.right_bar{
#include column(1);
backgrounf:#ccc
height:450px;
}
}
Html:
<body>
<div class='frame'>
<div class='header'>
</div> <!-- end header -->
<div class='left_bar'>
</div> <!-- end left_bar -->
<div class='content'>
</div> <!-- end content -->
<div class='right_bar'>
</div> <!-- end right_bar -->
</div> <!-- end frame -->
</body>
The right_bar isn't fitting into the space for the last column but rather appearing exactly under the left_bar. Can anyone tell me why? Any help greatly appreciated.
C
I think you have to add true to the header and right_bar classes:
.header{
#include column(12, true);
....
.right_bar{
#include column(1, true);
This lets compass know that it's the last column, and that the margin needs to be zeroed out.
I figured that out. I added some borders that pushed the grid out of whack a bit. I fixed it by overriding widths but it seems a bit hacky. Is there a blueprint way to take borders into account?
Related
.test {
#include flex-grid-row();
.eight { #include flex-grid-column(8); }
.four { #include flex-grid-column(4); }
}
<div class="test">
<div class="eight" style="background: red; height: 150px;"></div>
<div class="four" style="background: blue; height: 150px;"></div>
</div>
Given the above code why does the grid stack and not display side by side? if I remove the 4 from flex-grid-column() then is displays as I would expect as the .four takes up all the available space, but why not if I specify how many columns?
The markup looks correct and works great in my flex project.
You can make sure you have the flex-grid setup in app.scss
[]
and
After importing Foundation via npm #import "node_modules/foundation-sites/scss/foundation.scss"; I then needed to #include foundation-everything(true); Passing true switches to flexbox.
I found that out on this page http://foundation.zurb.com/sites/docs/flexbox.html#enabling-flexbox-mode
I'd like to create a flexible responsive grid using Bourbon/Neat, that not only varies the number of columns, but also allows me to configure the gutter spacing between columns, across breakpoints.
So in theory, something like this would work:
#import "mixins/neat/neat-helpers";
$visual-grid: true;
$visual-grid-color: yellow;
$visual-grid-index: front;
$visual-grid-opacity: 0.3;
$gutter: 5%;
$column: 5%;
$gridS: new-breakpoint(min-width 0 32);
$gutter: 1.5625%;
$column: 3.515625%;
$gridL: new-breakpoint(min-width 48em 20);
This currently gives me a flexible column count, but the column:gutter proportion remains the same.
I've investigated singularity.gs but would rather not introduce Compass as a dependency.
Does anybody have a fix/workaround?
if you look at the core of neat, you see
// Flexible gutter
#function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
#return percentage($gutter / $container-width);
}
and if you look at _span-columns.scss you see:
margin-#{$direction}: flex-gutter($container-columns);
so you could take a grid and if you make the columns larger than 12. ie 24 you half the size of that margin. and if you double that to 48 its 1/4 the original. etc.. so you have the ability to size your columns to any total size and get your gutters flexible based on that. you could always reverse the effects or try different column sizes to get various results. would this help any? or at least the theory behind it?
div.container {
#include outer-container()
}
div.small {
background: red;
#include span-columns(3 of 12);
}
div.small-alt {
background: blue;
#include span-columns(6 of 24);
}
div.small-crazy {
background: green;
#include span-columns(36 of 144);
}
<div class="container">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
<div class="small">4</div>
</div>
<div class="container">
<div class="small-alt">1</div>
<div class="small-alt">2</div>
<div class="small-alt">3</div>
<div class="small-alt">4</div>
</div>
<div class="container">
<div class="small-crazy">1</div>
<div class="small-crazy">2</div>
<div class="small-crazy">3</div>
<div class="small-crazy">4</div>
</div>
I am working with Neat the first time. I am wondering how I can accomplish a padding for the outer .container. When giving the container a padding, the width of the columns within aren't right anymore and shift to the right/left.
Like this one:
<header>
<div class='container'>
<div class='logo'>
<img alt='Logo' src='assets/images/logo.png'>
</div>
</div>
</header>
.container
{
#include outer-container;
padding-left: 15px;
padding-right: 15px;
}
header
{
.logo
{
#include span-columns( 3 );
}
}
I know I could give the first element in the container a padding and the columns would adjust, but that isn't a consistent solution imho.
What is the best practice to use a consistent padding to the outer container without changing the columns within?
Thank you very much in advance!
This is currently not possible in Neat 1.6, but it is a known issue that looks like it might be solved in Neat 2.0.
OK I've searched a lot but I am now out of options and not having a degree in Hogwarth cannot figure it out.
First, I know it's common typographic problem when there are divs with content inside one main wrapper div and they don't want to expand to the height of parent container.
I have minimal example that works here - white and yellow divs extend correctly with the main container (background green).
However...I am working currently on Jekyll 2-column template for my blogging page using Compass with Susy for grids. And things are going complicated.
my html:
<body>
<div id="root" role="mainwrapper" class="container">
<div role="sidecontent" class="sidebar">
nawigacja jakas
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<div role="zawartosc" class="main">
cos cos cos cos
</div>
</div>
</body>
and my computed style.css
Susy grid setting as follow:
$legacy-support-for-ie6 : false;
$legacy-support-for-ie7 : false;
// Podstawowa typografia
$total-columns: 12;
$gutter-width: 1em;
$column-widht: 5em;
$grid-padding: $gutter-width;
$development:true;
$border-box-sizing:true;
$max-width: 1200px;
#import "susy";
[class^="container"] {
#include container;
overflow:hidden;
#include susy-grid-background;
#include box-sizing(border-box);
}
[class^="sidebar"]{
#include span-columns(3,12);
min-height:100%;
#include box-sizing(border-box);
}
[class^="main"]{
#include span-columns(9 omega,12);
min-height:100%;
#include box-sizing(border-box);
}
I know I am definitely missing something here but none of my friends was able to help me :(
Getting 100% height in CSS can be very tricky and unreliable, but I think I tracked down the actual difference between your two examples (it isn't Compass or Susy). The sample that doesn't work is missing height: 100%; settings on the html, body, and container elements. Add that, and it will work.
I am having some trouble with the semantic grid mixin. I'm am sorry if I am missing something obvious, but I seek you help. I have the following code:
index.html
<header>
<a id="logo" href="#">Logo Link</a>
<div id="search">
<span class="prefix">#</span>
<input type="text">
</div>
</header>
app.scss
header { #include outerRow();
#logo { #include column(8); }
#search { #include column(4); #include innerRow(collapse);
span { #include column(3); }
input { #include column(9); }
}
}
This works correctly with the screen wide, but the prefix stretches to full width in narrow mode. I am a newbie in this adventure, but I believe it recalculates on it own for narrow screens, or do I have to a #media for this to work properly?
to new to post images so here are links:
Wide (correct) - http://imgur.com/dtsGtxM
Narrow (foofed) - http://imgur.com/jX4D1NU
edit: Well the solution seems to be:
span { #include column(3); #include mobileColumn(1); }
input { #include column(9); #include mobileColumn(3); }
although I don't fully understand it. Still not sure whether calling for a new nested row in the column is acceptable, as below, but it seems to work:
#search { #include column(3); #include innerRow(collapse);
Foundation has a default breakpoint at 768px using media queries.
So, when viewing on the larger device it uses the column() mixin and then on smaller screen size it uses the mobileColumn() mixin.
Also, setting a div (in your case #search to be a column and an inner row is going to produce unexpected results. You should wrap your columns in a separate inner row container:
<header>
<a id="logo" href="#">Logo Link</a>
<div id="search">
<div class="inner-row">
<span class="prefix">#</span>
<input type="text">
</div>
</div>
</header>
and
header { #include outerRow();
#logo { #include column(8); }
#search { #include column(4);
span { #include column(3); }
input { #include column(9); }
}
.inner-row { #include innerRow(collapse); }
}
http://foundation.zurb.com/old-docs/f3/media-queries.php