4. Front End Overview

Jump to bottom

christine edited this page Sep 19, 2017 · 1 revision

Front-End Overview

Most of the front-end assets (SCSS, JavaScript, fonts, icons, images) reside in the fec-cms/fec/fec/static/ folder.

CSS Overview

SCSS files are automatically compiled and served by the Django compressor plugin.
All the SCSS files are located in fec-cms/fec/fec/static/scss

JavaScript Management

JavaScript files are in fec-cms/fec/fec/static/js
JavaScript Handlebars templates are in fec-cms/fec/fec/templates
JavaScript tests are in fec-cms/fec/fec/tests/js.
All JavaScript files are compiled using Webpack, and the configuration file is in fec-cms/fec/webpack.config.js.
- All pages load vendor.js (has jQuery and handlebars requirements), and either the init.js or data-init.js (pages in the data app).
- Then there are JS files for dedicated pages like the home page, elections, unique datatables, etc. These are compiled into their own JS files from fec-cms/fec/fec/static/js/pages.
- Legal search filters are controlled by a separate JS app using React and written in ES6. These files are in fec-cms/fec/fec/legal.

Icons

SCSS icons are generated by a Gulp script (fec-cms/fec/gulpfile.js), and run by the command npm run build-icons.
- This command takes SVG files from fec-cms/fec/fec/static/icons/input, minifies them into fec-cms/fec/fec/static/icons/output, and then produces a SCSS file of icon variables to use in fec-cms/fec/fec/static/scss/_icon-variables.scss.