diff options
update Readme doc
1 files changed, 32 insertions, 5 deletions
| -rw-r--r-- | README.md | 37 |
@@ -1,15 +1,42 @@ # Spectre.css -Spectre.css is a lightweight and modern CSS framework for faster and extensible development. +Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. -* lightweight and clean starting point for your project -* flexbox and responsive layout friendly -* built in useful components and utilities +- 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. -## Browser support +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 and tabs +- [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) |