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.
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 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?
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.
When using Susy, you put an "omega" flag on the last item of a row to remove its margin-right. For example, let's say we have a bunch of items we need to lay out on a 12-column grid:
<div class="item">...</div>
<div class="item">...</div>
<div class="item">I'm the last of the row</div>
<div class="item">...</div>
And the SCSS:
.item{
#include span-columns(4);
#include nth-omega(3n);
}
But our grid is responsive, and smaller displays use an 8-column grid. The problem is that omega now needs to appear on 2n, and not 3n:
<div class="item">...</div>
<div class="item">I'm the last of the row</div>
<div class="item">...</div>
<div class="item">...</div>
So my question is: with Susy, do you need to redefine your columns for each breakpoint, or is there some way to define column widths once and for all and let the omega naturally fall at the right place?
And if not, does any other grid system offer that?
Solving your issue with Susy
Susy allows overriding the number of columns. Many Susy mixins allow that — every mixin that accepts the $context argument.
But the best way to override a context is with the at-breakpoint mixin:
// Defining the breakpoints
$mobile-to-medium: 400px;
$medium-to-large: 800px;
// Defining columns
$columns-small: 1;
$columns-medium: 8;
$columns-large: 12;
// Starting with a one-column mobile grid
$total-columns: $columns-small;
// Global styles go here
// Mobile-only styles
#include at-breakpoint($total-columns $mobile-to-medium) {
// ...
}
// Medium-only styles go here
#include at-breakpoint($mobile-to-medium $columns-medium $medium-to-large) {
.item{
#include span-columns(3);
#include nth-omega(2n); } }
// Large-only styles go here
#include at-breakpoint($medium-to-large $columns-large) {
.item{
#include span-columns(4);
#include nth-omega(3n); } }
Omega supposes layered responsiveness: mobile styles are applied to all widths; medium styles are applied to medium and large widths, large styles are applied to large widths.
The approach above is not layered: mobile styles are applied only to mobile width, etc. This way you don't need to worry about omega applied where it's not supposed to go.
To use the Omega layered approach, just remove the third element (max-width) in at-breakpoint calls. But then you have to apply #include remove-nth-omega():
// Defining the breakpoints
$mobile-to-medium: 400px;
$medium-to-large: 800px;
// Defining columns
$columns-small: 1;
$columns-medium: 8;
$columns-large: 12;
// Starting with a one-column mobile grid
$total-columns: $columns-small;
// Global styles go here
// Medium and large styles go here
#include at-breakpoint($mobile-to-medium $columns-medium) {
.item{
#include span-columns(3);
#include nth-omega(2n); } }
// Large-only styles go here
#include at-breakpoint($medium-to-large $columns-large) {
.item{
#include span-columns(4);
#include remove-nth-omega(2n);
#include nth-omega(3n); } }
An overview of an omega-less approach
There are SASS grid systems that don't use the "omega" parameter (not to be confused with the Omega theme for Drupal) that's necessary to be applied for the last item in each row. Instead, you provide each element's position (which column the item starts at) in addition to its column width.
To make that possible, another CSS positioning approach is used, known as "isolation". The first framework to use this approach was Zen Grids.
Susy also has support for this method with its isolate and isolate-grid mixins.
This overview would not be complete without mentioning Singularity, the latest and most advanced SASS grid framework. It supports both postioning methods and is extendable to support more in the future (like flexbox which has recently been added to Compass).
In your case, you will have to redefine the total number of columns (context) in the new breakpoint. As for nth-omega, you can use #include remove-nth-omega(3n) to negate the first call before explicitly calling the second, but I consider that a CSS code smell (having to neutralize properties) so I recommend using media-query splitting to avoid that.
Also, I'm not aware of any framework that can automatically do that for you.