Skip to content

Starter template for the HTML and CSS courses on the Masters Programmes at the Universitat Oberta de Catalunya

Notifications You must be signed in to change notification settings

rbuj-UOC/uoc-boilerplate

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

62 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

UOC Boilerplate

UOC Boilerplate is a starter template for the HTML and CSS Tools courses from the Master's Program in Multimedia Applications and the Master's Program in Web App and Website Development at the Universitat Oberta de Catalunya. It aims to provide a basic, modern frontend web development starter pack based on Parcel and including a Sass compiler, an ES6 transpiler, minifiers, an image transformer, and development tools.

This is the 3.x version of UOC Boilerplate, available since the UOC 2020-2 semester.

Requirements

Node.js >= 18.x

Getting started

Clone this repository with git clone, or download a .zip file using the top right green button.

Using the Terminal, navigate to the project folder and run npm install.

Features

  • Uses Parcel v2 module bundler.
  • NPM scripts for fast development and production build (see Commands below).

Stylesheets

  • Sass/SCSS to CSS compilation.
  • Minification and optimization of CSS files on production builds with cssnano (@parcel/optimizer-cssnano).
  • PostCSS features:

HTML

  • Minification and optimization of CSS files on production builds htmlnano (@parcel/optimizer-htmlnano).
  • PostHTML features:

Scripts

  • Allow for modern JavaScript (ES201x/ES8/ES7/ES6…) which is automatically transpiled (for the older browsers set in the package.json) and minifed in production builds, with Babel.

Images

Development

  • Development server launch and live reloading on file changes.
  • Friendly error reporting.

How to use this boilerplate

Content lives inside the src/ folder. If you do not want to change the configuration or are unsure about what you are doing, do not edit files outside the src/ folder.

Always run the following commands during the development stage and for production builds. Please note that it is expected that all projects built with this boilerplate are compiled using npm run build before they are published.

Commands

Command Description
npm run dev Runs a local web server for development and opens the browser to display it. Automatically compiles styles and scripts whenever a file in src/ is changed, and live reloads the browser. This is what must be run on the development stage.
npm run build Compiles and minifies and optimizes the files in the assets folder. The generated compiled and optimized files are located in the dist/ folder. This is what must be run before publishing the project. This is also the build command to be run by external deployment services such as Netlify. The publishable files are then located in the dist/ folder.
npm run clean Deletes the current /dist folder and cache folders.
npm run test Displays a success message if everything is working as expected.

Need help? / Want to help out?

Feel free to create a new issue or drop me a line at [email protected].

Are you using this Boilerplate for your projects or for educational purposes? I would love to hear about it!

About

Starter template for the HTML and CSS courses on the Masters Programmes at the Universitat Oberta de Catalunya

Topics

Resources

Stars

Watchers

Forks

Languages

  • SCSS 56.7%
  • HTML 34.3%
  • JavaScript 9.0%