{"id":14976354,"url":"https://github.com/jaydenseric/barebones","last_synced_at":"2025-07-23T15:04:48.328Z","repository":{"id":17821335,"uuid":"20721083","full_name":"jaydenseric/Barebones","owner":"jaydenseric","description":"A barebones boilerplate for getting started on a bespoke front end.","archived":false,"fork":false,"pushed_at":"2017-01-19T09:40:36.000Z","size":829,"stargazers_count":125,"open_issues_count":0,"forks_count":7,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-01T08:01:34.308Z","etag":null,"topics":["babel","cssnext","eslint","postcss","stylelint","webpack2","yarn"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaydenseric.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-06-11T10:19:10.000Z","updated_at":"2023-08-23T05:54:39.000Z","dependencies_parsed_at":"2022-08-04T21:15:20.808Z","dependency_job_id":null,"html_url":"https://github.com/jaydenseric/Barebones","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2FBarebones","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2FBarebones/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2FBarebones/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2FBarebones/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaydenseric","download_url":"https://codeload.github.com/jaydenseric/Barebones/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238552957,"owners_count":19491350,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","cssnext","eslint","postcss","stylelint","webpack2","yarn"],"created_at":"2024-09-24T13:53:46.189Z","updated_at":"2025-02-12T21:30:38.910Z","avatar_url":"https://github.com/jaydenseric.png","language":"JavaScript","readme":"# ![Barebones](http://jaydenseric.com/shared/barebones-logo.svg)\n\n![Github release](https://img.shields.io/github/release/jaydenseric/Barebones.svg?style=flat-square)\n![Github issues](https://img.shields.io/github/issues/jaydenseric/Barebones.svg?style=flat-square)\n![Github stars](https://img.shields.io/github/stars/jaydenseric/Barebones.svg?style=flat-square)\n\nA barebones boilerplate for getting started on a bespoke front end.\n\n- Environment agnostic; setup your own backend and component templating.\n- A minimalist component architecture with some (easily removed) examples.\n- [NPM](https://npmjs.com) and [Yarn](https://yarnpkg.com) for dependancies and tools.\n- [webpack](https://webpack.github.io) for builds.\n- ES6 via [Babel](https://babeljs.io). [babel-preset-env](https://github.com/babel/babel-preset-env) applies only the nessesary transforms for your level of browser support.\n- [DOM4](https://github.com/WebReflection/dom4) polyfills modern DOM and [Animation Frames](https://html.spec.whatwg.org/multipage/webappapis.html#animation-frames) functionalities.\n- JS linting with [ESLint](http://eslint.org) and [extended](https://github.com/jaydenseric/eslint-config-barebones) [JavaScript Standard Style](http://standardjs.com) config. A handy fix script can correct most issues across the entire project.\n- CSS linting with [stylelint](http://stylelint.io) and [extended](https://github.com/jaydenseric/stylelint-config-barebones) [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard) config.\n- [PostCSS](https://github.com/postcss/postcss), [CSSNext](http://cssnext.io) and [Autoprefixer](https://github.com/postcss/autoprefixer) take care of vendor prefixes and allow cutting edge CSS syntax. A faster, standards aligned alternative to preprocessors such as Sass.\n- Handle icons the modern way with [polyfilled](https://github.com/Keyamoon/svgxuse) [SVG symbols and external references](https://icomoon.io/#docs/inline-svg).\n- Includes [http-server](https://github.com/indexzero/http-server) as an optional zero-config dev server.\n- Browser support: [\u003e 2% in AU](http://browserl.ist/?q=%3E+2%25+in+AU).\n- [MIT license](https://en.wikipedia.org/wiki/MIT_License).\n\n## Setup\n\nFor development tools and building:\n\n1. Install the latest [Node.js and NPM](https://nodejs.org).\n2. Install the latest [Yarn](https://yarnpkg.com/en/docs/install).\n3. Run `yarn` within the project root directory in Terminal.\n4. Run `yarn run build:watch`.\n5. Run `yarn run start` in another tab. Tada!\n\nEnsure your editor supports:\n\n- [EditorConfig](http://editorconfig.org). Atom users install [editorconfig](https://atom.io/packages/editorconfig).\n- [ESLint](http://eslint.org) live JS linting, respecting `package.json` config. Atom users install [linter-eslint](https://atom.io/packages/linter-eslint).\n- [stylelint](http://stylelint.io) live CSS linting, respecting `package.json` config. Atom users install [linter-stylelint](https://atom.io/packages/linter-stylelint).\n\nAfter inspecting the example components:\n\n1. Remove Barebones examples and references. Within the project directory in Terminal run `yarn run init`. This script also deletes itself.\n2. Customize the meta in `/index.html`.\n3. Customize the icons in `/content`.\n4. Customize the [Browserslist](https://github.com/ai/browserslist) browser support queries in `/package.json` for build tools.\n5. Edit `/readme.md` to be about your project.\n6. Re-run the build and start scripts. A clean slate!\n\n## Structure\n\n- `/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.\n- `/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.\n- `/bundle` is the compiled JS, CSS and sourcemaps.\n- `/content` is where actual content such as images live. This is analogous to a CMS `uploads` folder and can be organized however you like. Never place content assets or hardcode content text anywhere in `/components`!\n\n## Scripts\n\nCommand                | Purpose\n:--------------------- | :----------------------------------------------\n`yarn run init`        | Remove Barebones examples and references.\n`yarn run lint:js`     | Lint JS (see `eslintConfig` in `package.json`).\n`yarn run lint:js:fix` | Lint JS and automatically fix issues.\n`yarn run lint:css`    | Lint CSS (see `stylelint` in `package.json`).\n`yarn run clean`       | Delete `/bundle`.\n`yarn run build`       | Compile JS and CSS to `/bundle`.\n`yarn run build:watch` | Build, rebuilding on source file changes.\n`yarn run start`       | Start a dev server and open in browser.\n\n## Tips\n\n- Use [NPM](https://www.npmjs.com) with [Yarn](https://yarnpkg.com) to manage 3rd party dependencies.\n- Avoid adding already minified assets for better sourcemap assisted debugging.\n- Use [JSDoc](http://usejsdoc.org) when writing JS.\n- Don't vendor prefix CSS rules that are on a standards track; [Autoprefixer](https://github.com/postcss/autoprefixer) will take care of it.\n- Don't reset, normalize or otherwise declare styles globally; all variables and rules should be scoped to a component. `html` and `body` are an exception as they form the top `app` component.\n- Only refer to the UI and not content when naming things in `/components`. For example, `icon-link` is more versatile than `contact-us-link`.\n\n## Helpful projects\n\n- See [Fix.css](https://github.com/jaydenseric/Fix) for taming common elements.\n- Use [svgsymbolviewer.io](http://svgsymbolviewer.io) to view symbols in SVG files.\n- Install [Hurdler](https://github.com/jaydenseric/Hurdler) to setup component URL hash interactions.\n- Install [scroll-animator](https://github.com/jaydenseric/scroll-animator) to reliably scroll to elements, even when the page is still loading.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaydenseric%2Fbarebones","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaydenseric%2Fbarebones","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaydenseric%2Fbarebones/lists"}