Folder structure for Sass, Neat Bourbon (with Bitters) project

Design Design for Developers Tutorial
1

Hi,

I’m a newbie when it comes to using Sass. I want to start a new project using Neat, Bourbon and Bitters, but I’m not sure how to structure my folders.

How do designers at Thoughtbot structure their folders for designing with Sass, Neat, Bourbon and Bitters?

Thanks for your advice,

Anthony

2

Here is the thoughtbot style guide and I highly recommend you reading this book:

http://smacss.com/

It will not only explain how to structure your folders, but how to write your css too!

Oh and do check out the BEM style(Block__Element–Modifier)

3

Thanks a lot janukevic, I ordered the smacss book.

in the meantime I ordered my folders like this:

  • root folder
    – stylesheets
    — application (holding partial files for each page, eg. _index.scss, _about.scss, …)
    — base (holding general styles, eg _colors.scss, _typography, …)
    — bitters
    — bourbon
    — neat
    main.scss
    main.css

greetings,

Anthony

4

Currently I’m building a website for a retail business (beauty center or spa). I’m using Sass, Bourbon, Neat and Bitters.

I’m using more or less the same file structure as in the Design Best Practices for Front End Development Workshop

I put a repository on Github: https://github.com/acandael/beautysalon

5

for some reason my article.section elements on the index.html page aren’t stacking when I resize to iPhone dimensions.

Am I missing something?

You can see my code at: https://github.com/acandael/beautysalon

thanks for your help,

Anthony

6

Hey @acandael_acanda can you take some screen shots of what it is doing? And point me to the file / line number that you have the css for article.section?

7

Hi Kyle,

I got it solved in the meantime. It was my misunderstanding. I thougt that the Neat grid framework would automatically stack defined elements when reaching breakpoints for smartphones and tablets.

But then I saw in the example files from the Best Practices for Front End Development workshop, that one needs to define breakpoints in a _grid-settings.scss file, and change the behaviour of elements like article when reaching the defined breakpoints.

In the meantime, I’m already designing my second website with Neat and Bourbon, and I gotta say they’re awesome tools that I wouldn’t want to trade anymore.

I’m really looking forward to those videos of the Best Practices for Front End Development workshop.

greetings,

Anthony

8

@acandael_acanda Yea they have both evolved to be really great tools. One thing that I notice relooking at your sass is that you have two _grid-settings.scss files. There is a default one in Bitters. If you’re not using that one you can just delete it.