fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([staff profile] fu) wrote2013-07-03 19:43

Foundation

I'm hip-deep in learning Foundation / SCSS. Hoping to be able to convert our pages over to it. Benefits of Foundation are many-fold, but the biggest ones for me:

  • responsive, have our pages work on both large screens and smaller screens
  • consistency in appearance across all site pages
  • many major decisions already made -- so backend developers don't have to design an entirely new interface for each new thing they're working on, or try to figure out how to make stuff pretty

As for SCSS, if you know CSS, then you can already write SCSS. Plain vanilla CSS is valid SCSS -- granted, without the exciting logic/calculation bits -- but you can toss your .css file into a .scss file and that will work.

Worth sitting down for an afternoon and learn all the basics, but it's also fairly easy to just start with your current level of CSS knowledge, and ramp up slowly, learning bit by bit as the need occurs.

Slightly worried about adding an additional process, and we'll have to figure that out, but it's really nice, and it's going to make it easier to work with all the classes scattered across all the pages.

My goal is to consolidate all the many implementations we have -- I swear each individual page has a different way to style tables / clear floats / hide elements! -- and end up a neat and clean reference that's flexible enough that we're not tempted to add a new class each time something differs by a little bit (e.g., no more .error, .error-box, .error-bar. To my regret I believe those are all mine)

/dev/classes was supposed to be that, but it got bogged down because I was trying to make decisions on-the-fly as I ran into each case, and it was way too easy to go "well $a is special because it differs from $b a little bit, and $c is just like $a but with a border let's keep that too"

So now I'm trying a different way: start with the Foundation classes/implementation, ignore our own classes as much as possible, and only very reluctantly add new per-page CSS.

So much work to do, and it's probably going to end up being one of those long-running conversion projects, but it's humming along nicely.

(much thanks to [personal profile] foxfirefey for starting work on this during YAPC! This whole thing has been something I've been vaguely aware we should do something about, but never actually started until [personal profile] foxfirefey came along <3 Thanks for your enthusiasm and code. You are awesome)

aveleh: Close up picture of a vibrantly coloured lime (Default)

[personal profile] aveleh 2013-07-03 20:41 (UTC)(link)
This makes me (probably not surprisingly) so happy :)
shadowspar: Side-on picture of a Commodore 64c computer (commodore 64c)

[personal profile] shadowspar 2013-07-04 00:51 (UTC)(link)
It's going well, so far, then? I ask because I know the [community profile] growstuff folks had a go at using Foundation initially, but in the end they got fed up with it and switched to using Bootstrap instead. (FWIW, I don't have any knowledge of or preference for either, and too, the Foundation of late 2012 may be very different from its present state; idk.)

ninetydegrees: Text: badass Dreamwidth dev (badass)

[personal profile] ninetydegrees 2013-07-05 19:15 (UTC)(link)
As I said to Fey, this is very exciting and I'm looking forward to seeing it working as I'm pretty sure it'll end up even more awesome than it sounds. ;) *sending you lots of energy*