As per #1921610: [Meta] Architect our CSS, Zurb Foundation should utilize smacss structure as closely as possible:

+ css
    + base
        - normalize.css
        - elements.css
    + layout
        - layout.css
        - layout--medium.css
        - layout--wide.css
    + components
        - button.css
        - dropdown.css
        - pagination.css
        - tabs.css
        …
    + theme / skin
        - theme--light.css
        - theme--dark.css

From: http://drupal.org/node/1887922

Since zurb foundation utilizes this on it's own file structure, still have to figure out how this will work out for a theme.

Remaining tasks

@todo
#1990626: Update info file for inclusion of BAT css file structure

CommentFileSizeAuthor
#12 1991114-12--by-chrisjlee-Create-smacss-structure-f.patch867.06 KBchrisjlee

Comments

chrisjlee’s picture

chrisjlee commented
Issue summary: View changes

update reference

chrisjlee’s picture

chrisjlee commented
Issue summary: View changes

add file structure example

chrisjlee’s picture

chrisjlee commented
Issue summary: View changes

Updated issue summary.

chrisjlee’s picture

chrisjlee commented

Consulted this idea with Ishmael and he agrees with the motion. I've updated the summary with followup issues.

chrisjlee’s picture

chrisjlee commented
Issue summary: View changes

update message

maggo’s picture

maggo commented

Would you rather build that structure using scss and @import's, or with single (compiled) css files, bundled and minified by drupal itself?

alexweber’s picture

alexweber commented

@maggo, I'm not exactly sure what Chris and Ishmael have talked about but personally I think that it's a mixture of both approaches; normalize should be a separate (s)css file, foundation should be a single scss, manually including the desired components and compile to a single css file and drupal-specific theme overrides (like compatibility with admin menu from that other issue) should be a separate (s)css file.

That would leave us with 3 separate css includes in our .info file: normalize, foundation and base theme stuff.

Sub-themes would follow in that logic and presumably the option to disable base theme css would be expanded to discriminate between these files so, for example, a sub-theme could include its own normalize/reset, its own custom foundation but maybe still use the drupal overrides from the base theme.

Ideas?

chrisjlee’s picture

chrisjlee commented

With sass everything should be packaged as one file app.scss.

micheas’s picture

micheas commented

@chris

I don't follow.

While you will compile to one app.css file app.scss can include _drupal.scss _forms.scss _openlayers.scss _panels.scss _colors.sass _views.scss and whatever other underscore files you want to include.

I find that underscore files help people maintain organization as we know where to look for specific css with out having to open a large file and hope that the comments are correct. (much more likely with scss than css but still a bit of an issue.)

maggo’s picture

maggo commented

+1 for #3

alexweber’s picture

alexweber commented

Chris, another argument against having everything in one big app.css file is caching... There's AdvAgg and Core Library and possibly other modules too that provide some sort of advanced smart aggregation/bundling for CSS/JS stuff and I think that, specially if using Foundation as a base theme for the admin theme too, there's situations when you would want to separate normalize, modernizr and foundation from theme-specific stuff, think of it like jQuery, jQuery.once and Drupal.js... since it's guaranteed that they'll be on every page, they can be grouped into one bundle, however other theme resouces might only apply to certain situations so if we decouple them, we make it easier for contrib/users to manage this stuff in a more efficient manner.

Apologies if this doesn't make sense, it's early and I'm really jet-lagged :)

chrisjlee’s picture

chrisjlee commented

Yeah let me clarify before you bring out the pitchforks. :).

If you look at the zen theme. I'm just stealing their approach. The app.scss file will be just a boot file that contains a bunch of partials as described by Micheas in #5.

See the styles.scss file in zen as an example of where i'd like to go:

/**
 * @file
 * Styles are organized using the SMACSS technique. @see http://smacss.com/book/
 *
 * When you turn on CSS aggregation at admin/config/development/performance, all
 * of these @include files will be combined into a single file.
 */

/* Import Sass mixins, variables, Compass modules, etc. */
@import "init";

/* HTML element (SMACSS base) rules */
@import "normalize";

/* Layout rules */
@import "layouts/responsive";

/* Component (SMACSS module) rules */
@import "components/misc";
// Optionally, add your own components here.
@import "print";

/* SMACSS theme rules */
/* @import "theme-A"; */
/* @import "theme-B"; */

Besides with a sass approach one compiled file this removes the dependancy for you to even need to aggregate your files. This gives you the flexibility to go without using another module. Compiling it will ensure your sass files are loaded correctly as well.

Does this all make sense?

alexweber’s picture

alexweber commented

@Chris, yeah it makes perfect sense! :)

At the end of they day I think that not only are both approaches good and valid, but they're also relatively straightforwards to override in sub-themes in case anyone really needs one or another approach too.

So, to summarise: let's go with the solution you described!

We can haz patch? (or direct commit!)

ishmael-sanchez’s picture

ishmael-sanchez commented

+1 for #8

chrisjlee’s picture

chrisjlee commented
Assigned: Unassigned » chrisjlee

I'll get you a patch here. Hopefully this weekend.

chrisjlee’s picture

chrisjlee commented
Status: Active » Needs review
StatusFileSize
new 1991114-12--by-chrisjlee-Create-smacss-structure-f.patch867.06 KB

Mega patch. If there are no large overall issues i'll commit this in the next few days.

alexweber’s picture

alexweber commented
Status: Needs review » Needs work

Nice patch Chris!

I found some minor things:

  1. If we're removing all sass stuff from the base theme, we should also get rid of config.rb, Gemfile and Gemfile.lock
  2. STARTER/Gemfile needs to have the Foundation version updated in the comment
  3. STARTER/Gemfile.lock should be regenerated, it's way out of date
  4. Not sure why we're ignoring MIT-LICENSE.txt in our .gitignore since it doesn't look like its used in Foundation, also there's an extra new lines at the end
  5. Minor feature request: I'd like to specify some development defaults in STARTER/config.rb; set output style to expanded and show line comments to true

And again, awesome patch dude, I love it and it'll close a couple other issues too!

alexweber’s picture

alexweber commented
Category: support » task

Chris, please take a look at this comment too: https://drupal.org/node/2025469#comment-7769627

chrisjlee’s picture

chrisjlee commented

@alex. Valid feedback and good catches. I'll update for you here later this week. I'm nearing a deadline.

alexweber’s picture

alexweber commented

@Chris,

Do you just wanna commit this now and I can follow-up with the catches?

I have some time this week so it's as good a time as any! :)

chrisjlee’s picture

chrisjlee commented

Not sure why the git commits haven't updated on commit page but committed:

13998da

chrisjlee’s picture

chrisjlee commented

ah here it is. I cherry picked it so the timestamp will be in the past: http://drupalcode.org/project/zurb-foundation.git/commit/13998da

alexweber’s picture

alexweber commented
Assigned: chrisjlee » alexweber

Awesome Chris!

I'm making the changes I mentioned in #13

alexweber’s picture

alexweber commented
Assigned: alexweber » Unassigned
Status: Needs work » Fixed

http://drupalcode.org/project/zurb-foundation.git/commit/26bb6db
http://drupalcode.org/project/zurb-foundation.git/commit/feac1d2
http://drupalcode.org/project/zurb-foundation.git/commit/3dfed35

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

(not verified) commented
Issue summary: View changes

Updated issue summary.