Using Foundation 5 and writing semantic grid / column markup through SCSS. To make things simple I divided each WordPress page with div[role="page/index/404/single"] and I'm appending the #include grid-row() and #include grid-column() to the corresponding semantic HTML markup.
I've devised a simple SCSS array to handle my variables in one go but I am having parsing issues.
$columns: ( 'article': 9, 'aside': 3, 'full-width': 12, 'none': 0 );
// index.php
div[role="index"] {
// row
main {
#include grid-row();
// column
article {
#include grid-column(columns('article'));
}
// sidebar
aside {
#include grid-column(columns('aside'));
}
}
}
I am receiving this error, which I fully understand, but how can I make this work??? I'm out of ideas.
column("article")/12 is not a unitless number for "percentage"
If this issue cannot be solved let me know. Would be a pain to manually define integers throughout my code for every site but I'll deal with it if I have to.
You need to use the following syntax to access your Sass array (you are technically using a Sass map).
#include grid-column(#{map-get($columns, 'article')});
#include grid-column(#{map-get($columns, 'aside')});
More info: http://www.sitepoint.com/using-sass-maps/
Related
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.
Most Susy examples I've seen seem to handle situations where the amount of columns changes at a given breakpoint, i.e.:
$total-columns: 4;
$large: 12;
// code based on 4 columns
#include at-breakpoint($large) {
// code based on 12 columns
}
But what about when you want the number of columns to remain the same, but (for example) just change the column width? Like this:
$total-columns: 12;
$column-width: 3em;
$large: 64em;
$large-column-width: 3.75em;
#include at-breakpoint($large) {
$column-width: $large-column-width; // automagically changes previously declared column-widths.
}
I would want anything using columns() or span-columns() before the breakpoint to automatically adjust their values to the new column-width without having to redeclare them.
So...
foo { #include span-columns(4, $total-columns); }
would not change at the breakpoint, but the width of the columns would, automatically.
Is this possible?
Susy 2 solves this problem using the new susy-breakpoint with a more powerful shorthand syntax. But the Susy 1 approach isn't much more complex. The at-breakpoint mixin is a simple wrapper for two actions:
Set up a media-query.
Change the global Susy settings inside that media-query block.
I recommend downloading Breakpoint (or another plugin like it) to handle the media-query side of things, but you can also do it by hand. Susy provides a mixin to handle the second part (with-grid-settings). If you put those two together, you have a more powerful version of at-breakpoint.
$large: 64em;
$large-column-width: 3.75em;
#media (min-width: $large) {
#include with-grid-settings($column-width: $large-column-width) {
// new column-width applied to code in here.
}
}
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.
I recently updated to Compass version 1.0.16 and am setting up basic use of the new animation stuff. For some reason, when I try to set the default values for different animation settings, they don't take effect, requiring that I hard-code the values throughout my app.
Specifically:
$default-animation-duration: 0.5s;
#import "compass/css3";
#include keyframes(slideOutLeft) {
0% {
#include transform(translateX(0%));
}
100% {
#include transform(translateX(-100%));
}
}
#id {
#include animation(slideOutLeft); // Doesn't work
}
#id2 {
#include animation(slideOutLeft 0.5s); // Does work.
}
Any thoughts?
Official word from the Compass folks can be found here: https://github.com/chriseppstein/compass/issues/1556
Yeah, currently the defaults are only used in the long-form properties
e.g. animation-duration(), or in when no arguments other are passed
e.g. animation() (where all the defaults are used). Not sure that's
the best way, but the defaults are pretty invasive otherwise.
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.