Skip to content

Instantly share code, notes, and snippets.

@ayozebarrera
Created August 18, 2014 10:01
Show Gist options
  • Save ayozebarrera/20a6a1c335c68c09f1de to your computer and use it in GitHub Desktop.
Save ayozebarrera/20a6a1c335c68c09f1de to your computer and use it in GitHub Desktop.
Architecture for a Sass Project
// Sass utilities
@import "helpers/variables";
@import "helpers/functions";
@import "helpers/mixins";
@import "helpers/placeholders";
// Vendors and external stylesheets
@import "vendors/bootstrap";
@import "vendors/jquery-ui";
// Base stuff
@import "base/reset";
@import "base/typography";
// Layout related stylesheets
@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
// Components and modules
@import "components/carousel";
@import "components/buttons";
@import "components/cover";
@import "components/dropdown";
@import "components/navigation";
// Page-specific stylesheets
@import "pages/home";
@import "pages/contact";
// Themes
@import "themes/theme";
@import "themes/admin";
stylesheet/
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| ... # Etc…
|
|– components/
| |– _buttons.scss # Buttons
| |– _carousel.scss # Carousel
| |– _cover.scss # Cover
| |– _dropdown.scss # Dropdown
| |– _navigation.scss # Navigation
| ... # Etc…
|
|– helpers/
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _placeholders.scss # Class & placeholders helpers
| ... # Etc…
|
|– layout/
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _sidebar.scss # Sidebar
| ... # Etc…
|
|– pages/
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| ... # Etc…
|
|– themes/
| |– _theme.scss # Default theme
| |– _admin.scss # Admin theme
| ... # Etc…
|
|– vendors/
| |– _bootstrap.scss # Bootstrap
| |– _jquery-ui.scss # jQuery UI
| ... # Etc…
|
|
`– main.scss # primary Sass file
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment