
Themes:: If you have different themes for your app (dark mode, admin, and so on) put them in this folder.Ībstracts:: Put all your functions here, along with variables and mixins. Pages:: You may sometimes have a page that has its own specific style, that stands out from what you do usually. Layout: used to layout the different parts of your page, that is to say, your header, footer, navigation, section, your own grid, and more. This folder contains all the components used to build your pages like your buttons, forms, swipers, popups, and so on. For example: typography rules, animations, utilities (by utilities, I mean classes like margin-right-large, text-center, …) and so on.Ĭomponents: The name is explicit here. By boilerplate, I mean all CSS code you’re gonna write each time you’ll start a new project. Structure desctiption (it will be updates from time to time) The Styles structure (it just 7 folders):īase: in here, put all your boilerplate code. Repository of this article's template (in future I want to make starter-tamplate based on this template) : How to use Styles structure based on this article by FreeCodeCamp: The starter-template is based on these sources: htaccess file with caching rules for web server. This is template for front-end projects (HTML, CSS, JS) with Bootstrap 4 (grid & reboot), Font-Awesome 5, Gulp, Pug, Sass, Browsersync, Autoprefixer, Clean-CSS, Uglify and Rsync.
