Style Guide / Foundation: Getting Started

[fu]

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:

    htdocs/scss/components/foo.scss

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.

Comments

[denise]

this whole thing makes me so excite. STANDARDIZED COMPONENTS OMG

[ninetydegrees]

Run this command:

compass compile

Doesn't work for me in putty. Was I supposed to run this somewhere else?

[foxfirefey]

Hmm hmm, you're on your dreamhack in $LJHOME? What does it say when you try to run it?

[ninetydegrees]

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

[fu]

Oops sorry about that! Please try again now (using putty, while on your 'hack)

[ninetydegrees]

It works now. Thanks!

[carene_waterman]

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.)

[fu]

I was super excited to have that golden ratio typography, let me tell you ;)

Foundation has some nice-looking custom selects / radio buttons, but I've been holding off on them pending research on whether they're accessible or not. I guess that does answer my question; alas it would have been nice to use them but I'll just have to dig further to find something accessible or write something suitable for our purposes.

The actual base form styling that I'm using from them is CSS-only; as far as I can tell, there's nothing there that hurts accessibility, but I'll take a closer look just in case. I'll also take another look at the gray (w3c contrast checker to the rescue).

I am sad that I missed the focus effects thing! I... the weird thing is I vaguely recall having looked at that and edited the part where they removed the outline but either I misremember, or it got overwritten by some other changes. Either way, irrelevant; I'll look into that and fix it -- thank you for the reminder!

PS I really appreciate the comments on the overall design. That is precisely what we were aiming for, so it's good to know it's hit that balance :D

[ninetydegrees]

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.

[fu]

Thank you! I hope that you have fun playing with it :)

I'm not happy with the orange either; on my list of things to continue poking at, but it's not been good so far!

[fu]

Orange adjusted c/of foxfirefey!

[carene_waterman]

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.