I am using the singularitygs for the first time. I was wondering how to remove the left/right margins (gutters)? Like the alpha/omega options in the 960gs. Is there anything like that?
Thank you. I am aware of the $location.
I did not describe my problem properly
so the following scenario:
<article>
<div class="teaser"></div>
<div class="teaser"></div>
<div class="teaser"></div>
<div class="teaser"></div>
</article>
<sidebar></sidebar>
$grids: 12;
$gutters: .2;
article {
#include grid-span(8);
}
sidebar {
#include grid-span(4, 9);
}
.teaser {
#include float-span(4, 1, 8);
&:nth-child(odd) {
// here i want to remove the right-margin - because otherwise the containers are not floating. dirty way would be: margin-right: 0 !important;
}
}
Singularity has a location variable as the second argument. #include grid-span($width, $location);You can change $location to 1 if it is the first column on your grid or 12 if it is the last column on your 12 column grid.
By default Singularity uses the isolation method of writing grids so this location value is important for moving things around on your grid. You can switch to more traditional floats by writing $output: float;
Actually there is an option to set the gutters which is add-gutter(x);.
For example:
.sidebar {
#include add-gutter(0);
#include grid-span(2, 1);
}
.main {
#include add-gutter(0);
#include grid-span(10, 3);
}
From the docs: https://github.com/at-import/Singularity/wiki/Creating-Grids#gutter-styles.
Related
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;
}
}
}
}
This is certainly easiest to show with some code:
.container{
.gallery {
ul {
#include clearfix;
}
li {
#include span-columns(1,4);
&:nth-child(4n) {
#include omega;
}
}
}
#include at-breakpoint($large-columns) {
.gallery {
li {
#include span-columns(1,3);
&:nth-child(4n) {
#include remove-omega;
}
&:nth-child(3n) {
#include omega;
}
}
}
}
}
I'm starting out with 4 columns with the 4th being omega, then I want to change over to 3 columns, with the 3rd being omega. The correct elements are floated left/right correctly, but every 4th gets a wrong margin-right...
Am I doing this right? Or rather, what am I doing wrong?
Thanks for reading,
/Andy
your question is misleading because we don't know the value of $large-columns. I assumed that value might be 59em 3 - but that works perfectly. It seems the value is actually just 59em - which is causing your problem.
If you set a breakpoint without a column-count, Susy calculates a new context based on your $column-width and $gutter-width settings. That doesn't cause any problem for span-columns(1,3) because you override the global context with an explicit one (3). But remove-omega also needs to know the context (in order to apply gutters) and you don't pass one - so it uses the global context.
You have two options:
You can change the breakpoint: at-breakpoint(59em 3)
You can pass an explicit context: remove-omega(3).
<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
I am trying to float 2 divs to the right using the Susy Compass framework and having a clearing issue:
<div class="div-1">
<h2>DIV 1</h2>
</div><!--end div-1-->
<div class="div-2">
<h2>DIV2</h2>
</div><!--end div-2-->
<div class="div-3">
<h2>DIV 3</h2>
</div><!--end div-3-->
<div class="div-4">
<h2>DIV 4</h2>
</div><!--end div-4-->
<div class="div-5">
<h2>DIV 5</div>
</div><!--end div-5-->
And here is my Susy layout code:
#detail{
.div-1{
#include breakpoint($breakpoint-md){
#include span-columns(7, 12);
#include pre(1);
background-color:pink;
}
}
.div-2{
#include breakpoint($breakpoint-md){
#include span-columns(7,12);
#include pre(1);
}
}
.div-3{
#include breakpoint($breakpoint-md){
#include span-columns(7,12);
#include pre(1);
}
}
.div-4{
#include breakpoint($breakpoint-md){
#include span-columns(3,12);
#include suffix(1);
//#include omega;
background-color:blue;
}
}
.div-5{
#include breakpoint($breakpoint-md){
#include span-columns(3,12);
#include post(1);
//#include omega;
background-color:orange;
}
}
}
To give an example of how this is rendering, below is a screenshot:
As you can see, div-3 and div-5 are not clearing to the top, to align with div-1.
I thought perhaps I could use the #alpha mixin, but it is deprecated in Susy 1.0 (which I am using). I have also tried using #omega on div-3 and div-5 with no change.
That's how CSS floats work. A float will never align any higher than the previous element (div2). There is nothing Susy can do about that.
You will have to make adjustments to you markup in order for this layout to work - either switching the order of divs, or adding a wrapper around divs 1 & 2 (which is what I would recommend to preserve source order).
Or, if you want to get tricky, you could handle divs 3 & 5 without floating them. Something like this (ignoring breakpoints for simplicity):
.div3, .div5 {
#include pre(8);
#include suffix(1);
}
That should push them to the right, while ignoring the floated divs 1, 2, and 4.
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.