Serving Your Front-End

Lydia joins Ben to talk about the front-end tools that thoughtbot designers use: Bourbon, Neat, Bitters, and Refills Then, see them in action while styling a production app! Suspenders Bourbon Neat Bitters Refills Normalize Rails
This is a companion discussion topic for the original entry at https://thoughtbot.com/upcase/videos/serving-your-front-end

You canā€™t action me in the middle

Haha

Nice to get an overview of all the different frontend tools. One thing I was wondering about though is that you used the arbitrary width: 500px on the form, but doesnā€™t that go against the whole idea of using a grid?

Iā€™d personally use span-columns as you did initially and then use shift to center it. So if you do span-columns(6) you have 12 - 6 = 6 columns left, or 3 on both sides. Therefore shifting the form 3 columns to the right ( shift(3) ) will center the form without setting any arbitrary widths. This way you still get all the benefits of using the grid such as the ability to change the global width of the columns, using breakpoints to span more or less columns depending on the viewport size, etc.

1 Like

Nice to see a weekly iteration on front end design.

At a certain moment in the video, Lydia explains what is meant by a ā€˜semanticā€™ grid framework. I would add to this that html markup is about describing the content of document, while CSS is about how the document should look and Javascript is about the behaviour of the document.

Lotā€™s of popular grid frameworks like Bootstrap and Foundation are filling the markup with code that doesnā€™t describe the content, but itā€™s styling. Classes named like ā€˜col-1-largeā€™, ā€˜col-2-smallā€™, etc ā€¦ This code should be in the CSS, not in the html markup because itā€™s not describing itā€™s content.

A semantic grid framework like Neat also make your html markup a lot cleaner, as it isnā€™t polluted with all this styling code.

greetings,

Anthony

Agreed that this does seem better. I think it may have just been the heat of the moment that took us down the simpler, but perhaps not-as-good path.

@acandael I agree completely on your characterization of neat vs. bootstrap in terms of being semantic. Iā€™ve played with both neat and bootstrap. I find that as a non-designer, I can get something up and running a bit faster with bootstrap. But in the end I have HTML that is littered with class names that declare styling (column widths, centering, etc.) I find this makes it much harder for me to hand something off to a designer as they have to do a lot of work to ā€œde-polluteā€ the HTML to make it more semantic.

So while I still do a lot of prototyping using Bootstrap, it makes me feel kind of dirty and I think over time Iā€™ll gravitate back to using neat as it just feels like a cleaner solution which more closely mimics the intent of separating content from styling.

I really like the Bourbon suite of tools. I used them to build www.numbers.kitchen recently.

1 Like

@Andy, nice website.

I feel itā€™s a bit unfortunate that after talking about using semantic markup that you guys ended up using "container" as a class name while "content" may have been better. While itā€™s still common for presentational class names to be used whilst hacking out a design, itā€™s important to come back and name HTML classes on elements after their function. Iā€™ve been implementing new features using BEM and find that it works much better to break up UIs into components that can be shared everywhere.

Itā€™s also a CSS smell (yes they exist in CSS too!) to over-qualify selectors such as form.simple_form.

If anyone is interested in guidelines on how to write Sass, Sass Guidlines is a great resource. scss-lint is really useful and integrates with vim using the Synastic plugin.

1 Like

Hi Aaron, thanks for these great resoureces.

No worries, hit me up if youā€™re looking for advice on front end :smile: