1. Home
  2. Docs
  3. Simpods MVC
  4. Tutorials
  5. SCSS And CSS

SCSS And CSS

Simpods MVC allows you to style your project using SCSS and have it compiled for you on-server. This compiling system will also create source maps for your stylesheets, so that you can easily debug any styling issues. Of course, if you don’t want to use SCSS, you don’t have to! You can simply ignore the SCSS and style straight in the CSS folder.

Before you start with your SCSS, make sure that your settings are correct so that the SCSS compiles without a problem.

Simpods comes with 3 frontend styles for you to override;

  • style-theme: The main styling of the frontend
  • style-navs: The navigation styling for the frontend
  • style-mgpd: A lot of helper classes for margin, padding and font sizes

Where to Create an SCSS/CSS File

Regardless of whether you wish to style using SCSS or regular CSS, your styles should be in specific locations to utilise some of the Simpods MVC functionality.

Admin Styles

When working with admin styles (stylesheets that only load up within wp-admin), your SCSS will go into “mvc/admin/scss”. When this is compiled, the CSS will be located in the “mvc/admin/css” folder. If you are styling straight into CSS without using the SCSS pre-processor, you will store your styles within the “mvc/admin/css” folder, the same place the SCSS will be compiled to.

Frontend Styles

Similarly to your admin styles, when working with frontend styles, your SCSS will go into “mvc/scss”. And again, when your SCSS is compiled, the CSS will be located in the “mvc/css” folder. If you are styling straight into CSS without using the SCSS pre-processor, you will store your styles within the “mvc/css” folder, the same place the SCSS will be compiled to.

min.css or css

Simpods will load min.css, css, min.js and .js. If a min.css/js and a css/js co-exist, min.css will be loaded.

Figure 1 – Simpods MVC style folder structure

Page-Specific Styles

Simpods MVC allows for the ability to automatically enqueue styles for your pages without you having to enqueue them yourself. In order to utilise this functionality, your styles need to meet the following criteria;

  • The file needs to be named the same as your template
    • e.g. “front-page.php” would have a style called “front-page.(s)css”
  • The fully compiled CSS be located in the same place relative to the theme within the “mvc/css” folder
    • e.g. “template/template-about.php” would have a style located in “mvc/css/template/template-about.php”

If your stylesheet follows the above criteria, your style should be automatically enqueued into the page.

Figure 2 – Simpods MVC page style location

Articles