fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([personal profile] fu) wrote in [site community profile] dw_dev2013-11-15 05:17 pm
Entry tags:

Style Guide / Foundation: Getting Started

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:

    compass compile

    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:

     compass watch

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.

denise: Image: Me, facing away from camera, on top of the Castel Sant'Angelo in Rome (Default)

[staff profile] denise 2013-11-16 05:54 am (UTC)(link)
this whole thing makes me so excite. STANDARDIZED COMPONENTS OMG
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2013-11-16 02:22 pm (UTC)(link)
Run this command:

compass compile

Doesn't work for me in putty. Was I supposed to run this somewhere else?
foxfirefey: A guy looking ridiculous by doing a fashionable posing with a mouse, slinging the cord over his shoulders. (geek)

[personal profile] foxfirefey 2013-11-16 05:24 pm (UTC)(link)
Hmm hmm, you're on your dreamhack in $LJHOME? What does it say when you try to run it?
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2013-11-16 05:28 pm (UTC)(link)

Yep. This is what I get: -bash: compass: command not found

ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2013-11-16 06:02 pm (UTC)(link)
It works now. Thanks!
carene_waterman: An image of the Carina Nebula (Default)

[personal profile] carene_waterman 2013-11-16 04:06 pm (UTC)(link)
First, yay on golden ratio typography in Foundation, along with all the other RWD features.

Second, a google search of the Foundation docs pages on the word accessibility is very revealing. As in, it's never mentioned. A lot of people think standards compliant RWD = accessibility by default, perhaps they do as well. It doesn't.

The style guide page you linked contains a great deal of text that is too light a grey for even a white background. I assume this will be fixed in time. (I can't express how much I love being able to assume that, this is the ONLY place that's true.) But, right now it's painful to try to read.

The H6 is smaller than 1em too, which is not a good thing in my opinion.

There is also a lot of missing focus effects. Foundation seems to be using the old-fashioned style of reset that removes the focus outline for aesthetic reasons. Sigh. Perhaps that's infected your design.

I've seen some comments around the web that the Foundation form elements are not good on multiple accessibility fronts, but it seems they finally fixed their icon fonts recently.

Third, I really love the overall design, not trendy flat so likely to look dated soon, not the every CSS3 feature crammed on the page look either. (And not like every Bootstrap page ever.)
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2013-11-16 06:37 pm (UTC)(link)
I'll also take another look at the gray (w3c contrast checker to the rescue).

The orange bit was also almost unreadable to me.

Like c_w I really like the design otherwise. Simple with a subtle hint of fancy sometimes, practical and comfortable.
carene_waterman: An image of the Carina Nebula (Default)

[personal profile] carene_waterman 2013-11-17 05:02 pm (UTC)(link)
Foundation is getting some feedback on accessibility, on github and generally, so they might be fixing some of their issues. I'm not very well versed in form element issues, so I'm no judge.

It's just a shame they can't be trusted to build it in from the beginning, since, as you know Bob, that's always easier than adding it on later.

PS you are all awesome.