ML strength is a fitness business that have five clubs in Brisbane, Ashgrove, Chermside, Graceville, and Westlake. The website is built with HTML, CSS, Javascript to showcase classes and clubs.
- Fetch data from json file
- Frontend Javascript form validation
- Compiled scss to css
- Customised LeaftLet map
- Enabled PostCSS Autoprefixer
- Mobile responsive
Check out the live site ML Strength
- root:
- index.html
- styleguide.html
- favicon.ico
- 📁html includes all html pages
- 📁css includes all css files
- 📁js includes all css files
- 📁data includes all json files used for this site
- 📁img includes images used for this site
- 📁video includes a video used for help link
- 📁scss includes all scss files
- 📁assets includes assets/fonts used for the site and assets/leaflet files to be able to get map up and running
- 📁logo site logo
- 📁webfonts fontawesome fonts. Can only be in root
- 📁src:
- postcss.config.js enable Autoprefixer plugin
- package.json check dependencies and CLIs
- node_modules downloaded packages
- html, css, Javascript
- SASS
- PostCSS Autoprefixer
- Leaflet
SASS is a css compiler. All styling work were done in scss folder. In 📁scss folder, sass partials (scss files started with underscore) were organised in subfolders. There is an _index.scss file located in each partial folder that loads all partial files in the same partial folder, that can be used by other partial files.
The structure was referenced from https://sass-guidelin.es/#architecture
Postcss's Autoprefixer plugin was used during development. This plugin autoprefix browser's extensions to css files.
In this project:
- scss files in 📁scss folder first complied to 📁src/css folder in which css files are ready to Autoprefixer;
- css files in 📁src/css folder then autoprefixed to 📁css folder
- Command lines can be found in package.json:
npm run sasscss: compile scss to css and Autoprefixer watch both sass and postcss scss/main.scss to src/css/main.css, src/css/main.css to css/main.css in parallel.postcss:build-reset: Autoprefixer reset.css. Build src/css/reset.css to css/reset.css (Since no further changes on reset css, I only need to build no watch)postcss:build-fa: Autoprefixer fontawesome.css. Build src/css/fontawesome.css to css/fontawesome.css (Since no further changes on reset css, I only need to build no watch)- input output:
- sass input:
- sass output & postcss input:
- postcss autoprefixer output:
Reference https://github.com/postcss/autoprefixer#environment-variables https://github.com/postcss/autoprefixer/blob/main/README.md
Libraries used in this project including Google Fonts, Fontawesome, and Leaflet are hosted in local server rather than using CDN.
All font files located in Google Fonts that were used for fontface in ./scss/base/_fontface.scss
fontawesome imported from node_modules/@fontawesome to scss/fontawesome.scss
Leaflet imported from node_modules/leaflet to assets/leaflet
The project is licensed under Apache license 2.0.
- Beibei Yang, [email protected]