Spectre CSS

This version of Spectre CSS has been forked from the original repo; see the organisation readme for rationale.

Spectre is a lightweight, responsive and modern CSS framework.

• Lightweight (~10KB gzipped) starting point for your projects
• Flexbox-based, responsive and mobile-friendly layout
• Elegantly designed and developed elements and components

Spectre is a side project based on years of CSS development work on a large web service project.

Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project using standard build tools.

Documentation

New documentation is available at:

• spectre-org.github.io/spectre-docs

Getting started:

• Installation
• Build

Content:

• Elements
• Layout
• Components
• Experimentals
• Utilities

Related content:

• Original Spectre.css issues
• Original Spectre.css docs
• Spectre.css on Twitter

Roadmap

The plan for Spectre CSS is to merge outstanding PRs, then look to add much-needed features.

All issues will be added to projects as appropriate:

• Bug Fixes
• New Features

Contributing

Build

Clone this repo locally with:

git clone https://github.com/spectre-org/spectre-css.git

Spectre uses Gulp to compile CSS:

# watch file changes and re-compile
npm run dev    

# compile SCSS to CSS and minify files
npm run build

Testing

To work with Spectre CSS source files live in another project, you can use NPM link.

In the Spectre CSS repo, create the global reference:

npm link

In your project repo, create the link:

npm link @spectre-org/spectre-css

The existing node_modules/@spectre-org/spectre-css folder will be replaced with a symlink to the local repository, and any changes there will be reflected immediately in your project.

Releasing

Releasing is only available to maintainers

Approach

Spectre CSS is published to NPM, and is made automatically available on CDN thanks to unpkg.com.

Note that local /src files are compiled to /dist but are not committed to the repository.

Checklist

Before publishing, check:

• you're on the main branch
• there are no outstanding commits
• you bumped package.json version correctly
• you updated CHANGELOG.md with all changes since the last version
• you have tested the built files in an NPM-linked project (such as the docs)

Release

To build and publish directly to NPM, run:

npm run release

To dry-run the release, run:

npm run release:dry

Once published, Spectre will be available at:

• NPM: https://www.npmjs.com/package/@spectre-org/spectre-css
• CDN: https://unpkg.com/browse/@spectre-org/spectre-css@latest/