johnalbin / zen-grids Goto Github PK
View Code? Open in Web Editor NEWA Sass module to build responsive grid systems
Home Page: http://zengrids.com
License: GNU General Public License v2.0
A Sass module to build responsive grid systems
Home Page: http://zengrids.com
License: GNU General Public License v2.0
Hi John -
I have a zen (7.x-5.4) sub-theme I am trying to upgrade to zen-grids 2.0.0.beta.1. No luck. I am missing the following variable and mixins:
$zen-reverse-all-floats
@include zen-nested-container();
@include zen-clear();
All were used in 'layouts/_responsive.scss'. When I comment the lines out -- you guessed it --- the site layout is a mess. Are there replacements for these items in version 2? Or should I bite the bullet and actually figure out what's going on?
Aloha, Beau.
I really lke Zen Grids, thanks for creating this. But I have a problem I can't quite figure out. I have 4 elements that I want to arrange, the first 2 on the left, the other 2 on the right. They are divided in pairs inside divs. But I also need them to never overlap (any of the items), even when you shrink the window.
In Zen grids I have:
.left-div { @include zen-grid-item(3,1) }
.right-div { @include zen-grid-item(3,4) }
Which works fine as far as overlapping goes, but the right edge of the right-div element is not aligned right, it is aligned left. See image below
This is true, even if I do:
.left-div { @include zen-grid-item(3,1) }
.right-div { @include zen-grid-item(3,1, right) }
I simply cannot get that right element to align to the right.
Any help would be greatly appreciated. And thanks again.
Currently, Zen Grids calculates how big the margin-right needs to be to exactly reset its “relative edge” back to the container’s left inner edge. But it turns out that is not needed. If you use margin-right: -100%;
, the container’s left edge will prevent adjacent siblings from seeing any relative edges that are outside the container.
This site doesn't explain how it works or understand the full potential of the technique, but showed that a simpler variant of Zen Grids works just fine. http://chrisplaneta.com/freebies/negativegrid-fluid-css-grid-by-chris-planeta/ Wish I'd realized this in 2004 when I started using this method. :-)
Ok, another stupid question, how do you center elements? In the following image I have:
.main-container {
width: 100%;
$zen-column-count: 3;
@include zen-grid-container;
margin: 0 auto;
}
.title { @include zen-grid-item(3,2) }
.map { @include zen-grid-item(3,2) }
Yet these 2 items, title and map are not centered (see image). They won't be centered even if I give .main-container a column-count of 1 and do:
.title { @include zen-grid-item(1,1) }
I'm sure I'm missing something.
Mark Boulton likes to use gutters with odd numbers of pixels, so that he can place a line between columns.
Currently, the mixin divdes hte gutter in half, so you'd have a half pixel in both the left and right padding. Its likely browsers would round them in the same way (either up or down) which means you'd end up with an even number of pixels in the gutter.
We need to make the left gutter be 1 pixel smaller than the right when the total gutter size is set to an odd number of pixels.
@JohnAlbin: While working on the configurable margins issue, I've been having trouble understanding your intent behind the zen-grid-flow-item mixin. Can you provide some real world examples of when/how this might be used? I want to make sure the contributions I'm proposing take this into account appropriately.
Something like zen-grid-item-off() that removes the styling added by zen-grid-item().
When running compass watch on a new zen theme I get the following errors:
DEPRECATION WARNING on line 81 of /Users/glenn/websites/oliver/sites/all/themes/oliver/sass/layouts/_responsive.scss:
Assigning to global variable "$zen-column-count" by default is deprecated.
In future versions of Sass, this will create a new local variable.
If you want to assign to the global variable, use "$zen-column-count: 3 !global" instead.
What is the recommended way to override the $zen-column-count in a media query?
It looks like Susy and Singularity get around this by using a mixin to set different variables.
Cannot be installed with bower, version
field missing in bower.json.
Gives
bower zen-grids#0.0.1 not-cached git://github.com/JohnAlbin/compass-zen-grids.git#0.0.1
bower zen-grids#0.0.1 resolve git://github.com/JohnAlbin/compass-zen-grids.git#0.0.1
bower zen-grids#* not-cached git://github.com/JohnAlbin/compass-zen-grids.git#*
bower zen-grids#* resolve git://github.com/JohnAlbin/compass-zen-grids.git#*
bower zen-grids#0.0.1 ENORESTARGET No tag found that was able to satisfy 0.0.1
After posting this issue: https://github.com/canarymason/breakpoint/issues/24 We should try to integrate Zen Grids with Breakpoint. I would love this feature...
So the zen-nested-container() mixin should be applied to a grid item if it is also a container to a nested grid.
I originally included the zen-container() mixin as the first line of the zen-nested-container()'s properties. But I realized this is unnecessary.
Since a grid item is floated, it contains all of its children according to the box model. Adding a clearfix to that grid item is redundant and is, effectively, code bloat.
It should be removed.
Hi John,
Would it be possible for you to enable the Wiki on the repository? I had some issues regarding nested grid items and their behaviour that I think would be useful to the rest of the community. Or would you prefer that anyone wanting to contribute documentation fork the repo and issue pull requests to you?
Cheers,
Sean
The mixins currently work fine for the default $box-sizing: border-box
but fail when $zen-box-sizing
is set to content-box
since the padding is not properly subtracted from the column width.
Hi John
Using Zen grids and menu block [Drupal] to try achieve the layout
https://skitch.com/alanburke/ef98p/skitched-20120710-234717
but it ends up like
https://skitch.com/alanburke/ef98t/skitched-20120710-234748
SCSS at http://pastebin.com/smDm4Gi9
It must be something silly I'm doing wrong...
ruby -v
ruby 2.1.1p76 (2014-02-24 revision 45161) [x86_64-linux]
gem -v
2.2.2
gem query --local "sass|compass"
*** LOCAL GEMS ***
compass (1.0.0.alpha.18)
compass-core (1.0.0.alpha.17)
compass-import-once (1.0.2)
sass (3.3.0.rc.5)
sass-mediaqueries-rails (1.3)
git clone https://github.com/JohnAlbin/zen-grids.git
cd zen-grids
git log | head
commit 93abd2ae233293089a7f0667ddf2d690ee925e94
Author: JohnAlbin <[email protected]>
Date: Fri Feb 28 03:07:21 2014 +0800
Remove Ruby 1.8.7 from travis tests.
commit 971ec51adcbb8065b60b6fc8409ca93cd0946804
Author: JohnAlbin <[email protected]>
Date: Fri Feb 28 02:45:38 2014 +0800
touch README.txt
gem build zen-grids.gemspec
gem install zen-grids-2.0.0*.gem
gem query --local zen-grids
*** LOCAL GEMS ***
zen-grids (2.0.0.beta.1)
cat config.rb
environment = :development
relative_assets = true
add_import_path "/usr/local/rvm/gems/ruby-2.1.1"
add_import_path "/usr/local/rvm/gems/ruby-2.1.1@global"
css_dir = "css"
sass_dir = "scss"
extensions_dir = "sass-extensions"
images_dir = "img"
javascripts_dir = "js"
generated_images_dir = "public/sprites"
require 'zen-grids'
compass compile --debug-info --force
error scss/blocks.scss (Line 6 of _grids.scss: File to import not found or unreadable: variables.
Load paths:
/srv/www/d7/sites/all/themes/my-zen5/scss
/usr/local/rvm/gems/ruby-2.1.1/gems/compass-core-1.0.0.alpha.17/stylesheets
/usr/local/rvm/gems/ruby-2.1.1/gems/zen-grids-2.0.0.beta.1
/usr/local/rvm/gems/ruby-2.1.1
/usr/local/rvm/gems/ruby-2.1.1@global
Compass::SpriteImporter)
create css/blocks.css
error scss/wireframes.scss (Line 6 of _grids.scss: File to import not found or unreadable: variables.
...
cat css/blocks.css
Syntax error: File to import not found or unreadable: variables.
Load paths:
/srv/www/d7/sites/all/themes/my-zen5/scss
/usr/local/rvm/gems/ruby-2.1.1/gems/compass-core-1.0.0.alpha.17/stylesheets
/usr/local/rvm/gems/ruby-2.1.1/gems/zen-grids-2.0.0.beta.1
/usr/local/rvm/gems/ruby-2.1.1
/usr/local/rvm/gems/ruby-2.1.1@global
Compass::SpriteImporter
on line 6 of /usr/local/rvm/gems/ruby-2.1.1/gems/zen-grids-2.0.0.beta.1/zen-grids/_grids.scss
from line 3 of /usr/local/rvm/gems/ruby-2.1.1/gems/zen-grids-2.0.0.beta.1/_zen-grids.scss
from line 64 of /srv/www/d7/sites/all/themes/my-zen5/scss/_base.scss
from line 8 of /srv/www/d7/sites/all/themes/my-zen5/scss/nodes.scss
1: /srv/www/d7/sites/all/themes/my-zen5/scss/nodes.scss
...
cat /usr/local/rvm/gems/ruby-2.1.1/gems/zen-grids-2.0.0.beta.1/zen-grids/_grids.scss
//
// Main module for the Zen Grids system.
//
6 @import "variables"; // Import the global variables needed by all of Zen Grids.
"If the gutter width is in pixels and is an odd number, then $gutter-size: left will return half of the gutter rounded down to a whole pixel; $gutter-size: right will return half of the gutter rounded up to a whole pixel."
Hey there,
I'm really starting to like Zengrids but have one issue I can't get solved:
How are nested grids supposed to work?
I have a basic layout with 12 columns: 3 col sidebar, 9 col main.
Now I told the main column to be a nested container using zen-nested-container() after zen-grid-item() of the main column. When I now start creating new grid items inside main they seem to be calculated based on a new 12 column grid, based inside main column, this of course results in having smaller column widths, when I actually want to have the same grids inside my nested grid.
Is this supposed to work like this or am I missing a point here?
Background: I'm creating a zen subtheme for Drupal and want to layout my individual fields inside the main column (using display suite or node templates) to be on the grid. Is there another way to tackle this?
Thanks & regards,
Daniel
Update: It seems to work the way I need it if I set the nested grid to have 9 columns using $zen-column-count: 9;
Is this they way it's supposed to be done?
Even after moving this to a separate module, I think the name needs to closer align with what it actually does: setting the width of a normal flow item, so that it can be aligned with the grid.
There's no reason to use IE conditional classes on IE support properties in mixins. By adding a class to IE support rules, we're making it harder to override (or to know when we need to override) those styles. Since the increased specificity is hidden with the compiled CSS.
With CSS hacks for IE support we can keep the specificity the same. And we're wrapping those hacks within an abstraction that keeps the details away from our source stylesheets.
I'm reading the docs at http://zengrids.com/help/ and really confused about how to make a fluid grid from a set of UL/LIs.
Am I understanding correctly that I need a different @include zen-grid-item on each grid item? If so, how can this work when creating an arbitrary number of items with Views?
zen-grid-flow-item says it doesn't float items, so I'm not sure how to use that either.
I am surely missing something, but not managing to understand how to do this from reading the docs!
When zen-grid-flow-item() is used for responsive layouts, you need to specify how many columns the parent element spans (so that you are calculating the % of the parent element correctly.
But for layouts using fixed length units (em, px, in, pt, etc.), you shouldn't specify the number of columns for the parent. You should just use $zen-column-count.
There's a bug in Compass. See Compass/compass#1524
We're checking @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) and $box-sizing == border-box and $box-sizing-polyfill-path == ""
to see if we need to warn about an empty path to the box-sizing polyfill.
Unfortunately, if the warning is generated, we're skipping all the IE6 support properties as well. Oops.
Hi,, Iam using this to make 3 columns , its works perfect but not with IE7 its break,,, Anyway to fix it...
Thanks..
My Current files....
in base.sass file
$legacy-support-for-ie6: false;
$legacy-support-for-ie7: false;
$legacy-support-for-ie8: true;
$box-sizing-polyfill-path: "/sites/all/themes/mytheme/boxsizing.htc";
And in my Sass file:
#featured {
@include zen-grid-container();
.featured1 {
@include zen-float(left);
@include zen-grid-flow-item( 4, 12, $alpha-gutter: false, $omega-gutter:true );
}
.featured2 {
@include zen-float(left);
@include zen-grid-flow-item( 4, 12, $alpha-gutter: false, $omega-gutter:false );
}
.featured3 {
@include zen-float(left);
@include zen-grid-flow-item( 4, 12, $alpha-gutter: true, $omega-gutter:false );
}
}
Hi there,
first of all thank you for this awesome grid system :-)
zen-grid-item() adds word-wrap: break-work automatically to the CSS, which then breaks any of the common methods to truncate text with an ellipsis (like the one compass offers by default http://compass-style.org/reference/compass/utilities/text/ellipsis/)
Of course it only does that in IE, which passes down the word-wrap: break-work to child elements for some reason.
Unfortunately, I don't have an easy solution to offer here; the quick workaround would be to add word-wrap: normal to all elements that should exhibit that truncating behaviour, but I thought I'd raise the issue here in case other people run into the same problem.
Best wishes
Chris
If $box-sizing-polyfill-path is left at its default, an empty string, it is supposed to leave the polyfill disabled. But it currently still generates HTML:
*behavior: url("");
It should not output that line at all.
Hi,
I was wondering that if the variables $legacy-support-for-ie7
and $legacy-support-for-ie6
are false, there's no need for CSS with hacks like _overflow: hidden;
or *zoom: 1;
. I think that those rules must be written only if that variables are true.
This migh sound like a stupid question, but I've got some elements where I'm using zen-clear()
for some pages, but then in one particular page I need to remove the zen-clear()
statement cause it's causing problems. I've got a SCSS file for that page but am wondering how do I negate the zen-clear()
mixin?
It gets inherited from the other css since it's only a small change I don't want to redo the whole page for just 1 element.
Thanks.
The current mixins add legacy IE support by using .ie6
and .ie7
classes. This requires that the HTML tag in the markup has conditionally added those classes with IE conditional comments. ala http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ and HTML5 Boilerplate
We need to add the option to use standard IE hacks to add legacy support.
If a user specifies the $auto-include-grid-item-base parameter in the zen-grid-item() mixin, it's not being automatically included, its being explicitly included.
I just upgraded Compass to a newer version and it looks like Compass changed how it handles legacy browser support.
See http://beta.compass-style.org/help/documentation/tuning-vendor-prefixes/ and http://beta.compass-style.org/reference/compass/support/
This might need to be updated in Zen-Grids
Equal column grid systems are the norm. But they are not the only way to create a grid system.
Mark Boulton reminds us that:
The fundamental problem with ALL grid generators and frameworks is they assume you want columns of the same width.
What about asymmetry? Ratio grids?
Zen Grids currently uses the $zen-column-count
to specify the number of equal-width columns in the grid. As an alternative to that variable, we could add a $zen-column-widths
variable that takes in a list of widths. For example:
// We define our unequal-width grids in this way:
// Column 1: 66% × 66% = 45%
// Column 2: 66% × 33% = 22%
// Column 3: 33%
$zen-column-widths: (45%, 22%, 33%);
Then our normal @include zen-grid-item(2, 1);
(which specifies that a grid item should span 2 columns and be positioned in the 1st column) would set the grid item’s width at 67%
(45 + 22
). And @include zen-grid-item(2, 2);
would set the item’s width at 55%
(22 + 33
).
Obviously, you could use em
s or px
s instead of %
s.
Just looking at Zen as a solution to sub-pixel rendering woes...
What I'm not grasping from a cursory glance at the docs is how I layout subsequent items. For example, let say I have 6 UI elements in a row. The first (.row-header) should take up two columns, each subsequent row (.select-item) should take one:
$zen-column-count: 6;
$zen-gutter-width: 0%;
.two-one-one-one-one {
@include zen-grid-container;
.select-item {
@include zen-grid-item(1, 3, left);
&:last-child {
@include zen-grid-item(1, 1, right);
}
}
.row-header {
@include zen-grid-item(2,1);
}
}
However, I actually get each subsequent .select-item showing one under another - how do I set each to follow the other? Or is that a fundamental limitation of this method??
Apologies this is a basic question!
I was working on a demo that compares various layout methods and it required putting background colors on the grid items. Since Zen Grids currently uses padding for gutters, applying background colors directly on the grid item doesn't work since both the gutter and the grid item end up with a bg color.
When I added an extra div to the demo to get the right bg colors, someone complained about needing “more markup” just to get the advantages of Zen Grids. sigh Zen Grids is optimized for the normal “I don't want a bg color around every grid item” designs, but any kind of layout demo will always be the polar opposite of this normal use case.
It would be nice to give designers to use margin-based gutters even if that means they'll have to use %-based gutters. :-p
zen-columns was my direct port of the layout method to Sass. It worked fine. But its severely limited compared to the zen grids mixins. It is effectively deprecated.
I'm going to remove it.
The docs don't mention that you can use zen-new-row()
to un-do a row at a lower breakpoint, ala: zen-new-row(none)
I am developing a responsive site with zen grids. The CSS works perfectly on IE 8 and 9. In IE 7 some zen grids layouts are broken. some grid items overlap even if the are cleared. I also set $legacy-support-for-ie7 to true. I also tried to use compass' clearfix mixin. But on some layouts that just won't work when you "swap" the order of two grid items (display one before the other where in the HTML the order is opposite). Is there a way to fix this issue?
The position: relative that is in zen-grid-container() is just CSS I copied over from the original Zen Columns layout technique I've been using for 6+ years (a technique I developed). I think it was needed for some cross-browser compatibility, but I didn't document it, so I'm uncertain what its purpose is and if it's still needed.
BTW Merry Christmas John!
This is more than likely a mistake by me, but the generated css has sizes 10 times too big.
See
https://gist.github.com/2567350/dfdcd26668f9d15b309c03e2854aa0e0262b3712
http://dabblet.com/gist/2567350
I've added the markup, css and scss
Any tips appreciated!
Alan
Hi John, I just wanted to drop in and say thank you for making zen-grids! I'm really enjoying it.
One thing that confused me when I was creating my layout is that a two column side by side layout wouldn't work.
For a 12 column grid I was doing the following:
.container{
$zen-column-count: 12; // Set the total number of columns in the grid.
$zen-gutter-width: 10px;
@include zen-grid-container;
width: 90%;
margin: 0 auto;
}
.one {
@include zen-grid-item(6, 1);
}
.two {
@include zen-grid-item(6, 2);
}
later I realized I had to do the following to get it to work properly:
.container{
$zen-column-count: 12; // Set the total number of columns in the grid.
$zen-gutter-width: 10px;
@include zen-grid-container;
width: 90%;
margin: 0 auto;
}
.one {
@include zen-grid-item(6, 1);
}
.two {
@include zen-grid-item(6, 1, right);
}
Can you briefly explain or document why this is, and in what situation you would need to do this?
Thanks again
I am still trying to wrap my head around how zen-grid-flow-item is intended to work.
This was my first approach:
.wrapper {
@include zen-nested-container();
width: $zen-grid-width + $zen-gutter-width;
.item {
@include zen-grid-flow-item(6);
@include zen-float(left);
}
}
It works. But its an ugly solution. E.g. It can cause scrollbars. And more importantly: It does not allow to use Zen Grids the way why i am using it in the first place: You can't mix unit between grid width and gutter width. So I came up with this solution:
@include zen-grid-flow-item(1, 2, false, false);
@include zen-float(left);
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
&:nth-child(odd) > * {
margin-right: $zen-gutter-width/2;
}
&:nth-child(even) > * {
margin-left: $zen-gutter-width/2;
}
It's really ugly and inflexible as It is. But it works. This is really my first draft of that stylesheet. I just bumped into this solution and thought I'd share it since many other people have the same problem on the discussion on the Zen Grids website.
John, please give some feedback on this!
If $zen-auto-include-grid-item-base is false, the zen-grid-item() mixin will fail to set any gutters even if they are explicitly passed to the mixin.
Not sure if this would be useful, but maybe. See https://github.com/RobLoach/component-installer
After playing with some other grid systems, I can see how it might be really useful to use some functions when declaring your project's variables in an _init.scss.
Importing your Sass modules after your variables is a nice pattern given the !default
feature of Sass, but you could make an exception for helper functions, importing helper functions then defining variables and then importing modules.
Let's move our functions into a functions partial.
Just a question, could there be a way to perhaps only include the columns spanned by an item and just floating it, instead of having to always declare from which column it starts? list items for navigation, for example, are a little difficult to handle with this.
Something like:
.block-a {
@include zen-valign(top);
}
.block-b {
@include zen-valign(middle);
}
.block-c {
@include zen-valign(bottom);
}
There's an error in the calculations of the flow items when using the zen-grid-flow-item() mixin. The problem is that the parent element width is exactly 1 gutter width smaller than the width of the columns it spans. So the % width of the flow items is relative to the wrong measurement.
Spent some time trying to fix this and I believe the following replacement should work.
@mixin zen-grid-flow-item (
$column-span,
$parent-column-count: false,
$alpha-gutter: false,
$omega-gutter: true,
$flow-direction: $zen-float-direction,
$column-count: $zen-column-count,
$gutter-width: $zen-gutter-width,
$grid-width: $zen-grid-width,
$box-sizing: $zen-box-sizing,
$reverse-all-flows: $zen-reverse-all-floats,
$auto-include-flow-item-base: $zen-auto-include-flow-item-base
) {
$columns: $column-count;
@if unit($grid-width) == "%" {
@if $parent-column-count == false {
@warn "For responsive layouts with a percentage-based grid width, you must set the $column-count to the number of columns that the parent element spans.";
}
@else {
$columns: $parent-column-count;
}
}
$dir: $flow-direction;
@if $reverse-all-flows {
$dir: zen-direction-flip($dir);
}
$rev: zen-direction-flip($dir);
// Calculate the item's width.
$width: zen-grid-item-width($column-span, $columns, $grid-width);
@if $box-sizing == content-box {
@if not comparable($width, $gutter-width) {
$units-gutter: unit($gutter-width);
$units-grid: unit($grid-width);
@warn "The layout cannot be calculated correctly; when using box-sizing: content-box, the units of the gutter (#{$units-gutter} did not match the units of the grid width (#{$units-grid}).";
}
$width: $width - $gutter-width;
}
width: $width;
// Auto-apply the unit base mixin.
@if $auto-include-flow-item-base {
@include zen-grid-item-base($gutter-width, $box-sizing);
}
// Ensure the HTML item either has a full gutter or no gutter on each side.
padding-#{$dir}: 0;
@if $alpha-gutter {
margin-#{$dir}: $gutter-width;
}
$offset: ($columns - $column-span) * $gutter-width / $columns;
padding-#{$rev}: $offset;
@if $omega-gutter {
margin-#{$rev}: $gutter-width - $offset;
}
@else {
margin-#{$rev}: -($offset);
}
}
Compass’grid-background mixins are sweet. They use CSS3 gradients to apply a grid background while developing your design. http://compass-style.org/reference/compass/layout/grid_background/
However, I don't see any way to mimic fixed-pixel (or fixed-em) gutter sizes when using box-sizing: border-box;
. :-(
Which means we may need to develop a JS-based solution.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.