So I'm here to present to you all our new style guide. That's on my public dev server, not yet on dreamwidth.org, so don't worry if it's a bit slow.
That page contains the components that we'll be using across the site. The goal is to have every component documented there and to have as little per-page styling as possible. That does two things: make appearance / interactions consistent across the site (good for users); make it easy to refer to design decisions when writing pages (good for developers, especially those of us who aren't really frontend people)
We've used the Foundation framework as our basis for our redesign. That gives us a clean, responsive design that is really easy to make work on large and small screens -- we've had a huge problem with our site headers and certain pages on phones / tablets; it's about time to fix that.
I recommend going over the Foundation documentation btw. They have excellent documentation. It's a good way to get started.
All our Foundation work uses SCSS. SCSS is a CSS preprocessor and it works like CSS but with additional features. You can have variables, if statements, mixins (fragments of code that are used by more than one thing).
It requires an additional compilation step to get all this goodness, but that's possible with one command. Try the following:
pull in the latest changes on develop
Go to /dev/style-guide on your 'hack. It'll be completely unstyled
Run this command:
A couple lines will scroll by, looking like this:
... create htdocs/stc/css/foundation.scss create htdocs/stc/css/normalize.scss ... create htdocs/stc/css/skins/celerity.scss create htdocs/stc/css/skins/gradation/gradation-horizontal.scss create htdocs/stc/css/skins/gradation/gradation-vertical.scss create htdocs/stc/css/skins/lynx.scss
That's good: that means your SCSS files have been turned into CSS, which you can now use.
The SCSS files themselves are in
htdocs/scss. These are the files you'll be touching. After they've been compiled, the generated files are placed in
htdocs/stc/css. These are the files that you'll be including on the page.
So if you have a file:
You include it by doing this:
[% dw.need_res( "stc/css/components/foo.css" ) %]
One last thing, the
compass compile command is good, but when you're developing, the last thing you want is to have to constantly switch from the file you're editing to your terminal window to run a command. Luckily, someone's thought of that. What you can do instead is this:
That watches for any changes in the SCSS files, and compiles them into .css files automatically. Leave that running in a separate window and it'll just do its thing. Just make sure you stop it after you're done developing for a session (just like you do with your Apache servers), because it does use up some resources!
Note: it's magical but not completely so. If you're working on something in dw-nonfree, you'll have to run
compass watch separately in that directory:
cd $LJHOME/ext/dw-nonfree compass watch
But if you're not touching anything in dw-nonfree, then you only need to run it the once.
Please jump in, poke around! Play with things. I'm happy to answer any questions :)
I plan on making several entries on the ongoing conversion. Soon to come: error handling for forms, directory structure for CSS / JS, easier way to format messages for email, etc.