- prepare webpack: livereload, css (scss, autoprefix), js
- develop using: atomic css
- watch one line layout video
- implement css purge, minify, uglify
- compare css after implementing purge, minify, uglify
- implement stylelint (optional)
- https://1linelayouts.glitch.me/
- https://acss.io/
- https://purgecss.com/
- https://webpack.js.org/
- https://github.com/evanw/esbuild
- https://sass-guidelin.es/#the-7-1-pattern
- https://css-tricks.com/stylelint/
- webpack boilerplate / starter
https://www.uidesigndaily.com/
Design # | URL | One Line Layout |
---|---|---|
#1 | https://www.uidesigndaily.com/posts/figma-landing-page-website-day-955 | Deconstructed Pancake, Pancake Stack, Super Centered |
#2 | https://www.uidesigndaily.com/posts/figma-people-list-card-day-1310 | RAM, Super Centered |
#3 | https://www.uidesigndaily.com/posts/sketch-links-navigation-card-cards-day-1128 | Sidebar Says, RAM |
#4 | https://www.uidesigndaily.com/posts/figma-real-estate-components-cards-profile-details-day-1166 | Line Up, Respect for Aspect |
#5 | https://www.uidesigndaily.com/posts/sketch-ui-components-calendar-details-button-stats-day-1135 | Super Centered, Span Grid 12 |
https://webpack.js.org/guides/getting-started/
yarn init
yarn add -D webpack webpack-cli
touch webpack.config.js
yarn add -D html-webpack-plugin
yarn add -D webpack-dev-server
: setup simple web server for live reloadingyarn add -D express webpack-dev-middleware
: (optonal) setup simple web server with expressyarn add -D style-loader css-loader
yarn add -D sass-loader sass
: https://webpack.js.org/loaders/sass-loader/yarn add -D @fortawesome/fontawesome-svg-core
: add font awesome coreyarn add -D @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons
: add font awesome variantsyarn add -D webpack-merge
: for separating webpack development and production configurationtouch webpack.common.js webpack.dev.js webpack.prod.js
: split out the configuration on the following files. we are not going to usewebpack.config.js
anymore but i'll just leave it here for future reference
- Create html, js and scss file with the same name in the relevant directory. Example:
pages/test-page.html
,scripts/test-page.js
,styles/pages/_test-page.scss
- Add the name (e.g:
test-page
) to htmlPageNames variable onwebpack.config.js
- Add js file to
module.export.entry
- Import scss file to js
- Now you are ready to go :D
- webpack guide documentation is helpful and easy to understand
- we import css from js
- creating html setup for multi page application was quite tricky
- HMR gotcha: https://webpack.js.org/guides/hot-module-replacement/#gotchas