I am using semantic.gs to create a grid for a webpage. I noticed that whatever I do, I never have any "gutter", meaning in CSS the margin is calculated to 0, despite leaving the default to 20px.
So I took a step back and tried to reproduce this very simple official example:
http://semantic.gs/examples/fixed/fixed.html
The output of my attempt is here:
http://jsfiddle.net/QXpcq/
As you can see, again there is no gutter. The markup is the same, the output CSS is not. My output CSS always shows a margin of 0. You would think this is perhaps due to my input being different from the example, but as far as I can see, it's not. I'm using SCSS, as follow:
#import 'compass';
#import 'grid';
// Specify the number of columns and set column and gutter widths
$columns: 12;
$column-width: 60;
$gutter-width: 20;
// Uncomment the definition below for a percentage-based layout
// $total-width: 100%;
////////////
// LAYOUT //
////////////
// center the contents
div.center {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
// header
header#top {
#include column(12);
margin-bottom: 1em;
}
// main and sidebar
#maincolumn {
#include column(9);
}
#sidebar {
#include column(3);
}
I have snipped the reset CSS code and the CSS that styles the colors and such in the demo. Trust me, they are an exact copy and paste of the official demo as you can see in the fiddle.
The "grid" import is the official download of the grid mixins. I didn't change it. The big mystery here is why with the same markup and SCSS I get different results?
Could it be due to my compilation process? I'm using the Scout app to monitor my SCSS folder. It picks up any change to it and compiles it to CSS.
Related
Given the HTML :
<div class="parent">
<div class="element"></div>
<div class="other"></div>
</div>
And this Sass :
.parent {
.element {
#include span-columns(2.5 of 8);
}
}
It generates the CSS :
.parent .element {
float: left;
display: block;
margin-right: 3.22581%;
width: 29.03226%;
}
.parent .element:last-child {
margin-right: 0;
}
The part with :last-child is bothering me, because it overrides the first rule with right-margin that I want to keep. How do I prevent Neat from adding the :last-child rule ? Or what workaround should I do to set my desired right margin ?
I think you're okay here. Neat's span-columns() mixin works by establishing an element as a column with the classes you copied above, including right margin for a gutter between columns. It then uses the :last-child pseudo-class to remove the gutter margin on the last column so you don't have unnecessary space there.
Thinking this out, the .element div in your example isn't the :last-child, so that particular div's right margin will be untouched. I threw this in a JSBin to show you: http://jsbin.com/wawopef/edit?html,css,output. I made .other a column as well since it seemed clear that you intended for it to be one. The .element div still has its margin, then.
If you really wanted to override the rule you could do so by rewriting the mixin, but A) that's probably not what you want to do and B) this is sort of part of using someone else's grid framework. If we follow their documentation it should work fine. Or the framework is bad, which fortunately Bourbon and Neat are not!
I am trying to do a Singularity layout with a main container and a sidebar. In the main container I'd like to have a list of floated elements that will get line breaks at each 3.
Here's the relevant gist:
http://sassbin.beta.caliper.pl/gist/8704970/
Unfortunately width(1) + width(2) + width(3) != width(main). What am I doing wrong? I have to use the grid for items 1..N, because they need to align elements in the page's header (not included in the gist).
So after approaching the topic with a fresh mind I managed to get the expected positioning.
Here's a new gist for everyone to compare:
http://sassbin.beta.caliper.pl/gist/8900975/
There where a few things that needed changing:
Add body { margin: 0 } to align the #include background-grid() visualizations with the act.
Remove all borders and replace them with backgrounds to get rid of 1px differences.
Change grid inside item container with #include layout() to match the container's grid-span.
Style items with nth-child and #include float-span().
Specify last for the last item in a row to avoid unexpected line breaks.
The crucial part of the code is:
#main {
#include grid-span(9,1);
background: yellow;
#include layout(9) {
.item {
&:nth-child(3n+2) {
#include float-span(3,1);
background: blue;
}
&:nth-child(3n+0) {
#include float-span(3,1);
background: red;
}
&:nth-child(3n+1) {
#include float-span(3,last);
background: green;
}
}
}
}
Im using ZF4 and I recently noted how big my css files are. On one page in particular I have 10 lines of sass, that uses the grid mixins, so I "optimized" my imports, and got to this
#import "settings";
#import "foundation/components/global"; // *always required
#import "foundation/components/grid";
.tag-list-filter {
#include grid-row('nest-collapse');
.sub-nav {
#include grid-column(6);
margin: 0;
}
.date-in-filter {
#include grid-column(4,true);
label {
display: inline;
}
input[type="text"] {
display: inline;
width: 50%;
}
}
}
The two imports gives me an overhead of 700 lines of CSS!!!. And Im more than glad to add those 700 lines in my app.css, given that I have lots of pages that uses the grid system, but why should I have that much duplicated css in all my pages?
Is there a way I can avoid that?
#Cimmanon advice was right, and adding this solved my problem:
#import "settings";
$include-html-grid-classes: false;
$include-html-classes: false;
$include-print-styles: false;
#import "foundation/components/global"; // *always required
#import "foundation/components/grid";
Every component probably haves it's own variable to control whether to print styles or not.
By the way, Zurbs documentation could use a "Performance tips" section and include this tip in it. And also the don't include foundation as a whole in each page.
<div class="grid">
<header>header</header>
<div>main</div>
<footer>footer</footer>
</div>
I defined three grids for three screensizes. The markup contains three elements which get displayed in a different column for each screensize.
mobile layout, the main div stays in first column, header and footer get displayed in 2nd column
tablet layout, all three elements get overlapped in 2nd column (because margin-right: -100%;), seems to be a bug.
desktop layout, the only layout which works, header/footer/main get displayed in fifth column
The grid definition:
// grid columns
$grids : 2;
$grids : add-grid(6 at 40em);
$grids : add-grid(12 at 50em);
// grid gutters
$gutters : .2;
The styles:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.grid {
#include background-grid;
margin: 0 auto;
max-width: 1080px;
min-height: 100%;
}
.layout {
// mobile layout
#include grid-span(1,2);
// tablet layout
#include breakpoint(40em){
#include grid-span(4,2);
}
// desktop layout
#include breakpoint(50em){
#include grid-span(8,5);
}
}
header,
.grid div,
footer {
#extend .layout;
}
Does somebody know why this happens?
Singularity needs to know the location of each column. The second value in grid-span is the location which you have set to 2 and 5 forcing columns to start in these locations. You can change that value to 1 if you want things to be placed in the first column.
It also sounds like you are used to floating columns across a page so the one before it effects where the following column is placed. By default Singularity uses a technique called isolation. You can switch to the more traditional float method by writing $output: float. Documentation for these output styles can be found here: https://github.com/Team-Sass/Singularity/wiki/Output-Styles#float
Is there a way to get compass to generate a sprite sheet from images across different style sheets?
The tutorial talks about generating sprites from a bunch of images in the folder and then using it in 1 style sheet. But to me, it seems counter intuitive to have to use the following in all my stylesheets that uses the sprite sheet:
#import "icon/*.png";
#include all-icon-sprites;
I would prefer to have different images set for each sprite sheet, and then some how mark them for sprite generation so that compass can collect them into a sprite and then update the css to reflect that.
Compass only generates one sprite per directory. That's good because it can be cached by browsers eliminating the need to fetch it if you use it on multiple pages. You can use that sprite over and over even selectively using Selector Control which is covered in the tutorial you referenced.
Imagine that in your image folder there are four icons:
images/icon/apple.png
images/icon/banana.png
images/icon/basketball.png
images/icon/football.png
In a stylesheet called fruits.sass, you import all the icons and only use the apple and banana icons.
#import "icon/*.png";
.fruits
.banana
+icon-sprite(banana)
.apple
+icon-sprite(apple)
In a stylesheet called sports.sass, you import all the icons and only use basketball and football icons.
#import "icon/*.png";
.sports
.football
+icon-sprite(football)
.basketball
+icon-sprite(basketball)
When you compile, one sprite named something like icon-sjargon1.png will be generated in images.
images/icon/apple.png
images/icon/banana.png
images/icon/basketball.png
images/icon/football.png
images/icon-sjargon1.png
Your generated fruits.css will look something like:
.icon-sprite,
.fruits .banana,
.fruits .apple { background: url('/images/icon-sjargon1.png') no-repeat; }
.fruits .banana { background-position: 0 -20px; }
.fruits .apple { background-position: 0 0; }
Your generated sports.css will look like:
.icon-sprite,
.sports .football,
.sports .basketball { background: url('/images/icon-sjargon1.png') no-repeat; }
.sports .football { background-position: 0 -60px; }
.sports .basketball { background-position: 0 -40px; }
You can also separate sprites putting images in separate folders.
For example:
#import "themeOne/*.png";
#include all-themeOne-sprites;
#import "themeTwo/*.png";
#include all-themeTwo-sprites;
This is useful when your site has many sections and a maybe specific section must have a different theme.
One last thing...
I'm not a fan of adding ALL the sprite images with #include all-themeOne-sprites;, I prefer to do so:
#import "themeOne/*.png";
.somebox .icon {
#include themeOne-sprite(anyIcon);
}
And if you want the .somebox .icon to be sized as the anyIcon image, you can add the true parameter after the icon name, like so:
.somebox .icon {
#include themeOne-sprite(anyIcon, true);
}
I hope it helps!