npm package: @lu4p/specter.css
Description: Specter.css: A lightweight, responsive and modern CSS framework
Author: lu4p
Latest version: 0.6.0

<a href="https://lu4p.github.io/specter">
  <img src="https://lu4p.github.io/specter/img/specter-logo.svg" width="72" height="72">
</a>

## Specter.css

Specter.css is a lightweight, responsive and modern CSS framework.
It is a fork of the no longer mainted [Spectre.css](https://github.com/picturepan2/spectre). 

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

Specter is a side project based on years of CSS development work on a large web service project. Specter only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.

Specter.css is completely free to use. If you enjoy it, please consider becoming [a Github Sponsor](https://github.com/sponsors/lu4p) for the further development. ♥ 


## Getting started

There are 4 ways to get started with Specter CSS framework in your projects. You can either manually install, serve from CDN, install using NPM or Yarn.

### Install manually
Download the compiled and minified [Specter CSS files](https://github.com/lu4p/specter/tree/master/dist). And include `specter.css` in your website or Web app &lt;head&gt; part.

`<link rel="stylesheet" href="specter.min.css">`

### Install from CDN
Alternatively, you can use the [unpkg](https://unpkg.com/) CDN to load the compiled Specter.css.

`<link rel="stylesheet" href="https://unpkg.com/@lu4p/specter.css/dist/specter.min.css">`

### Install with NPM
`$ npm install @lu4p/specter.css --save`

### Install with Yarn
`$ yarn add @lu4p/specter.css`

## Compiling custom version

You can compile your custom version of Specter.css. Read [the documentation](https://lu4p.github.io/specter/getting-started/custom.html).

## Documentation and examples

### Elements

- [Typography](https://lu4p.github.io/specter/elements/typography.html)
- [Tables](https://lu4p.github.io/specter/elements/tables.html)
- [Buttons](https://lu4p.github.io/specter/elements/buttons.html)
- [Forms](https://lu4p.github.io/specter/elements/forms.html)
- [Icons.css](https://lu4p.github.io/icons.css) - CSS ONLY
- [Labels](https://lu4p.github.io/specter/elements/labels.html)
- [Code](https://lu4p.github.io/specter/elements/code.html)
- [Media](https://lu4p.github.io/specter/elements/media.html)

### Layout
- [Flexbox grid](https://lu4p.github.io/specter/layout/grid.html) 
- [Responsive](https://lu4p.github.io/specter/layout/responsive.html)
- [Hero](https://lu4p.github.io/specter/layout/hero.html)
- [Navbar](https://lu4p.github.io/specter/layout/navbar.html)

### Components
- [Accordions](https://lu4p.github.io/specter/components/accordions.html)
- [Avatars](https://lu4p.github.io/specter/components/avatars.html)
- [Badges](https://lu4p.github.io/specter/components/badges.html)
- [Breadcrumbs](https://lu4p.github.io/specter/components/breadcrumbs.html)
- [Bars](https://lu4p.github.io/specter/components/bars.html)
- [Cards](https://lu4p.github.io/specter/components/cards.html)
- [Chips](https://lu4p.github.io/specter/components/chips.html)
- [Empty states](https://lu4p.github.io/specter/components/empty.html)
- [Menu](https://lu4p.github.io/specter/components/menu.html)
- [Nav](https://lu4p.github.io/specter/components/nav.html)
- [Modals](https://lu4p.github.io/specter/components/modals.html)
- [Pagination](https://lu4p.github.io/specter/components/pagination.html)
- [Panels](https://lu4p.github.io/specter/components/panels.html)
- [Popovers](https://lu4p.github.io/specter/components/popovers.html)
- [Steps](https://lu4p.github.io/specter/components/steps.html)
- [Tabs](https://lu4p.github.io/specter/components/tabs.html)
- [Tiles](https://lu4p.github.io/specter/components/tiles.html)
- [Toasts](https://lu4p.github.io/specter/components/toasts.html)
- [Tooltips](https://lu4p.github.io/specter/components/tooltips.html)

### Utilities

- [Utilities](https://lu4p.github.io/specter/utilities.html) - colors, display, divider, loading, position, shapes and text utilities

### Experimentals
- [360-Degree Viewer](https://lu4p.github.io/specter/experimentals/viewer-360.html) - CSS ONLY
- [Autocomplete](https://lu4p.github.io/specter/experimentals/autocomplete.html)
- [Calendars](https://lu4p.github.io/specter/experimentals/calendars.html)
- [Carousels](https://lu4p.github.io/specter/experimentals/carousels.html) - CSS ONLY
- [Comparison Sliders](https://lu4p.github.io/specter/experimentals/comparison.html) - CSS ONLY
- [Filters](https://lu4p.github.io/specter/experimentals/filters.html) - CSS ONLY
- [Meters](https://lu4p.github.io/specter/experimentals/meters.html)
- [Off-canvas](https://lu4p.github.io/specter/experimentals/off-canvas.html) - CSS ONLY
- [Parallax](https://lu4p.github.io/specter/experimentals/parallax.html) - CSS ONLY
- [Progress](https://lu4p.github.io/specter/experimentals/progress.html)
- [Sliders](https://lu4p.github.io/specter/experimentals/sliders.html)
- [Timelines](https://lu4p.github.io/specter/experimentals/timelines.html)

## Browser support
Specter uses [Autoprefixer](https://github.com/postcss/autoprefixer) to make most styles compatible with earlier browsers and [Normalize.css](https://necolas.github.io/normalize.css/) for CSS resets. Specter is designed for modern browsers. For best compatibility, these browsers are recommended:

- Chrome (LAST 4)
- Microsoft Edge (LAST 4)
- Firefox (EXTENDED SUPPORT RELEASE)
- Safari (LAST 4)
- Opera (LAST 4)
- Internet Explorer 10+

Specter supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.

Designed and built with ♥ by [lu4p](https://twitter.com/lu4p3). Feel free to submit a pull request. Help is always appreciated.