π₯ Leader
Bits is built upon Fractal, a tool that enables the rapid development of components, templates and pages. Fractal uses a number of ES6 features, so this project requires Node.js v4.0+ to be installed locally. A global install of Gulp is also recommended.
To get the project up and running, and view components in the browser, complete the following steps:
- Download and install Node: https://nodejs.org/
- Clone this repo:
git clone git@github.com:24ways/frontend.git
(SSH) orgit clone https://github.com/24ways/frontend.git
(HTTPS) - [Optional] Install Gulp globally:
npm install gulp -g
- [Optional] Install Fractal globally:
npm install fractal -g
- Install project dependancies:
npm install
- Start the development environment:
npm start
- Open your browser and visit http://localhost:3000
When developing components, you may want assets automatically compiled and the browser to refresh automatically. To do this, run the following task:
npm run dev
To create a static instance of this project, run the following task:
npm run build
This will create a folder called www
, into which the required files will be created.
To make this project publicly accessible, you can deploy a static instance by running the following task:
npm run publish
This will publish the contents of public
to your gh-pages
branch.
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
Sometimes itβs helpful to know what all these different files are forβ¦
/
ββ src/
β ββ assets/ # Assets
β β ββ icons/ # Favicon and home screen icons
β β ββ images/ # Raster images (used in component examples)
β β ββ scripts/ # JavaScript files
β β ββ styles/ # CSS files
β β ββ vectors/ # SVG images, icons and logos
| |
β ββ components/ # Components
β β ββ _partials/ # β¦that render component previews
β β ββ common/ # β¦that may appear anywhere
β β ββ global/ # β¦that appear on every page
β β ββ layouts/ # β¦that govern macro layout
β β ββ scopes/ # β¦that style undecorated markup
β β ββ templates/ # β¦that combine components to render page types
β β ββ utilities/ # β¦that have a single purpose/role
| |
β ββ docs/ # Documentation
β β ββ _partials/ # Partials for rendering documentation
β β ββ β¦ # Documentation files
β β
β ββ tokens/ # Design tokens
|
ββ tmp/ # Files required for dynamic builds (ignored by Git)
ββ www/ # Public build (ignored by Git)
β
ββ .editorconfig # Code style definitions
ββ .gitignore # List of files and folders not tracked by Git
ββ .eslintrc # Linting preferences for JavasScript
ββ .stylelintrc # Linting preferences for CSS
ββ fractal.js # Configuration for Fractal
ββ gulpfile.js # Configuration for Gulp tasks
ββ LICENSE # License information for this project
ββ package.json # Project manifest
ββ README.md # This file
For detailed explanation on how things work, checkout the guide and docs for vue-loader.