Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
I think I heard @JohnAlbin say in the Themeing Haiku with Haml, Sass and Peroxide session at DrupalCon Chicago that he's interested in getting SASS into Zen (through Compass?). I'm very interested in that, and I wondered if I might prompt some discussion by creating an issue for it. I want to be the first to know if something comes of it!
Comment | File | Size | Author |
---|---|---|---|
#35 | zen-grids-example.png | 56.85 KB | JohnAlbin |
#5 | 1134622-compass_support.patch | 580 bytes | KrisBulman |
Comments
Comment #1
JohnAlbinI'm currently looking at the existing Zen SASS stuff.
https://github.com/bangpound/zencompass
and
https://github.com/barraponto/compass-drupal-plugin
Comment #2
JohnAlbinOMG. Sass is so awesome. After I've finished converting the STARTERKIT css files to scss, I'll:
Comment #3
JohnAlbinOk. I've added the first draft of the .scss files to 7.x-5.x-dev.
http://drupalcode.org/project/zen.git/commitdiff/e768cb3?hp=6549e6ef122f...
I still need to add something for the layout CSS files.
Comment #4
KrisBulman CreditAttribution: KrisBulman commentedJohn, What are the plans with implementing Sass into Zen going forward? Will it always be a separate release, or will Sass be there and optional?
After the first Sass release, should developers submitting patches now use Sass in their primary development environment to keep all files in sync going forward? Or make changes in both sass and css files seperately?
The reason I ask is because after updating the navigation.scss sass file, running the commands specified to watch the folder/write to the folder.. the output looks like the following.. i note that we'll lose commenting in the original css files.. but it will be retained in the sass files.
After installing the drupal compass plugin which runs with cron (awesome), here are the output options in development mode (production mode removes line comments):
nested
Expanded
compact
compressed
Comment #5
KrisBulman CreditAttribution: KrisBulman commentedadded optional drupal compass module support to starterkit (exposes sub-theme to the compass module) - http://drupal.org/project/compass
This may not be preferred, and probably should be something added to a subtheme after installing the module anyway.
barraponto looks like he's taking a good approach with the compass-drupal-plugin
Comment #6
barraponto CreditAttribution: barraponto commented@JohnAlbin I guess you can take a look what I have done in https://github.com/barraponto/compass-drupal-plugin
Edit: Just noticed it is mentioned in the first comment :)
Comment #7
barraponto CreditAttribution: barraponto commented@KrisBulman: thanks for the heads up. I don't use cron, I usually compile on my local machine (compass compile) and push the CSS files to the server, as running ruby on the live server might slow things down.
Contributions might come both in CSS and SASS, it will be the mantainer's work to bring stuff into SASS/Compass. This is because many developers might not jump in the SASS/Compass bandwagon. So they will get the Zen theme as they always did, sub-theme it and work on top of the CSS files. And it will still work.
Comment #8
barraponto CreditAttribution: barraponto commentedI have released a readme file, I hope it makes things easier. There is no Zen example there since it doesn't generate a sub theme, yet. So in order to use Drupal Compass Plugin with Zen you need to create a sub theme first then run compass create themename from sites/all/themes (you are effectively overwriting stuff in your theme). You will need to change the subtheme info file as well.
See https://github.com/barraponto/compass-drupal-plugin for the readme file and http://groups.drupal.org/node/97989 for instructions on Zen subthemeing. I know it is frustrating right now and will probably have to wait for 2.0 if I follow the roadmap (but I guess I won't).
Comment #9
franzsub
Comment #10
geekgirlweb CreditAttribution: geekgirlweb commentedWow, I recently started working with SASS/Compass and I'm definitely interested in testing this out. Thanks!
Comment #11
Anonymous (not verified) CreditAttribution: Anonymous commentedI've written a pair of layout mixins that can make the negative margin and floated method used by Zen theme a lot easier. See them here:
https://github.com/bangpound/zencompass/blob/master/src/_layout.scss
They work for LTR and RTL.
https://github.com/bangpound/zencompass/blob/master/src/layout-liquid.scss
https://github.com/bangpound/zencompass/blob/master/src/layout-liquid-rt...
https://github.com/bangpound/zencompass/blob/master/src/layout-fixed.scss
https://github.com/bangpound/zencompass/blob/master/src/layout-fixed-rtl...
Shall I make a patch?
Comment #12
KrisBulman CreditAttribution: KrisBulman commentedThere's also some great stuff going on in barraponto's compass drupal plugin that makes liquid/fixed ltr/rtl very easy.. definitely worth a look.
https://github.com/barraponto/compass-drupal-plugin/blob/master/styleshe...
Comment #13
JohnAlbinThere's great things in both Benjamin's and Capi’s files for the Zen layout.
But there are a couple of limitations that were built-in to the Zen's layout-fixed/liquid.css that I want to remove now that I've got the tools to do so.
padding: 0; /* DO NOT CHANGE. */
comments are simply to make the math much easier to handle. The reality is that we can add the left and right padding into our calculations; its just much harder to do. Let's have sass to the heavy lifting.This is the only HTML we need:
I just committed this zen-columns mixin. I want to thoroughly debug it before I build a zen-columns-liquid or a zen-grids mixin.
Comment #14
KrisBulman CreditAttribution: KrisBulman commentedsetting the leading direction to "left" or "right" in layout-fixed gives some strange results for me..
Should it be looking for the actual term "right"?
Boy, I thought I had a handle on SASS, but it's taking me a while to get my head around the columns scss
Comment #15
JohnAlbinThe "Prevent overflowing content from breaking the layout" bit of code was broken because Sass doesn't interpolate lists properly when put into a selector. I just committed a fix for that.
@Kris: Yeah, this mixin is the most complex that I've seen. I looked at a bunch of mixins, but realized I needed a single one on the container that also set the CSS for the container's columns. Otherwise it put the burden of the math on the themer again.
With this mixin, the parameters are complex, but once you understand how the parameters relate to each other and what they mean, then you don't have to do any math except figuring out the distance between the columns (the leading gutter). The mixin does all the crazy math.
Do take a look at the layout-fixed.scss file because it shows an example of using the mixin.
Also, the mixin definitely needs stress testing. Theoretically, I believe, the mixin should accept
$leading-direction: right
,$leading-direction: 'right'
,$leading-direction: (right)
, or$leading-direction: ('right')
. But I haven't tested all of those. The docs can be expanded to show example usage.Comment #16
KrisBulman CreditAttribution: KrisBulman commentedRather than use numbers in layout-fixed.. (for .two-sidebars #main, .sidebar-second #main & .sidebar-first #main), wouldn't it be better to set the sidebar variables at the top of the document and let SASS calculate the content width - gutter & remove the need to type in the same value more than once across the document?
Comment #17
JohnAlbinYou mean set several variables in the layout-fixed.scss file and use those variables as the values passed to the mixins? Absolutely, you could do that.
However, I just tried that I got this result:
If I've never seen this mixin before, I would find that completely indecipherable. :-\
What I would find more interesting is something like this:
Maybe some functions like 960 or Blueprint to calculate widths when there is a non-zero gutter?
Comment #18
Owen Barton CreditAttribution: Owen Barton commentedSuper excited for this!
Comment #19
barraponto CreditAttribution: barraponto commented@JohnAlbin: since we still have the .section div inside each of the columns, I guess we don't actually need column paddings — margins in the sections will do. However I like the approach of using lists as a way to make it easier for N columns.
Your mixin, however, goes beyond what is reasonable when it comes to setting variables. Making good use of the .section divs to avoid paddings, we don't need to worry about them and we can lower the number of variables. I guess the leading gutter can follow the same path. And let's set the variables once and split the layout mixin into column and layout, since we might not need to print the navbar styles if we aren't going to use it.
Comment #20
KrisBulman CreditAttribution: KrisBulman commentedJust found this little tidbit on preserving comments from Chris Eppstein..
Comment #21
adellefrank CreditAttribution: adellefrank commentedSubscribing.
Comment #22
sylvain_a CreditAttribution: sylvain_a commentedSuscribing.
Comment #23
JohnAlbinFYI, now that #1249790: Convert tabs from old sliding-door CSS technique to CSS3 has landed, Zen's Sass files require Compass. If you don't have Compass installed, the tabs.scss file will fail compilation with errors.
Comment #24
KrisBulman CreditAttribution: KrisBulman commentedbeats writing endless vendor specific code! for just that alone it's worth it, let alone everything else it gives us.
Comment #26
JohnAlbinRelated: #1348258: Add box-sizing: border-box to the Zen Columns layout method
Comment #27
JohnAlbinWhat I did on my Winter vacation: https://github.com/JohnAlbin/compass-zen-grids
I haven't done any testing to make sure the new mixins are bug-proof.
The general plan is to:
Comment #28
KrisBulman CreditAttribution: KrisBulman commentednice work John, can't wait to try this out!
Comment #29
echoz CreditAttribution: echoz commentedAwesome, I've been looking forward to this, and eager to test.
Comment #30
barraponto CreditAttribution: barraponto commented@JohnAlbin why rolling your own grid system when there are several compatible with SASS and Compass, with a whole community mantaining them?
I'd go for Susy, but there's 960gs and blueprint out there.
Comment #31
echoz CreditAttribution: echoz commented@barraponto, as best practices are yet to be settled on from many to check out or model from to build our own, I for one have been anticipating what JohnAlbin will create.
Comment #32
KrisBulman CreditAttribution: KrisBulman commentednow we have a whole new theming community maintaining a zen grid system :)
Comment #33
JohnAlbinI find Susy a bit overly complicated. (Given Zen 7.x-3.x's layout-fixed.css, I recognize the irony.) And the tutorials don't help much. http://susy.oddbird.net/tutorial/ http://scottdavis.github.com/blog/2011/12/30/introduction-to-building-we...
I knew the underlying method behind Zen's default layout was very powerful and (surprising to me!) worked great for responsive layouts. The only thing it was missing was an abstraction that made applying it super simple.
I'm hoping that's what these mixins provide. Here's the example in the README from https://github.com/JohnAlbin/compass-zen-grids:
This creates a fluid 12-column grid with 30px gutters (15 pixel half-gutters on each . (I hate percentage-based gutters because they force the designer to add lots of breakpoints so the gutters don't wildly fluctuate.)
A more interesting example is in the example.html that comes with the zen-grids gem.
You can build the example yourself:
That will create a directory called "test-project" that includes the example.html, config.rb (so compass watch will work correctly), and all the sass source and generated css files for the example. Here's a snippet from the sass/layout.scss file:
I'm pleased with the results.
Comment #34
KrisBulman CreditAttribution: KrisBulman commentedI haven't given this a shot, but wonder what the css output results are like. any bloat problems?
Comment #35
JohnAlbin@KrisBulman Re: bloat problems. Actually I added a new global variable that can be used to reduce the CSS output.
From https://github.com/JohnAlbin/compass-zen-grids/blob/master/stylesheets/z...
I'm working on better docs for this. Here's a sneak peak:
Comment #36
JohnAlbinZen Grids is up to 1.0.beta.5 now and the parameter order and mixin names have changed slightly. See http://zengrids.com/help/
Comment #37
Zach Harkey CreditAttribution: Zach Harkey commentedSo with this method, what is the best way to make the main content column expand to fill the empty space left when one of the sidebars doesn't have any content?
Comment #38
echoz CreditAttribution: echoz commented@Zach Harkey, we can use Zen’s body classes denoting the presence of sidebars (.two-sidebars, .one-sidebar, .sidebar-first, .sidebar-second, .no-sidebars) in combination with #content and region classes (ex: .region-sidebar-first) in our media queries.
Comment #39
barraponto CreditAttribution: barraponto commentedI'm pretty sure a mixin can fix it by default.
Comment #40
JohnAlbinI had added some sass files to 7.x-3.x branch, but those are really out-of-date now. And the sass files in 7.x-5.x are HTML5 and responsive specific, so I can't just copy over the files.
I've decided to remove the Sass files from 7.x-3.x. I've moved the files to a 7.x-3.x-sass branch in case someone volunteers to update and maintain them.
Comment #41
JohnAlbinNow that I've completed #1446064: Make CSS files be slightly-modified compiled versions of the Sass files, I think we can mark this issue complete.
That just leaves a handful of Sass/Compass issues left which we can tackle in their own issue.
#1181622: Add responsive layouts to Zen
#1440910: Change font styling technique from "em"s to "rem"s
#1439712: Add default variables for use in sass files