Sass Forever

A sane structure for modern styling

A simple file structure to start any project, with responsive mixins, fonts, and helpers.

View on GitHub Download Starter.zip
styles/
  utilities/
    _variables.sass   # Colors, font families, breakpoints…
    _mixins.sass      # Mixins & responsive helpers

  base/
    _fonts.sass       # Font loading (@font-face, Google Fonts…)
    _reset.sass       # Generic reset

  layout/
    _app.sass         # Global elements (body, h1, p…)
    _header.sass
    _footer.sass

  components/         # Reusable UI blocks
    _container.sass   # Max-width + horizontal padding wrapper
    _button.sass
    _card.sass
    _modal.sass

  pages/              # Page-specific context
    _home.sass
    _about.sass

  helpers/
    _spacing.sass     # Spacing helpers (margin, padding, gap…)
    _visibility.sass  # Visibility helpers (.hidden, .block…)
    _flex.sass        # Flex helpers (.flex, .items-center…)
    _grid.sass        # CSS Grid helpers (.grid, .grid-cols-2…)

  styles.sass         # Single compilation entry point