CSS

Manifesto uses SASS/SCSS to compile its CSS files. In our studio, we use the (Mac-only) software CodeKit to compile our SCSS files. It is configured to read SCSS files from the /site/[theme]/scss/ directory, and to save them in the ../styles/ directory, where they are typically linked in the global page_head.inc file.


When you create a new child theme for your site, you will typically copy over 3 files that relate to your CSS:

  1. The _settings.scss file used to configure global Foundation defaults
  2. The app.scss file, which loads Foundation, the settings file, and your site file below
  3. The site.scss file, which contains CSS/SASS code specific to your site


If you can compile the scss/app.scss file to styles/app.css, Manifesto is already configured to look for it there.


If you have no access to a SASS compiler, build system, nor task runner, and don't know anything about SASS, you should probably:

  1. Leave the default Manifesto app.css file in place
  2. Add your own custom CSS to /site/[theme]/styles/site.css
  3. Add a line to the Global module's page_head.inc file to include your site.css file after the app.css file loads. That way, any of your changes will override the Manifesto defaults.


Javascript

We also use CodeKit to minify some core javascript files, where they are saved with a "-min.js" ending, and linked from the appropriate pages. There are no requirements that you minify your javascript.


If you want to add custom javascript, Manifesto will look by default for a file at /site/[theme]/js/local-min.js. There is a blank local.js file that you may edit or add to, and then minify.


If you cannot minify the file, you may either simply rename the file local-min.js (even if it's not minified), or update the line in page_head.inc where it is included, changing the filename to local.js instead.