Ollie is an opinionated boilerplate for creating rapid Single Page Application wireframes and microsites.
To learn more Check out the Documentation || Docs Build:
<3 In loving memory of Ollie, who taught me patenence and love. He filled our lives with much joy and is the basis of what this whole starter-kit was about.
Lots of decisions can go into a boilerplate - so after making these decisions over and over they're now baked into a Stater Kit. Some of the things out of the box are,
-
Webpack Development / Production — Separate dev and prod configs & builds. Local development means fast builds via the in-memory webpack-dev-server, and for production builds every possible optimization needs to be utilized, making for slower builds at the gain of better optimizations.
-
Hot Module Replacement — as changes are made to JavaScript, CSS, or templates, the webpage seamlessly refreshes.
-
Dynamic Code Splitting — Webpack sorts out how to chunk JavaScript in a config file, auto-magically.
-
Async Dynamic Module Loading - Load only the code/resources needed, when they are needed, without render blocking.
-
Modern to Legacy JS Bundles — Deploy modern ES2017+ JavaScript modules while gracefully providing a fallback legacy bundle for legacy browsers (with all of the transpiled code and polyfills).
-
Cache Busting via manifest.json - Sets long expiry data for our static assets, while also ensuring that they are automatically cache busted if they change.
-
Critical CSS — This is something that makes initial page loads significantly faster by only delivering the styles needed first.
-
Workbox Service Worker — Leverage Google’s Workbox project to generate a Service Worker for us that will know about all of our project’s assets.
-
PostCSS — The “Babel of CSS”, lets you SASS like a boss.
-
Image Optimization — Optimize them via automated tools like mozjpeg, optipng, svgo, etc for next step...
-
Automatic .webp Creation — Chrome, Edge, and Firefox all are supporting .webp, and can signifigantly boost performance.
Ollie uses ExpressJS, with a centralized API approach which configures all calls, handles pre-loader logic and also errors.
To learn more Check out the Documentation.
Added in a light-weight frameworks to help scaffold CSS. You can easily swap it for whatever front-end framework you wish.
Its referenced in the <head> tag in /src/index.ejs.
<!-- Load Allegretto from CDN -->
<link rel="stylesheet" href="https://unpkg.com/allegretto@latest/dist/retto.min.css" type="text/css" media="all">| Project | Status | Description |
|---|---|---|
| Allegretto |  |
Lightweight CSS Framework |
To learn more Check out the Documentation
- Install Node 6 or newer. Need to run multiple versions of Node? Use nvm or nvm-windows
- Clone this repository. -
git clone https://github.com/VirtuallyCreative/ollie-ui.gitor download the zip - Make sure you're in the directory you just created. -
cd ollie-ui - Install Node Packages. -
npm install - Run the app. -
npm start -sThis will run the automated build process, start up a webserver, and open the application in your default browser. When doing development with this kit, this command will continue watching files all your files. Every time you hit save the code is rebuilt, linting runs, and tests run automatically. Note: The -s flag is optional. It enables silent mode which suppresses unnecessary messages during the build.
- Allegretto - Lightweight CSS Framework
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
We use SemVer for versioning. For the versions available, see the tags on this repository.
- Al Romano - Initial work - Virtually(Creative)
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details
- Based on learnings from "Javascript Development Environment" - Pluralsight course