Using Compass with PW?

[Russell]

Hi all,

I'm trying to start using Compass &SASS to create my PW templates. I'm starting from the Zurb Foundation 5 templates, but this question applies to any PW work I think.

Question is basically, do you/how do you setup a compass project within the PW structure? Do you just create a new compass project at the site/ level, and point to the PW .css directory, and use the sass/scss default compass directory to do your edits in, or is it more involved than that?

I assume you do need a configuration.rb setup, which the compass update command reads to find the input and output directories?

I'm using OSX and MAMP to design locally, then will upload my final site.

Thanks.

[Joss]

I use Prepros and then just get it to watch the right directory.

So, with Foundation 5, for instance, I have all the scss files in a directory called scss within templates. And then that outputs to a foundation.css in a css directory.

And that is about it.

Really, it has nothing to do with ProcessWire at all, other than with PW all your template work needs to be inside /site/templates/ so that is where you need to do it all.

If you go look at my foundation profile:

https://processwire.com/talk/topic/5293-zurb-foundation-5-profiles/

You dont need to install the entire profile, but if you look at the templates folder, all the foundation bits are all ready to go, with all the scss files.

[alan]

Hi Russel, welcome to PW

Yes you need the .rb file if you are using Compass and you're right implying that there is nothing 'special' to do to make Compass & SASS play with PW.

One easy way to start is to build the HTML (CSS, SASS, Compass) for a static page ignoring PW to check you are happy with your implementation of those technologies (that they work) then set about slicing up the one HTML file and replacing it with PW. For example at it's simplest getting PW to render the content of the TITLE tag to check the page outputs the static HTML parts and the new PW part (the TITLE tag) all the while keeping the structure all good for Compass and SASS.

Once you have this sussed then it's just a case of how you build your pages (templates).

There is a FAB site to deconstruct and learn from, I can't recall which it is :/ sorry, but I think it's the skyscraper site.

You may want to buy CodeKit if you've not done so already.

This is a huge topic and mine is a little reply post so sorry not told you more or specifics, but bottom line PW is completely agnostic of your mark-up, CSS etc and it will work BEAUTIFULLY with Compass, SASS, Susy (Susy  is superb).

Good luck and enjoy

[Russell]

Hi Russel, welcome to PW

Yes you need the .rb file if you are using Compass and you're right implying that there is nothing 'special' to do to make Compass & SASS play with PW.

Thanks, more like re-welcome I started 6 months ago but didn't get far, now it's like starting all over again, but this time I'm aware of the concepts, just need to get to the nuts & bolts.

I'm reading through Compass starter stuff, and it's all about creating a new project from scratch, with an empty site, so I guess my question was just about setting up Compass requirements in the right place within the PW site structure.

I use Prepros and then just get it to watch the right directory.

So, with Foundation 5, for instance, I have all the scss files in a directory called scss within templates. And then that outputs to a foundation.css in a css directory.

And that is about it.

Joss, your template doesn't have the Compass config.rb, which I figured was needed. I guess that's because prepros it all rolled in, internally. I might give it a bit more of a look, but was starting with just cli Compass, hence the difference to your setup.

Thanks.

[Joss]

Yes, prepros and scout (another version) has everything rolled in, which makes it a whole lot easier and you don't need to mess around with compass and ruby separately.

Prepros also will work with less at the same time and has a few other rather neat features. Scout is a bit more basic and only works for sass.

[Russell]

Actually I just had a quick look through the Prepros FAQ, and it seems for anything more than the basics, it has some extra manual requirements, including a Compass config.rb to use Compass extensions.

I might go through the manual setup for now, just so I understand the guts, and then look at Prepros to streamline things when I understand how it all works.

Thanks for the info.

[Russell]

OK, for anyone else looking for this, after looking at the compass create options, and the existing files with Joss's foundation template, I think this is the command line I need, after changing into the /templates directory

compass create --bare --sass-dir "scss" --css-dir "css" --images-dir "img" --javascripts-dir "js"

I used bare just not to overwrite the existing files. If you are starting from scratch, just compass create in the templates directory should do it. Then it's just a matter of "compass watch" in the /templates directory. Even with --bare, it created a ie.scss, print.scss, screen.scss, which probably aren't needed. I'll leave it to the individual to decide what they want to keep.

Oh, and I didn't set a fonts directory, as Fontawesome is included int eh Foundation template I'm using, so you might want that ones as well if you need anything specific.

[Russell]

So I've done a bit more playing, and am starting to get the hang of things.

Just a note on the config.rb. If you create as above, it sets the root directory to "/". In MAMP at least, that points to the server root directory (in this case htdocs/). I had to set it to point to "/site-name/site/templates/" so it would expand rules properly when using compass codes.

[gebeer]

Hi Russel,

you can also take a look at the directory structure of my Foundation 5 profile at github.

I have the config.rb inside the scss and adjusted the paths accordingly.

You could basically put your scss stuff and config.rb anywhere as long as you have the right paths defined in the config.rb.

[Russell]

Thanks gebeer, looking at your setup has helped clarify for me how to override foundation defaults. I couldn't see in Joss's how to do that, so had been modifying the foundation.scss file, even though I knew this would be an issue down the track. Comparing both your templates, they sure are setup different. I didn't think there'd be so much variation. I like bits from both, so I think I'll be frankensteining them

Now I understand how Compass uses defaults I can see how I should be doing it. It's not very intuitive, having to set your overrides before the foundation defaults are loaded, which is what was tricking me up.

[gebeer]

frankensteining - hahaha - hope you won't need too much power to bring it to live ;-)

It took me a while, too, to get my head around the setup. What helped me to finally find the right setup was the section "Working with Existing projects" in the Foundation 3 docs here.

[Joss]

The layout in mine is the same as downloading Foundation bower with everything in the same directories.

The only difference is that I am grabbing jquery and fastclick from cdn.

I am not using foundation.min.js, but rather only importing those bits that are actually needed at any part of the site. I am also not using the minimised css, but compiling from the scss files to foundation.css.

In practice, I minimise during compiling and remove from foundation.scss any components that I wont be using - this shrinks it substantially!