A sane structure for modern styling
A simple file structure to start any project, with responsive mixins, fonts, and helpers.
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