I'm having a hard time keeping my style guide organized, and I was hoping, that someone could give a bit of advise/best practice?
I tend to keep my styleguide structure and my directory structure in parity as closely as possible. That is, say for a project, I have the following sass files all compiled into one big main:
-@import "vars"; -@import "mixins"; -@import "global";
-@import "grid"; -@import "effects"; -@import "colors";
-@import "type"; -@import "thumper"; -@import "table"; -@import "nav"; -@import "microcontent"; -@import "links"; -@import "lightbox"; -@import "input"; -@import "image"; -@import "buttons";
The first few imports are just for my own ease-of-development, the next are basics that I use to create the project, and build the styleguide itself, and then the rest are distinct enough elements that I decided that they deserve their own files.
So then, as I'm building the styles, I'm, in tandem, either building partials, pages, or even just independent sections of one big page that coincide with these independent files (save maybe the dependence on the first few global includes).
Then, as more robust elements or widgets begin to crop up (see: lightbox, microcontent, nav), they can be grouped more easily (lightbox/microcontent each have js dependencies but are both just pulling a link's content in with ajax), they can be thrown into a larger bucket that calls this out, but are still independent from the rest of the styleguide.
Messy, in-progress example: http://mies.billhinderman.com/
Would love to know others' techniques as well.
You can entegration with SASS: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials
I'm also creating a style guide right now. Any advice will help me too..