I am currently creating a simple project using Bourbon's Neat grid system, and currently I am trying to create a 3 column list of 6 objects in total, but when I try to span them at 4 columns each, something happens and they become only 2 columns.
It adds margin only on the right side of each element, but that is okay since everything is pre-set I guess? So that is not the problem.
What can I do to make this work?
Here is the SASS excerpt:
#serviceList {
#include row();
li {
#include pad(1em);
#include span-columns(4 of 12);
img, p {
float: left;
}
}
}
Thanks in advance!
I managed to sort it out. In a way...
#serviceList {
#include row();
li {
#include pad(1em);
#include span-columns(4);
#include omega();
img, p {
float: left;
}
}
}
I added the "#include omega();" mixin that removes the gutter margin between them. But since I am new to Neat, I am wondering if that is the right way to do it? Can someone explain?
Related
I am using singularity.gs (Drupal 7/Omega 4), and I want to stack my content in columns.
In 960gs, you just add grid-4 to the element, and it spans 4 columns with appropriate margins (more or less).
To make a 12-column grid with sigularity.gs I've written this:
.grid-4 {
width: column-span(4, 6);
margin-left: gutter-span();
float: left;
}
.grid-4:first-child {
margin-left: 0;
}
Is there a simpler or more idiomatic way to do it?
I'm not sure if this is a question per se, but I think I can answer it.
Singularity allows different output styles to provide their own span mixins to better adhere to that output style's mental model. 960gs works on the float output style, allowing you to to change what you have to the following:
.grid-4 {
#include float-span(4);
&:nth-of-type(3n) {
#include float-span(4, 'last');
}
}
A working SassMeister with this should give you a clear idea of what's going on.
I'm using Bourbon's Neat library for my grid system.
I have some code like this:
section {
#include outer-container;
aside { #include span-columns(3); }
article { #include span-columns(9); }
}
I want to increase the width of the aside tag by, let's say, 50px on hover. However,this will cause the article to be pushed down to the next line.
Is there a way to scale the width of one column and proportionally resize the other column?
I know this can be done with javascript but I was wondering if there is a way to do this with the Neat grid-system .
Thanks!
EDIT
Here is the solution that worked for me:
section {
#include outer-container;
aside {
#include span-columns(3);
&:hover {
#include span-columns(2);
& + article {
#include span-columns(11);
}
}
}
article { #include span-columns(9); }
}
I'm using the css sibling selector + to select the article element when the aside is being hovered over.
There’s no built-in functionality for this, but have you tried overriding width on :hover? That is to say, add x length to the width of Column A and take the same amount away from Column B. CSS calc() could help here.
Neat’s docs give insight into the exact function of span-columns and its output: http://thoughtbot.github.io/neat-docs/latest/#span-columns
That being said, this sounds like a great use case for flexbox, if your needs allow for that.
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.
Often when writing the scss for new at-breakpoints--also even breakpoints that do not change the layout, but nonetheless still change styles at those breakpoints--if I do not specify exactly as I did higher in the code, the at-breakpoint will not override the previous css. For example, if in the first instantiation of scss I write the layout for the header. If I write the header width, then next inside of it the nav, and inside of that the ul, and inside of that the li, etc. If I want to change it later, I can't just nest, for example, a li inside the header in order to change the font. I have to re-list the entire code as before to maintain the same order of specificity.
Am I missing a really obvious way around this?
An example might be:
#about {
#include span-columns(24,24);
#contain_about {
section {
#include span-columns(20,20);
}
#profiles {
#include span-columns(20,20);
.profile {
#include span-columns(20,20);
.expandInside {
#include span-columns(20,20);
.hgroupInside {
h1.description {
font-size: 1.25em;
}
}
}
}
}
}
}
Just to change the font-size for that element.
I'm new to using compass/sass and I've installed a 960 plugin. So far so good.
The only thing is I'm using the more recent .scss syntax and when I try to set my container by:
.container {
+grid-container;
}
I am getting a compile error of:
Syntax error: Invalid CSS after " +grid-container": expected "{", was ";"
Okay here it is.
First declare the amount of columns to use:
$ninesixty-columns: 12;
then declare your "container" if you use one:
.container {
#include grid-container;
}
Then just give the amounts:
.main {
#include grid(9);
#include alpha;
}
.sidebar {
#include grid(3);
#include omega;
}