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