Skip to content
This repository has been archived by the owner on Jul 10, 2020. It is now read-only.

24ways/frontend

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

Bits, the front-end component library for 24 ways

Requirements

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.

Installation

To get the project up and running, and view components in the browser, complete the following steps:

  1. Download and install Node: https://nodejs.org/
  2. Clone this repo: git clone git@github.com:24ways/frontend.git (SSH) or git clone https://github.com/24ways/frontend.git (HTTPS)
  3. [Optional] Install Gulp globally: npm install gulp -g
  4. [Optional] Install Fractal globally: npm install fractal -g
  5. Install project dependancies: npm install
  6. Start the development environment: npm start
  7. Open your browser and visit http://localhost:3000

Development

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

Creating a static build

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.

Deployment

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.

Repo structure

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