diff --git a/.editorconfig b/.editorconfig index 11f3038..4a7ea30 100644 --- a/.editorconfig +++ b/.editorconfig @@ -8,8 +8,5 @@ charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true -[*.{ejs,htm,html}] -indent_size = 4 - [*.md] trim_trailing_whitespace = false diff --git a/.stylelintrc.js b/.stylelintrc.js index 399dcae..4a3c2f4 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -10,6 +10,5 @@ module.exports = { 5, { ignore: ['blockless-at-rules', 'pseudo-classes'] }, ], - 'scss/at-extend-no-missing-placeholder': null, }, }; diff --git a/README.md b/README.md index 870eb47..a54c028 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ [![dependencies status](https://david-dm.org/bstaruk/starbase/status.svg)](https://david-dm.org/bstaruk/starbase) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fbstaruk%2Fstarbase.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fbstaruk%2Fstarbase?ref=badge_shield) -starbase is a production-ready website boilerplate built with webpack 5, modern JS (via Babel) & Sass that enables developers to get up and running in minutes using some of the most powerful front-end tools available in 2021: +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: * [Node.js](https://github.com/nodejs/node), [webpack 5](https://github.com/webpack/webpack) & [webpack-dev-server](https://github.com/webpack/webpack-dev-server) * [Babel 7](https://github.com/babel/babel) w/ [ESLint](https://github.com/eslint/eslint) & [Prettier](https://github.com/prettier/prettier) @@ -12,13 +12,7 @@ starbase is a production-ready website boilerplate built with webpack 5, modern 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. -## License - -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! - -## Using starbase - -### Getting Started +## Getting Started After completing the steps below, you will be ready to begin using starbase: @@ -100,3 +94,7 @@ If you want to remove these for any reason, perform the following steps: starbase is setup to run with assets referenced via relative paths so generated `.html` 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 `publicPath` in `/webpack/webpack.config.base.js`. This variable should be set to `/` if the app will run at the root of a domain or subdomain, or to `/folderName` (example) if it'll be deployed to a subfolder. + +## License + +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! diff --git a/package-lock.json b/package-lock.json index b96cad4..faa1983 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "starbase", - "version": "3.2.0", + "version": "3.2.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index a1b8078..04e1e62 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "starbase", - "version": "3.2.0", + "version": "3.2.1", "author": "Brian Staruk ", "contributors": [ { diff --git a/src/app.scss b/src/app.scss index 5a0eae7..7f36b40 100644 --- a/src/app.scss +++ b/src/app.scss @@ -6,7 +6,5 @@ /* Unordered Imports */ @import 'styles/footer'; @import 'styles/header'; -@import 'styles/heading'; -@import 'styles/link'; -@import 'styles/rich-text'; +@import 'styles/main'; @import 'styles/repo-details'; diff --git a/src/styles/fonts/PTSans-Regular.woff b/src/assets/fonts/PTSans-Regular.woff similarity index 100% rename from src/styles/fonts/PTSans-Regular.woff rename to src/assets/fonts/PTSans-Regular.woff diff --git a/src/styles/fonts/PTSans-Regular.woff2 b/src/assets/fonts/PTSans-Regular.woff2 similarity index 100% rename from src/styles/fonts/PTSans-Regular.woff2 rename to src/assets/fonts/PTSans-Regular.woff2 diff --git a/src/styles/fonts/PTSerif-Regular.woff b/src/assets/fonts/PTSerif-Regular.woff similarity index 100% rename from src/styles/fonts/PTSerif-Regular.woff rename to src/assets/fonts/PTSerif-Regular.woff diff --git a/src/styles/fonts/PTSerif-Regular.woff2 b/src/assets/fonts/PTSerif-Regular.woff2 similarity index 100% rename from src/styles/fonts/PTSerif-Regular.woff2 rename to src/assets/fonts/PTSerif-Regular.woff2 diff --git a/src/index.html b/src/index.html index 718671b..82b4581 100644 --- a/src/index.html +++ b/src/index.html @@ -1,53 +1,183 @@ + - starbase - a modern website boilerplate for web developers - + starbase - it has electrolytes + + - - - - -
-
-

Why it's here

-

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.

-

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.

-
- -
-

What it does

-

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.

-

The start command uses webpack-dev-server 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.

-

The build command will compile production-ready (linted, minified & optimized) assets that can be integrated into your CMS theme or used as a standalone static website.

-
- -
-

Who it's for

-

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.

-

If you encounter any problems along the way, please be sure to report an issue on GitHub and it'll likely be taken care of faster than you think!

-
- -
-

Who's using it

-

Loading...

-

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.

-
-
- - - + + + + +
+
+

Getting Started

+

After completing the steps below, you will be ready to begin using starbase:

+
    +
  • Install Node.js (latest + LTS recommended)
    • +
  • Clone starbase into your project root directory
    • +
  • Install dependencies by running npm install in your project root directory
    • + +
+ +

Local Development

+

starbase uses webpack-dev-server + to serve up your project at http://localhost:8080 for + streamlined and + convenient development.

+ +

After running npm run start in the project root, your /src code will be served + at the url above and + watched for changes. As you modify code in /src, the project will be recompiled and your + browser will + refresh to show the latest changes.

+ + 
cd /path/to/starbase
+npm run start
+ +

Building for Production

+

Use npm run build in your project root to run a production build.

+

Production builds compile & minify your assets into /dist for distribution and/or + integration into + whatever codebase you'll be using these assets in.

+ + 
cd /path/to/starbase
+npm run build
+
+ +
+

Features & Configurations

+

JS & Sass linting

+

starbase uses ESLint for Javascript (ES6) linting + and stylelint for Sass + linting to encourage consistent + code throughout your project. The configs (/.eslintrc.js and /.stylelintrc.js + respectively) include a + solid foundation to build upon, utilizing the most popular industry-standardized plugins such as + eslint-config-airbnb and + stylelint-config-sass-guidelines. +

+ +

Prettier JS Formatting

+

starbase uses Prettier to + enforce and simplify code + consistency. If you use VS Code, check out the Prettier VS Code + extension.

+ +

HTML Webpack Plugin

+

starbase uses HTML + Webpack Plugin, 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 .js & .css files are included where they need to + be.

+

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 .ejs and environment + variable support.

+ +

Asset Hashing (Cache Busting)

+

The assets generated by starbase are hashed as a + cache-busting + mechanism. Hashes are generated via file contents so they will only change when the files themselves + have changed.

+

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: + .[hash:8]. +

+

Removing hashing for production builds is not recommended.

+ +

Build-Time Cleanup

+

starbase is setup to clear all contents of /dist (where compiled assets are piped into) + during each npm run build. If you'd like to remove this part of the build process, perform + the following steps:

+
    +
  1. remove CleanWebpackPlugin from the plugins array in + /webpack/webpack.config.prod.js +
    2. +
  2. remove CleanWebpackPlugin as a requirement at the top of + /webpack/webpack.config.prod.js +
    3. +
  3. remove the CleanWebpackPlugin dependency from /package.json
    4. +
+

Removing the cleanup process means that deleted assets in /src will not be deleted in + /dist + 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 /dist. +

+ +

Fetch & Promise Polyfills

+

Because starbase was built to accommodate ES6 & CommonJS (and not jQuery) it is assumed that you'll be + using fetch for + asynchronous + requests.

+

Fetch is supported in all modern browsers, but some old dogs still don't support it and that's what we + need the es6-promise & + whatwg-fetch polyfills for. +

+

If you want to remove these for any reason, perform the following steps:

+
    +
  1. remove es6-promise & whatwg-fetch from /package.json
    2. +
  2. remove the relevant imports in /src/app.js
    3. +
+
+ +
+

Notes & Considerations

+ +

Root Path

+

starbase is setup to run with assets referenced via relative paths so generated .html 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 publicPath in /webpack/webpack.config.base.js.

+

This variable should be set to / if the app will run at the root of a domain or subdomain, + or to /folderName (example) if it'll be deployed to a subfolder.

+
+ +
+

License

+

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!

+
+ +
+

Who's using it

+

Loading...

+

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.

+
+
+ + + + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss new file mode 100644 index 0000000..8d9390e --- /dev/null +++ b/src/styles/_fonts.scss @@ -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'); +} diff --git a/src/styles/_root.scss b/src/styles/_root.scss index 7a1014a..ec24f46 100644 --- a/src/styles/_root.scss +++ b/src/styles/_root.scss @@ -3,8 +3,8 @@ } body { - background-color: $color-white; - color: $color-dark-grey; + background-color: $color-background; + color: $color-foreground; font-family: $font-sans; font-size: 0.95rem; line-height: 1.4; diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss index 78daf39..9351c56 100644 --- a/src/styles/_vars.scss +++ b/src/styles/_vars.scss @@ -1,13 +1,15 @@ -/* Colors */ -$color-white: #fefefe; -$color-silver: #ccc; -$color-grey: #888; -$color-dark-grey: #333; -$color-red: #cc283d; -$color-orange: #ee763a; -$color-green: #2ba667; -$color-blue: #2472be; -$color-purple: #861bbb; +/* Dracula Colors */ +$color-background: #282a36; +$color-selection: #44475a; +$color-foreground: #f8f8f2; +$color-comment: #6272a4; +$color-cyan: #8be9fd; +$color-green: #50fa7b; +$color-orange: #ffb86c; +$color-pink: #ff79c6; +$color-purple: #bd93f9; +$color-red: #f55; +$color-yellow: #f1fa8c; /* Fonts */ $font-sans: 'PT Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; diff --git a/src/styles/atoms/code.scss b/src/styles/atoms/code.scss new file mode 100644 index 0000000..d04007d --- /dev/null +++ b/src/styles/atoms/code.scss @@ -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; +} diff --git a/src/styles/atoms/heading.scss b/src/styles/atoms/heading.scss new file mode 100644 index 0000000..4b1c1ed --- /dev/null +++ b/src/styles/atoms/heading.scss @@ -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; +} diff --git a/src/styles/atoms/link.scss b/src/styles/atoms/link.scss new file mode 100644 index 0000000..3b79ddd --- /dev/null +++ b/src/styles/atoms/link.scss @@ -0,0 +1,15 @@ +%link { + text-decoration: underline; + + &:hover { + text-decoration: none; + } +} + +%link--green { + color: $color-green; +} + +%link--comment { + color: $color-comment; +} diff --git a/src/styles/atoms/list.scss b/src/styles/atoms/list.scss new file mode 100644 index 0000000..b887270 --- /dev/null +++ b/src/styles/atoms/list.scss @@ -0,0 +1,7 @@ +%list--ordered { + list-style-type: decimal; +} + +%list--unordered { + list-style-type: disc; +} diff --git a/src/styles/fonts/_index.scss b/src/styles/fonts/_index.scss deleted file mode 100644 index 15e45aa..0000000 --- a/src/styles/fonts/_index.scss +++ /dev/null @@ -1,13 +0,0 @@ -@font-face { - font-family: 'PT Sans'; - font-style: normal; - font-weight: normal; - src: url('styles/fonts/PTSans-Regular.woff2') format('woff2'), url('styles/fonts/PTSans-Regular.woff') format('woff'); -} - -@font-face { - font-family: 'PT Serif'; - font-style: normal; - font-weight: normal; - src: url('styles/fonts/PTSerif-Regular.woff2') format('woff2'), url('styles/fonts/PTSerif-Regular.woff') format('woff'); -} diff --git a/src/styles/footer.scss b/src/styles/footer.scss index 423a479..51426d4 100644 --- a/src/styles/footer.scss +++ b/src/styles/footer.scss @@ -1,16 +1,14 @@ -@import 'styles/link'; +@import './atoms/link'; .footer { - border-top: 1px solid $color-silver; - color: $color-grey; - margin-top: 2.5rem; + color: $color-comment; @media (--medium) { font-size: 0.9em; } a { - @extend .link; - @extend .link--grey; + @extend %link; + @extend %link--comment; } } diff --git a/src/styles/header.scss b/src/styles/header.scss index ab829b9..d777430 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -1,3 +1,6 @@ +@import './atoms/link'; +@import './atoms/list'; + .header { &__brand { align-items: center; @@ -21,4 +24,13 @@ letter-spacing: normal; margin: 0; } + + &__features { + @extend %list--unordered; + + a { + @extend %link; + @extend %link--green; + } + } } diff --git a/src/styles/heading.scss b/src/styles/heading.scss deleted file mode 100644 index 009bc91..0000000 --- a/src/styles/heading.scss +++ /dev/null @@ -1,9 +0,0 @@ -.heading { - font-family: $font-serif; - font-weight: normal; - - &--h1 { font-size: 1.875rem; } - &--h2 { font-size: 1.5rem; } - &--h3 { font-size: 1.25rem; } - &--h4 { font-size: 1.125rem; } -} diff --git a/src/styles/link.scss b/src/styles/link.scss deleted file mode 100644 index 6fcaa8c..0000000 --- a/src/styles/link.scss +++ /dev/null @@ -1,15 +0,0 @@ -.link { - text-decoration: underline; - - &:hover { - text-decoration: none; - } - - /* Color Modifiers */ - &--red { color: $color-red; } - &--orange { color: $color-orange; } - &--green { color: $color-green; } - &--blue { color: $color-blue; } - &--purple { color: $color-purple; } - &--grey { color: $color-grey; } -} diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000..63a2477 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,64 @@ +@import './atoms/code'; +@import './atoms/heading'; +@import './atoms/link'; +@import './atoms/list'; + +.main { + section { + border-bottom: 0.125rem solid $color-selection; + padding-bottom: 0.5em; + } + + h2 { + @extend %heading--h2; + + color: $color-yellow; + } + + h3 { + @extend %heading--h3; + + color: $color-cyan; + } + + h4 { + @extend %heading--h4; + } + + h1, + h2, + h3, + h4 { + @extend %heading; + + margin: 2rem auto 0; + + + h1, + + h2, + + h3, + + h4 { + margin-top: 1rem; + } + } + + a { + @extend %link; + @extend %link--green; + } + + code { + @extend %code; + } + + pre { + @extend %pre; + } + + ol { + @extend %list--ordered; + } + + ul { + @extend %list--unordered; + } +} diff --git a/src/styles/rich-text.scss b/src/styles/rich-text.scss deleted file mode 100644 index fa09276..0000000 --- a/src/styles/rich-text.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import 'styles/heading'; - -.rich-text { - h1, - h2, - h3, - h4 { - @extend .heading; - - margin: 2rem auto 0; - } - - h1 { - @extend .heading--h2; - } - - h2 { - @extend .heading--h2; - } - - h3 { - @extend .heading--h3; - } - - h4 { - @extend .heading--h4; - } -}