-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
25 changed files
with
342 additions
and
143 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "name": "starbase", | ||
| "version": "3.2.0", | ||
| "version": "3.2.1", | ||
| "author": "Brian Staruk <[email protected]>", | ||
| "contributors": [ | ||
| { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,53 +1,183 @@ | ||
| <!DOCTYPE html> | ||
| <html class="no-js"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>starbase - a modern website boilerplate for web developers</title> | ||
| <meta name="description" content="starbase is an open source website boilerplate built with webpack 5, modern JS (via Babel) & Sass"> | ||
| <title>starbase - it has electrolytes</title> | ||
| <meta name="description" | ||
| content="starbase is a production-ready website boilerplate built with webpack 5, Babel 7 & Sass"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <meta name="theme-color" content="#fefefe"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <!-- header --> | ||
| <header role="banner" class="header"> | ||
| <div class="header__brand"> | ||
| <img src="assets/starbase.png" alt="starbase logo" class="header__image" /> | ||
| <h1 class="header__title">starbase</h1> | ||
| </div> | ||
| <p>starbase is an open source website boilerplate built with <a class="link link--red" href="https://github.com/webpack/webpack" title="webpack on github">webpack 5</a>, modern JS (via <a class="link link--orange" href="https://github.com/babel/babel" title="babel on github">Babel</a>) & <a class="link link--green" href="https://github.com/sass" title="sass on github">Sass</a>. | ||
| </header> | ||
|
|
||
| <!-- main content area --> | ||
| <main class="rich-text"> | ||
| <section> | ||
| <h2>Why it's here</h2> | ||
| <p>starbase was created in early 2017, shortly after webpack 2 was released and it became clear that my favorite development boilerplates were not being maintained or upgraded to the latest versions of the technologies they were built to utilize.</p> | ||
| <p>The primary mission of starbase is to provide an elegant but simple baseline development process that generates clean, production-ready assets while being bloat-free and easy to maintain.</p> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>What it does</h2> | ||
| <p>starbase enables developers to spin up new projects and begin coding within minutes instead of hours. It is ready, right out of the box, to watch your code during development and can handle production builds when you're ready to integrate and/or deploy.</p> | ||
| <p>The <code>start</code> command uses <a class="link link--blue" href="https://github.com/webpack/webpack-dev-server" title="webpack-dev-server on github">webpack-dev-server</a> to serve up your project on a development server (localhost) which will recompile and lint as you modify the source. You can even access this web server via LAN, with a static IP, for testing your app on multiple devices.</p> | ||
| <p>The <code>build</code> command will compile production-ready (linted, minified & optimized) assets that can be integrated into your CMS theme or used as a standalone static website.</p> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>Who it's for</h2> | ||
| <p>starbase is open source and completely free for personal or commercial use. It is a personal project-- a living code styleguide and outlet for technical exploration that you can make your own if you dig it. Pick it up, check it out and make it do a barrel roll.</p> | ||
| <p>If you encounter any problems along the way, please be sure to <a class="link link--purple" href="https://github.com/bstaruk/starbase/issues" title="report an issue with starbase on github">report an issue</a> on GitHub and it'll likely be taken care of faster than you think!</p> | ||
| </section> | ||
|
|
||
| <section id="repo-details" data-owner="bstaruk" data-repo="starbase"> | ||
| <h3>Who's using it</h3> | ||
| <p>Loading...</p> | ||
| <p class="repo-details__description">The information above was loaded asynchronously from GitHub using fetch. Fetch polyfills are included with the app so it'll still work perfectly with older browsers.</p> | ||
| </section> | ||
| </main> | ||
|
|
||
| <!-- footer --> | ||
| <footer role="contentinfo" class="footer"> | ||
| <p>crafted in boston by <a class="h-card" href="https://brian.staruk.net" title="continue to brian.staruk.net">brian staruk</a> | <a href="https://github.com/bstaruk/starbase" title="learn more about starbase on github">starbase on github</a></p> | ||
| </footer> | ||
| <!-- header --> | ||
| <header role="banner" class="header"> | ||
| <div class="header__brand"> | ||
| <img src="assets/starbase.png" alt="starbase logo" class="header__image" /> | ||
| <h1 class="header__title">starbase</h1> | ||
| </div> | ||
| <p>starbase is a production-ready website boilerplate built with webpack 5, Babel 7 & Sass that enables developers | ||
| to get up and running in minutes using some of the most powerful front-end tools available in 2021:</p> | ||
| <ul class="header__features"> | ||
| <li><a href="https://github.com/nodejs/node">Node.js</a>, <a href="https://github.com/webpack/webpack">webpack | ||
| 5</a> & <a href="https://github.com/webpack/webpack-dev-server">webpack-dev-server</a></li> | ||
| <li><a href="https://github.com/babel/babel">Babel 7</a> w/ <a href="https://github.com/eslint/eslint">ESLint</a> | ||
| & <a href="https://github.com/prettier/prettier">Prettier</a></li> | ||
| <li><a href="https://github.com/sass">Sass</a> w/ <a href="https://github.com/stylelint/stylelint">stylelint</a> | ||
| </li> | ||
| </ul> | ||
| <p>The primary mission is to be small in scope so that it may be easily extended and customized, or used as a | ||
| learning tool for developers who are trying to become familiar with webpack 5, Sass and/or modern JS.</p> | ||
| </header> | ||
|
|
||
| <!-- main content area --> | ||
| <main class="main"> | ||
| <section> | ||
| <h2>Getting Started</h2> | ||
| <p>After completing the steps below, you will be ready to begin using starbase:</p> | ||
| <ul> | ||
| <li>Install <a href="https://nodejs.org">Node.js</a> (latest | ||
| LTS recommended)</li> | ||
| <li>Clone starbase into your project root directory</li> | ||
| <li>Install dependencies by running <code>npm install</code> in your project root directory</li> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <h3>Local Development</h3> | ||
| <p>starbase uses <a href="https://github.com/webpack/webpack-dev-server">webpack-dev-server</a> | ||
| to serve up your project at <a href="http://localhost:8080">http://localhost:8080</a> for | ||
| streamlined and | ||
| convenient development.</p> | ||
|
|
||
| <p>After running <code>npm run start</code> in the project root, your <code>/src</code> code will be served | ||
| at the url above and | ||
| watched for changes. As you modify code in <code>/src</code>, the project will be recompiled and your | ||
| browser will | ||
| refresh to show the latest changes.</p> | ||
|
|
||
| <pre>cd /path/to/starbase | ||
| npm run start</pre> | ||
|
|
||
| <h3>Building for Production</h3> | ||
| <p>Use <code>npm run build</code> in your project root to run a production build.</p> | ||
| <p>Production builds compile & minify your assets into <code>/dist</code> for distribution and/or | ||
| integration into | ||
| whatever codebase you'll be using these assets in.</p> | ||
|
|
||
| <pre>cd /path/to/starbase | ||
| npm run build</pre> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>Features & Configurations</h2> | ||
| <h3>JS & Sass linting</h3> | ||
| <p>starbase uses <a href="http://eslint.org/">ESLint</a> for Javascript (ES6) linting | ||
| and <a href="https://github.com/stylelint/stylelint">stylelint</a> for Sass | ||
| linting to encourage consistent | ||
| code throughout your project. The configs (<code>/.eslintrc.js</code> and <code>/.stylelintrc.js</code> | ||
| respectively) include a | ||
| solid foundation to build upon, utilizing the most popular industry-standardized plugins such as | ||
| <a href="https://www.npmjs.com/package/eslint-config-airbnb">eslint-config-airbnb</a> and | ||
| <a href="https://github.com/bjankord/stylelint-config-sass-guidelines">stylelint-config-sass-guidelines</a>. | ||
| </p> | ||
|
|
||
| <h3>Prettier JS Formatting</h3> | ||
| <p>starbase uses <a href="https://github.com/prettier/prettier">Prettier</a> to | ||
| enforce and simplify code | ||
| consistency. If you use VS Code, check out the <a | ||
| href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier VS Code | ||
| extension</a>.</p> | ||
|
|
||
| <h3>HTML Webpack Plugin</h3> | ||
| <p>starbase uses <a href="https://github.com/jantimon/html-webpack-plugin">HTML | ||
| Webpack Plugin</a>, which enables webpack to | ||
| handle assets that are linked from within our HTML templates, such as images and embedded videos. It | ||
| also makes sure our generated <code>.js</code> & <code>.css</code> files are included where they need to | ||
| be.</p> | ||
| <p>Open the webpack configs if you need to add more pages -- and be sure to check out the plugin | ||
| documentation to learn about the more advanced features such as <code>.ejs</code> and environment | ||
| variable support.</p> | ||
|
|
||
| <h3>Asset Hashing (Cache Busting)</h3> | ||
| <p>The assets generated by starbase are <a href="https://webpack.js.org/guides/caching/">hashed</a> as a | ||
| cache-busting | ||
| mechanism. Hashes are generated via file contents so they will only change when the files themselves | ||
| have changed.</p> | ||
| <p>This feature ships with webpack (and the loaders we use), so removing it is pretty straightforward. Open | ||
| the webpack configs and remove the hashes from the filenames, which should look something like this: | ||
| <code>.[hash:8]</code>. | ||
| </p> | ||
| <p>Removing hashing for production builds is not recommended.</p> | ||
|
|
||
| <h3>Build-Time Cleanup</h3> | ||
| <p>starbase is setup to clear all contents of <code>/dist</code> (where compiled assets are piped into) | ||
| during each <code>npm run build</code>. If you'd like to remove this part of the build process, perform | ||
| the following steps:</p> | ||
| <ol> | ||
| <li>remove <code>CleanWebpackPlugin</code> from the plugins array in | ||
| <code>/webpack/webpack.config.prod.js</code> | ||
| </li> | ||
| <li>remove <code>CleanWebpackPlugin</code> as a requirement at the top of | ||
| <code>/webpack/webpack.config.prod.js</code> | ||
| </li> | ||
| <li>remove the <code>CleanWebpackPlugin</code> dependency from <code>/package.json</code></li> | ||
| </ol> | ||
| <p>Removing the cleanup process means that deleted assets in <code>/src</code> will not be deleted in | ||
| <code>/dist</code> | ||
| until you | ||
| manually do so. I recommend keeping the cleanup process intact unless you have a specific reason not to, | ||
| such as having un-managed assets in <code>/dist</code>. | ||
| </p> | ||
|
|
||
| <h3>Fetch & Promise Polyfills</h3> | ||
| <p>Because starbase was built to accommodate ES6 & CommonJS (and not jQuery) it is assumed that you'll be | ||
| using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">fetch</a> for | ||
| asynchronous | ||
| requests.</p> | ||
| <p>Fetch is supported in all modern browsers, but some old dogs still don't support it and that's what we | ||
| need the <a href="https://github.com/stefanpenner/es6-promise">es6-promise</a> & | ||
| <a href="https://github.com/github/fetch">whatwg-fetch</a> polyfills for. | ||
| </p> | ||
| <p>If you want to remove these for any reason, perform the following steps:</p> | ||
| <ol> | ||
| <li>remove <code>es6-promise</code> & <code>whatwg-fetch</code> from <code>/package.json</code></li> | ||
| <li>remove the relevant imports in <code>/src/app.js</code></li> | ||
| </ol> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>Notes & Considerations</h2> | ||
|
|
||
| <h3>Root Path</h3> | ||
| <p>starbase is setup to run with assets referenced via relative paths so generated <code>.html</code> files | ||
| can be opened without needing a deployment. If you plan on deploying to a web server, it'll be a good | ||
| idea to set the <code>publicPath</code> in <code>/webpack/webpack.config.base.js</code>.</p> | ||
| <p>This variable should be set to <code>/</code> if the app will run at the root of a domain or subdomain, | ||
| or to <code>/folderName</code> (example) if it'll be deployed to a subfolder.</p> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>License</h2> | ||
| <p>starbase is open source and free software, so you may to do whatever you wish with it -- commercially or | ||
| personally. You can buy me a beer next time you're in Boston, star the project and tell a friend, or you | ||
| can erase all signs of origin and tell your coworkers that you made it yourself. It's all good!</p> | ||
| </section> | ||
|
|
||
| <section id="repo-details" data-owner="bstaruk" data-repo="starbase"> | ||
| <h2>Who's using it</h2> | ||
| <p>Loading...</p> | ||
| <p class="repo-details__description">The information above was loaded asynchronously from GitHub using | ||
| fetch. Fetch polyfills are included with the app so it'll still work perfectly with older browsers.</p> | ||
| </section> | ||
| </main> | ||
|
|
||
| <!-- footer --> | ||
| <footer role="contentinfo" class="footer"> | ||
| <p>crafted in boston by <a class="h-card" href="https://brian.staruk.net" title="continue to brian.staruk.net">brian | ||
| staruk</a> | <a href="https://github.com/bstaruk/starbase" title="learn more about starbase on github">starbase | ||
| on github</a></p> | ||
| </footer> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| @font-face { | ||
| font-family: 'PT Sans'; | ||
| font-style: normal; | ||
| font-weight: normal; | ||
| src: url('assets/fonts/PTSans-Regular.woff2') format('woff2'), url('assets/fonts/PTSans-Regular.woff') format('woff'); | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: 'PT Serif'; | ||
| font-style: normal; | ||
| font-weight: normal; | ||
| src: url('assets/fonts/PTSerif-Regular.woff2') format('woff2'), url('assets/fonts/PTSerif-Regular.woff') format('woff'); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| %code { | ||
| background-color: $color-selection; | ||
| font-size: 0.85em; | ||
| padding: 0 0.25rem; | ||
| } | ||
|
|
||
| %pre { | ||
| background-color: $color-selection; | ||
| font-size: 0.9em; | ||
| padding: 0.5rem; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| %heading { | ||
| font-family: $font-serif; | ||
| font-weight: normal; | ||
| } | ||
|
|
||
| %heading--h1 { | ||
| font-size: 1.875rem; | ||
| } | ||
|
|
||
| %heading--h2 { | ||
| font-size: 1.5rem; | ||
| } | ||
|
|
||
| %heading--h3 { | ||
| font-size: 1.25rem; | ||
| } | ||
|
|
||
| %heading--h4 { | ||
| font-size: 1.125rem; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| %link { | ||
| text-decoration: underline; | ||
|
|
||
| &:hover { | ||
| text-decoration: none; | ||
| } | ||
| } | ||
|
|
||
| %link--green { | ||
| color: $color-green; | ||
| } | ||
|
|
||
| %link--comment { | ||
| color: $color-comment; | ||
| } |
Oops, something went wrong.