jaydenseric / Barebones
A barebones boilerplate for getting started on a bespoke front end.
Stars: β 127
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Barebones
Static Site Boilerplate
A better workflow for building modern static websites.
Stars: β 1,633 (+1185.83%)
Mutual labels: eslint, stylelint, babel, postcss
Express Webpack React Redux Typescript Boilerplate
π A full-stack boilerplate that using express with webpack, react and typescirpt!
Stars: β 156 (+22.83%)
Mutual labels: eslint, stylelint, babel, yarn
React Itunes Search
π΅Simple web app for itunes search with React
Stars: β 147 (+15.75%)
Mutual labels: webpack2, eslint, babel, postcss
Front End Guide
π Study guide and introduction to the modern front end stack.
Stars: β 14,073 (+10981.1%)
Mutual labels: eslint, stylelint, babel, yarn
dva-typescript-antd-starter-kit
A admin dashboard application demo based on antd by typescript and dva
Stars: β 61 (-51.97%)
Mutual labels: stylelint, postcss, eslint
Frasco
Quick starter for Jekyll including full setup for Sass, PostCSS, Autoprefixer, stylelint, Webpack, ESLint, imagemin, Browsersync, etc.
Stars: β 123 (-3.15%)
Mutual labels: eslint, stylelint, postcss
starbase
β Production-ready website boilerplate made with webpack 5, modern JS (via Babel 7) & Sass
Stars: β 70 (-44.88%)
Mutual labels: stylelint, babel, eslint
Pwa
An opinionated progressive web app boilerplate
Stars: β 353 (+177.95%)
Mutual labels: eslint, babel, postcss
Iceberg
Front-End Boilerplate built with React + Babel + Webpack + SASS
Stars: β 144 (+13.39%)
Mutual labels: webpack2, eslint, babel
react-enterprise-starter-kit
Highly Scalable Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase. π₯
Stars: β 55 (-56.69%)
Mutual labels: babel, postcss, eslint
React Boilerplate
This project is deprecated. Please use CRA instead.
Stars: β 88 (-30.71%)
Mutual labels: babel, yarn, postcss
react-js-boilerplate
A React + Redux + HOT + Webpack + Material-UI + Sass boilerplate
Stars: β 14 (-88.98%)
Mutual labels: stylelint, eslint, webpack2
electron-vue-boilerplate
Simple boilerplate for building Vue app with Electron and Webpack.
Stars: β 53 (-58.27%)
Mutual labels: stylelint, postcss, eslint
Webpack-Starter-Kit
Webpack 4 stater kit with SCSS, PostCSS, Babel & ESLint
Stars: β 41 (-67.72%)
Mutual labels: babel, postcss, eslint
Astexplorer.app
https://astexplorer.net with ES Modules support and Hot Reloading
Stars: β 65 (-48.82%)
Mutual labels: eslint, babel, postcss
Web Configs
Common configurations for building web apps at Shopify
Stars: β 302 (+137.8%)
Mutual labels: eslint, stylelint, babel
Budgeting
Budgeting - React + Redux + Webpack (tree shaking) Sample App
Stars: β 971 (+664.57%)
Mutual labels: webpack2, eslint, babel
Bathe
The simplest WordPress starter theme including full setup for Sass, PostCSS, Autoprefixer, stylelint, Webpack, Eslint, imagemin, Browsersync, etc.
Stars: β 65 (-48.82%)
Mutual labels: eslint, stylelint, postcss
Express Mongoose Es6 Rest Api
π₯ A boilerplate application for building RESTful APIs Microservice in Node.js using express and mongoose in ES6 with code coverage and JsonWebToken Authentication
Stars: β 2,811 (+2113.39%)
Mutual labels: eslint, babel, yarn
React Ssr Setup
React Starter Project with Webpack 4, Babel 7, TypeScript, CSS Modules, Server Side Rendering, i18n and some more niceties
Stars: β 678 (+433.86%)
Mutual labels: eslint, babel, postcss
A barebones boilerplate for getting started on a bespoke front end.
- Environment agnostic; setup your own backend and component templating.
- A minimalist component architecture with some (easily removed) examples.
- NPM and Yarn for dependancies and tools.
- webpack for builds.
- ES6 via Babel. babel-preset-env applies only the nessesary transforms for your level of browser support.
- DOM4 polyfills modern DOM and Animation Frames functionalities.
- JS linting with ESLint and extended JavaScript Standard Style config. A handy fix script can correct most issues across the entire project.
- CSS linting with stylelint and extended stylelint-config-standard config.
- PostCSS, CSSNext and Autoprefixer take care of vendor prefixes and allow cutting edge CSS syntax. A faster, standards aligned alternative to preprocessors such as Sass.
- Handle icons the modern way with polyfilled SVG symbols and external references.
- Includes http-server as an optional zero-config dev server.
- Browser support: > 2% in AU.
- MIT license.
Setup
For development tools and building:
- Install the latest Node.js and NPM.
- Install the latest Yarn.
- Run
yarn
within the project root directory in Terminal. - Run
yarn run build:watch
. - Run
yarn run start
in another tab. Tada!
Ensure your editor supports:
- EditorConfig. Atom users install editorconfig.
-
ESLint live JS linting, respecting
package.json
config. Atom users install linter-eslint. -
stylelint live CSS linting, respecting
package.json
config. Atom users install linter-stylelint.
After inspecting the example components:
- Remove Barebones examples and references. Within the project directory in Terminal run
yarn run init
. This script also deletes itself. - Customize the meta in
/index.html
. - Customize the icons in
/content
. - Customize the Browserslist browser support queries in
/package.json
for build tools. - Edit
/readme.md
to be about your project. - Re-run the build and start scripts. A clean slate!
Structure
-
/components
contains a sub-directory for each component, holding source JS, styles and image assets. Avoid nesting component directories as a flat structure guarantees unique component names, makes paths less complex and encourages reuse. -
/components/app
is the top component for the entire site and is the JS and CSS entrypoint; from here components are recursively imported and initialized. Import polyfills here. -
/bundle
is the compiled JS, CSS and sourcemaps. -
/content
is where actual content such as images live. This is analogous to a CMSuploads
folder and can be organized however you like. Never place content assets or hardcode content text anywhere in/components
!
Scripts
Command | Purpose |
---|---|
yarn run init |
Remove Barebones examples and references. |
yarn run lint:js |
Lint JS (see eslintConfig in package.json ). |
yarn run lint:js:fix |
Lint JS and automatically fix issues. |
yarn run lint:css |
Lint CSS (see stylelint in package.json ). |
yarn run clean |
Delete /bundle . |
yarn run build |
Compile JS and CSS to /bundle . |
yarn run build:watch |
Build, rebuilding on source file changes. |
yarn run start |
Start a dev server and open in browser. |
Tips
- Use NPM with Yarn to manage 3rd party dependencies.
- Avoid adding already minified assets for better sourcemap assisted debugging.
- Use JSDoc when writing JS.
- Don't vendor prefix CSS rules that are on a standards track; Autoprefixer will take care of it.
- Don't reset, normalize or otherwise declare styles globally; all variables and rules should be scoped to a component.
html
andbody
are an exception as they form the topapp
component. - Only refer to the UI and not content when naming things in
/components
. For example,icon-link
is more versatile thancontact-us-link
.
Helpful projects
- See Fix.css for taming common elements.
- Use svgsymbolviewer.io to view symbols in SVG files.
- Install Hurdler to setup component URL hash interactions.
- Install scroll-animator to reliably scroll to elements, even when the page is still loading.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].