Compass/Foundation Grid
Chris Colman
I’ve been looking into Zurb’s Foundation Grid Compass source code on git.
What I’ve noticed is that while Compass’ Blueprint framework has lots of mixins and functions I can’t see any of these in Zurb’s Compass framework for their Foundation Grid.
Does this mean that it’s harder to do semantic layouts with Foundation Grid than say, Blueprint, which has the functions and mixins?
I have a need for a pattern that repeats itself in a design but at different levels.
The pattern consists of:
Title
Description
Button
At higher levels I want the text to be bigger and use large Foundation buttons but at lower levels I want the text to be smaller and use the small Foundation buttons.
However in the HTML layout for each pattern I just want to use class=”my-button” and let the CSS control the size of the button by the context (containing CSS class) that the pattern falls in.
Is this possible without mixins?
Yours sincerely,
Chris Colman
Pagebloom Team Leader,
Step
Ahead Software
pagebloom - your business & your website growing together
Sydney: (+61 2) 9656 1278 Canberra: (+61 2) 6100 2120
Email: chr...@stepahead.com.au
Website:
http://develop.stepaheadsoftware.com
Chris Colman
I think I can use @extend to create my own mixins that extend from the core Zurb ones.
You received this message because you are subscribed to the Google Groups "Compass" group.
To post to this group, send email to compas...@googlegroups.com.
To unsubscribe from this group, send email to compass-user...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/compass-users?hl=en.
Chris Colman
Well this is confusing. Seems to be a number of Compass Foundation plugins on github:
https://github.com/styx/compass-foundation
https://github.com/zurbchris/ZURBsass/tree/179edb4d33dfa858bcea570838cbcb62f17a2d90/zass/zass.gemspec - giving 404 error on github
https://github.com/whtwtr/compass_zurb_foundation - seems not constructed yet!
Somehow I managed to get styx/compass-foundation and /zurbchris installed
Not sure what I should be using. Any ideas?
Matthew Helmick
Chris Colman
>
> For the time being, you're right, to get the functionality you need
you
> will need to use @extend to extend Foundation classes to your own
semantic
> class/id names. I think this does create some code bloat, however. I
would
> rather have a column(colspan) mixin.
Whoah! I just realized the code bloat you mention using @extend with
Zurb Foundation is really significant.
Our compass generated ZURB foundation .css file is 750kb - the largest
chunk of content on our page - larger than all the rest (HTML, IMAGES,
javascript) put together.
Admittedly it is cached and so only loads once but it makes for a slow
initial page experience which isn't good.
There are *a lot* of comments in there. Can we tell compass to strip
comments, compress the .css somehow? This might give a short term fix to
help reduce the size of the file.
I also can tell how to tell foundation-sass to exclude things I don't
want. There's just a standard 'import all' type setup:
/ ZURB Foundation settings
// Uncomment and adjust things in this file to create your own settings.
@import "settings";
// Importing Foundation
@import "ZURB-foundation";
Chris Colman
I found out how to compress and remove comments – right there in the config.rb! Who would have thought ;)