websiteV1

Version 1 of skn.hackclub website

What's included

The npm dependencies included in package.json are:

• bulma
• node-sass to compile your own Sass file
• postcss-cli and autoprefixer to add support for older browsers
• babel-cli, babel-preset-env and babel-preset-es2015-ie for compiling ES6 JavaScript files

Apart from package.json, the following files are included:

• .babelrc configuration file for Babel
• .gitignore common Git ignored files
• index.html this HTML5 file
• _sass/main.scss a basic SCSS file that imports Bulma and explains how to customize your styles, and compiles to css/main.css
• _javascript/main.js an ES6 JavaScript that compiles to lib/main.js

Installing

Now, that you prepared the groundwork for your project, set up Bulma and run the watchers:

cd websitev1
npm install
npm start

As long as npm start is running, it will watch your changes. You can edit _sass/main.scss and _javascript/main.js at will. Changes are immediately compiled to their destinations, where index.html will pick them up upon reload in your browser.

Add live server extention to your VS Code and launch your index.html with it!

Some controlling output is written to the npm start console in that process:

_javascript/main.js -> lib/main.js

=> changed: $HOME/projects/start-with-bulma/_sass/main.scss
Rendering Complete, saving .css file...
Wrote CSS to $HOME/projects/start-with-bulma/css/main.css

Built With

• Bulma - The CSS framework used

Why Bulma?

• Modular, component-rich, compatible and easy to use
• CSS only, no excessive JQuery and keeps the files lite.
• Responsive and well-documented