1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
# Spectre.css
Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.
- lightweight and clean starting point for your project and prototype
- flexbox, responsive and mobile-friendly layout
- built in useful components and utilities
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 with LESS compiler.
Read [the documentation](http://picturepan2.github.io/spectre/) to learn more.
Spectre has 3 major parts:
#### Elements
- [typography](http://picturepan2.github.io/spectre/#typography) - headings, paragraphs, blockquote, lists and code elements
- [layout](http://picturepan2.github.io/spectre/#layout) - flexbox based responsive layout system
- [tables](http://picturepan2.github.io/spectre/#tables)
- [buttons](http://picturepan2.github.io/spectre/#buttons) - button styles in different types and sizes, and even button groups
- [forms](http://picturepan2.github.io/spectre/#forms) - input, radio, checkbox, switch and other form elements
- [images](http://picturepan2.github.io/spectre/#images) - responsive image
#### Components
- [avatars](http://picturepan2.github.io/spectre/#avatars) - user profile pictures or name initials rendered avatar
- [chips](http://picturepan2.github.io/spectre/#chips) - complex entities in small blocks
- [tooltips](http://picturepan2.github.io/spectre/#tooltips) - simple tooltip built entirely in CSS
- [labels](http://picturepan2.github.io/spectre/#labels)
- [badges](http://picturepan2.github.io/spectre/#badges)
- [toasts](http://picturepan2.github.io/spectre/#toasts)
- [menus](http://picturepan2.github.io/spectre/#menus)
- [navigation](http://picturepan2.github.io/spectre/#navigation) - breadcrumb, tabs and pagination
- [modals](http://picturepan2.github.io/spectre/#modals) - flexible dialog prompts
- [cards](http://picturepan2.github.io/spectre/#cards) - flexible content containers
#### Utilities
- [utilities](http://picturepan2.github.io/spectre/#utilities) - layout, positions, display, text, shapes, loading things
### Browser support
Spectre 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. Spectre is designed for modern browsers. For best compatiblity, these browsers are recommended:
- Chrome (last two)
- Edge (last two)
- Firefox (last two)
- Internet Explorer 10+
- Microsoft Edge
- Opera (last two)
- Safari 6+
Currently maintained by [Yan Zhu](https://twitter.com/picturepan2). Feel free to submit a pull request. Help is always appreciated.
|
