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.
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
├─ fractal.configjs # Configuration for Fractal
├─ gulpfile.js # Configuration for Gulp tasks
├─ LICENSE # License information for this project
├─ package.json # Project manifest
└─ README.md # This file