ML Strength

Overview

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.

Features

• Fetch data from json file
• Frontend Javascript form validation
• Compiled scss to css
• Customised LeaftLet map
• Enabled PostCSS Autoprefixer
• Mobile responsive

Live Demo

Check out the live site ML Strength

Site Architecture

• 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:
    • 📁src/css scss output / postcss autoprefix input
    • 📁src/data initially populated data to spreadsheets which are inputs of json files in 📁data
  • postcss.config.js enable Autoprefixer plugin
  • package.json check dependencies and CLIs
  • node_modules downloaded packages

Built With

• html, css, Javascript
• SASS
• PostCSS Autoprefixer
• Leaflet

SASS

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

Autoprefixer

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:
      • scss/main.scss
      • scss/reset.scss
      • scss/fontawesome.scss
    • sass output & postcss input:
      • src/css/main.css
      • src/css/reset.css
      • src/css/fontawesome.css
    • postcss autoprefixer output:
      • css/main.css
      • css/reset.css
      • css/fontawesome.css

Reference https://github.com/postcss/autoprefixer#environment-variables https://github.com/postcss/autoprefixer/blob/main/README.md

Libraries

Libraries used in this project including Google Fonts, Fontawesome, and Leaflet are hosted in local server rather than using CDN.

Google Fonts

All font files located in Google Fonts that were used for fontface in ./scss/base/_fontface.scss

Fontawesome

fontawesome imported from node_modules/@fontawesome to scss/fontawesome.scss

Leaflet

Leaflet imported from node_modules/leaflet to assets/leaflet

License

The project is licensed under Apache license 2.0.

Contact

• Beibei Yang, [email protected]