I am totally on board with getting rid of that nagging style.css. A few more things I'd recommend:

1) A commented out section of common @includes in the default subtheme sass/scss file . e.g.

@import 960/grid
$ninesixty-columns: 24

Realistically speaking, people are going to want to use widths in their theme beyond the sidebars generated on server. :)

2) Have the screen width layouts included so it's clear how to customize responsive behaviour in a subtheme.

None of these are ground breaking of course, but it'd help the subtheme be a bit complete... I'd err on having things people can ignore vs having them dig around in the main theme (though of course that has the upside of people understanding it better!)

Comments

tsi’s picture

I would consider overriding the grid settings in your code kind of a bad practice, since then the values in theme setting lose all meanings and you lose the possibility of using powerful tools like Delta and Context to control your layout.
If you want these values exported to code for git and such, I would use the default values in the .info file (these will be imported only on initial install of the sub-theme so not a perfect solution but a good one).
About the imports and other commented useful information - it is probably a wise thing to do, since this is the place where people will actually see it.
I'm very much open for patches :)

erutan’s picture

I see your point on including $ninesixty-columns: 24 in the SASS/SCSS file - on smaller projects like the ones I'm working on now I tend to have content on an uncrawled subdomain and then use espresso to override the CSS file on the server (no worry on syncing content), so I'm not running a local instance of Drupal itself when compiling SASS.

I'm still learning compass as I work with your theme (and I've made a few missteps so far), but as I get more comfortable I would be glad to. Are your fluid grids the only custom work done on compass itself?

erutan’s picture

I've written up the following for my own subtheme.

// @import compass/typography
// @import compass/utilities
// @import compass/layout

@import compass/css3
@import 960/grid
BarisW’s picture

Let's discuss a common use-case.
I've set-up my theme using the theme settings and have a main column of 9 cols, and a sidebar of 3 cols. I want to add a view that show the latest 15 nodes, and I want to list them 3 cols wide in the main column. So I need to add the following scss (I presume):

.front .node-teaser {
  @include fluid-grid(3);
}
.front .node-teaser.first {
  @include alpha;  
}
.front .node-teaser.last {
  @include omega;  
}

But whatever I try, I keep getting the error Undefined mixin 'fluid-grid';

@import 960/grid didn't work either, File to import not found or unreadable: 960/grid.

So how can I use the grid functions in my child theme? Please explain ;)

erutan’s picture

I'm running a ruby compiler and the above works for me, are you including $ninesixty-columns: x below the include? I'm definitely compiling widths, though for now I'm just going fixed width as I ported my stylesheets over from another theme and decided to build a fixed desktop first and then see how it scales down (yes yes I know, but this was kind of a learning project for me).

tsi can troubleshoot better, I'm just a semi-ignorant issue commenter that tries to help out. :)

BarisW’s picture

I don't know if it matters, but I use CodeKit to compile. My main problem is that the fluid-grid() mixin can't be found and, if I try to add @import 960/grid in the file, I receive an error that that file cannot be found.

So I wonder how it is possible that your compiler can find 960/grid. I know there is a 960 grid plugin for Compass, but that is a fixed grid.

All help is welcome.

tsi’s picture

As with most sass compilers you should probably tell CodeKit where to find your partials, in this case, the grid mixins are at
/sites/all/themes/sasson/phamlp/sass/extensions/compass/frameworks/960/stylesheets/960/_grid.sass

@erutan, your comments are very much appreciated :)

tsi’s picture

I have committed a change that should improve the commented out info and better comments in general.
I still want to take variables (e.g. gris definitions) out into a separate partial before closing this issue.

BarisW’s picture

I've added add_import_path "../sasson/phamlp/sass/extensions/compass/frameworks/960/stylesheets"; to my config.rb file and the file can be found when using @import 960/grid;.

However, we use scss files in our project, and the file in the 960 grid is a sass file. I'm getting errors in my compiler because it seems to expect an scss file. Any thoughts on how to overcome this?

BarisW’s picture

After long debugging I found out that this issue is triggered by the fact that _gris.sass has a semicolon on line 7. Removing this semicolon fixes the import problems completely ;)

tsi’s picture

#10 is fixed in the dev branch

tsi’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

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

  • Commit c78cab4 on 7.x-2.x, 7.x-3.x, PHPSass, 7.x-3.x-Assetic, 7.x-3.x-susy by tsi:
    Issue #1474182 by erutan : Add more information in subtheme.