I've aready used SASS on one project - I'm a total believer, but it was using it on Bootstrap, which turned out to be a Very Bad Move - not in SASS terms but in framework terms. And o I find myself looking to Foundatoin as a more design/customisation friendly framework.
But I am really really struggling to get a sense of how to impliment sass in the subtheme - which files to import from where, how they relate to the parent theme, compass etc etc.
Two things would help: Documentation, and as others have suggested, a sample sub theme.
I'm totally up for helping create both of these, but, catch22, i'd need to understand enough to get started.
The sample sub theme (as opposed to the starter) need not be fancy or unique - it just needs to demonstrate how the sass will work in practical terms witnin a subtheme.
Right how I've presumed I could used Foundation on a project and i'm really stuck - so heck - anything you can do to spell out sass implimentation in the meantime (eg: a revised readme.txt) will help, and I will in turn promise to help wherever I can – once I'm getting a handle on this.
PS yes I know sass pretty well, have the pragmatic book, have been following compiling css for the last 3 years - only dived in when I could practically use FireSASS for debuging.
Thanks for all the work so far!
Comments
Comment #1
micheas commentedWe are working at syncing up a few methods of what should be in STARTERKIT (and deleting stuff that is useless)
I assume you are looking for a README.txt (or maybe a README.SASS.txt) file that includes:
Please post if you want different information.
Comment #2
ishmael-sanchez commentedDon't think support requests are ever critical. Changing priority.
Comment #3
timoti commentedWhat missing most for me is some sense of how to organize sub theme files.
As a non ruby/commandline designer/themer, with a bit of dev help, I've spent quite a bit of time and getting through various roadblocks to be able to get to the point of being able to work with zurb and compass at a static level.
Chiefly I had to come to terms with the way that foundation and compass style code is actually stored mysteriously 'elsewhere' (ruby framework libraries) and not within the theme where I could see it. Though that isn't explained (adequately to the likes of me( in compass, zurb or third party documentation, I now get that, and it makes a lot of sense. The way in which the @imports and partials work is also confusing, but I'm getting there on that
Given the 'frameworkness' approach of zurb and compass , i'm less clear of the value of having a separate sub theme. In the past I've been a big practitioner of sub theming, but here it strikes me that compass and zurb really are the master theme.
Specifically, it appears sub theme style is to completely replace the master theme styling, and this seems to make much of the mast theme redundant. Am I right here?
Either way, it would still help enormously to have a sample sub theme as part of the package. Any chance of that soon?
And if I can get my head around that.. the offer still stand to help with dox to help non devs like myself get to grips with this easier
(Apologies re the previous 'urgency' - have been somewhat dependent on getting this sussed for all my d7 theming, and in that sense 'mission critical' for my project, but in the end it all just had to go on hold. now back at the coalface)
Comment #4
timoti commentedAnother thing that I think will be helpful is to have documented is some clarity on how this theme differentiates from the static foundation package. For instance the static version has a 'central' app.scss importing _settings.scss etc
but this theme has screen.scss importing "compass/reset";
Is there any clear advantage in implementing stylesheets so differently from the zurb static version? And if so can we have it clearly documented what those differences are and why they are there?
Additionally - following up my earlier comments, in screen.scss we have:
* In this file you should write your main styles. (or centralize your imports)
However, if I remember right, the readme says to not do anything to the parent theme and do all styling in the subtheme. So I'm mighty confused about where to do what here. For now, I'm figuring i should flag the sub theme and just do everything an a forked main theme, until I can understand how these are supposed to relate to each other.
Comment #5
ishmael-sanchez commented@timoti thanks for your comments.
Maybe I can shed some light on your questions. The goal of the theme is to work out the box but also work if you want to use Sass. However, since it's kinda of implied if you are using Sass you are more of an advanced themer right now there is more of a burden on those themers, but I'm open to suggestions to improve that.
My suggestion is copy the config.rb and the sass folder in your sub theme and update your info file to point to the overriding CSS.
As mentioned before this theme caters to users who might just want to use the base theme, also it's always a best practice in my opinion to inherit from a base theme which does all the overriding (check out the template.php it's working pretty hard for you to just start using foundation and not fight to get Drupal working with it) for you and if you need to change a file or something from the framework you do it in your base theme once.
I disagree, everything can get along and actually zen's implemention is very similar only zen really courages you to sub theme and not use the base theme at all.
I'm not following you, no that's not it at all. Just from a template perspective the base theme is doing a lot of work for you. If you are worried about styling just override the CSS files. In fact the sub theme should only be your custom styling for your particular site.
One already exists, look at the starter folder and checkout the readme.
Awesome, let me know.
You might be looking at old files try doing a git pull.
Do everything in the sub theme, as mentioned above you can copy the config.rb and sass folder into your theme and use your sub theme's version
Comment #6
timoti commentedI'm coming back to this after some months.
Firstly thanks for the detailed responses above. But I had to put this aside for a while- I was simply stuck getting my little designer brain around the intangibility of importables that are located 'somewhere' that isn't in the theme, had issues with missing mixins, and had to just move on and do the best I could with SASS and a bit of foundation hackery on my projects. I have taken some comfort that css guru Chris Coyer had a similar experience - just had to put off Compass and make the most of sass in the meantime.
Re documentation - I am developing cheatsheets which may ultimately have some value - starting with abroad overview of how compass, zurb (and FWIW bourbon) framework elements complement each other. I just need to be a bit more confident about my own understanding before any of my dox will be worth sharing. And once I do have a better conceptual understanding I'll be sure to put some more effort into making the path easier for other non-developers, by way of guides or whatever.
And now it's the new year, and I'm more determined to do this thing properly, though despite buying books and watching videos and dissecting files and code, some key things remain very opaque. Particularly as the theme readme is strong on tpl customisation - (it's standard theming info really), but there's nothing on stylesheet management:
Mainly it's still not clear to me how the 'in-theme' foundation scss files relate to the 'in-GEM' foundation and compass files. There is some correlation between [theme]/sass/foundation-style/*.scss and my /Library/Ruby/Gems/1.8/gems/zurb-foundation-3.2.3/scss/foundation/components/modules/*.scss, but also some notable differences.
Do I understand this correctly: That with the current implementation, the [theme]/sass/foundation-style files are essentially overrides (bypassing the GEM files) in order to play nicely within drupal, and that outside of these files, all foundation (and compass) imports are from the GEM?
Thanks again.
Comment #7
timoti commentedI've also been thinking ahead to what overall documentation would help designers, or non GEM savvy developers be able to easily get on top of a Foundation / Compass based theme. Specifically I'd suggest the following components:
These different components could be available a a zipped kit, and/or inline content within drupal.org. Best to keep thse out of the theme codebase (don't want parent theme updates adding a bunch of dox cruft to production sites). However the readme.txt should be updated to include some basic info on the stylesheets as well as the current tpl info, and refer to the fuller dox online.
Strong documentation has been a big part of Zen's popularity (thogh FWIW, I've never been so found of the theme itself) and I do think that if comparable resources, or more were were available for this Foundation theme, then it would see far greater take up by the people who will be able to do most with it: designers.
As above, I'm now in a situation were I can contribute to this, as long as I personally have a baseline of understanding in some key areas. If, as has been indicated, the maintainers are receptive to this, a possible way forward is that I simply get on with drafting parts of the above, and submit it to the maintainers for correction. Even if I get a lot wrong, it will at least be documentation developed and structured from the POV of the kind of user who needs it most and can easily be knocked into shape with minimal effort from the maintainers. Of course I'd prefer to not do this completely in the dark, so some communication upfront would be helpful.
As I say, this is finally a good time for me to be working on this, before project demands escalate, so please let me know if this is agreeable. And if so, perhaps Priority/Status could be changed to Normal/Active :) ?
Comment #8
chrisjlee commented@timoti:
Depth of documentation for what you're asking for IMHO seems a bit beyond the scope of this project. If you're going to use the sass files it would require you to already know sass.
If you're about to customize this theme we'd have to assume that you've reviewed the Zurb Foundation Documentation and you're probably a really advanced themer.
To solve this problem I think I/we'll have to change the project description page and provide resource links.
I also went ahead and provided documentation in code in the _settings.scss file for users to understand how to customizations work.
Would others agree?
Comment #9
MixologicI wouldn't agree with that statement. While I dont think there is a need to do theme developer level of documentation, it's not clear how to extend this theme.
One of the major reasons for using a front end framework like Foundation or Bootstrap is to leverage the scss or less files that are intrinsic to them.
I would like to do simple customizations to the theme, simple stuff like the colors, which are all in _settings.scss file. Maybe adjust a border thickness and swap out some fonts. It would be a very bad idea to override those things in custom.css in a subtheme, when I ought to be able to set it in one place in the settings file and have it propagate everywhere.
"recompile and preprocess the theme again" isnt very clear as to what, exactly, needs to be recompiled. If I had to take a guess I would say that I need to download foundation 3.2.4 from github (3.2.5 would probably work too), configure sass and compass, alter the _settings.scss file there, recompile the sass into both a minified and full versions, and replace foundation.css and foundation.min.css.
It's not clear whats been removed, whats still there, whats missing, what needs to be put back, and what needs to be compiled. What is the sass directory for and why is it called 'foundation-style' ?
Comment #10
ishmael-sanchez commentedDocumentation for working with Foundation and Sass can be found at http://foundation.zurb.com/docs/sass.html. Remember in the end Drupal really only cares about the what's in the info file so if you have compass or sass set up, the gems for foundation, you can use the gem and customize the settings and mixins and simply compile to a single CSS file which is in your info file and you can override anything else you don't need/want. There are lots of moving parts and different ways to get the end result: compass, sass standalone, running different version of foundation, using codekit, etc.