Minimalist Static Website
I wanted to build a minimalistic static website as the root of my domain. I have designed and built countless web applications using modern frameworks but nothing this simple. I wanted to use the least amount of tooling and keep things as simple as they can be. What I wanted to achieve was,
- A simple website as the root of my domain.
- Needs to be mobile first and fully responsive.
- Modern design.
- Should work reasonably well with at least 80% of current web browser versions (caniuse)
- This needs to load as fast as it can without any bloat.
- The purpose of this root website is to direct the users into my various projects and articles.
- This will be hosted on my home server. So every byte, every style, every transformation counts.
My first approach was to find a boilerplate. I was not able to find anything to my liking so I decided to start from scratch. What I used,
- Module bundler loader: webpack
- JS compiler: Babel
- CSS preprocessor: Dart Sass
- Design / UX : Material Design
The code I'm discussing is available in github.com/kumudug/static_web. (non production quick and dirty poc)
Live demo at : coding-mayhem.com/projects/staticweb
Since this is mostly a static website I'm not going to use any JS frameworks for functionality. When needed latest ES will be used with Babel. Different webpack entry points are used for modularization. The modules are combined into required pages by using HtmlWebpackPlugin. Each module would then compile their own styles, images, scripts into a single html file. Let me make the complex simple.
1. Common colors
2. Material theme and styles with customizations
3. Material component style imports (buttons, cards etc.)
4. Common application styles
These were all combined in "app.scss" and imported into a common module using the "app.js" file.
Each page is organized into a folder inside the root "src" folder. These folders contains,
1. Sass file containing the page styles
2. JavaScript file containing the page code
3. Html file containing the page template
These are then combined using the HtmlWebpackPlugin.
Apart from the above main concepts,
Comments
Post a Comment