# Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. - Lightweight (~10KB gzipped) starting point for your projects - Flexbox-based, responsive and mobile-friendly layout - Carefully designed 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 with LESS compiler. Read [the documentation](http://picturepan2.github.io/spectre/) to learn more. ### Getting started There are 4 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM, Yarn and Bower. ##### Install manually Download the compiled and minified [Spectre CSS file](https://github.com/picturepan2/spectre/tree/master/dist). ##### Install with NPM `$ npm install spectre.css --save` ##### Install with Yarn `$ yarn add spectre.css` ##### Install with Bower `$ bower install spectre.css --save` And include it in your website or Web app <head> part. `` ### Compiling custom version You can compile your custom version of Spectre.css. Read [the documentation](http://picturepan2.github.io/spectre/index.html#compiling). ### Documentation and demos #### Elements - [Typography](http://picturepan2.github.io/spectre/elements.html#typography) - headings, paragraphs, semantic text, blockquote, lists and code elements, optimized for east asian fonts - [Tables](http://picturepan2.github.io/spectre/elements.html#tables) - organize and display data - [Buttons](http://picturepan2.github.io/spectre/elements.html#buttons) - button styles in different types and sizes, and even button groups - [Forms](http://picturepan2.github.io/spectre/elements.html#forms) - input, radio, checkbox, switch and other form elements - [Labels](http://picturepan2.github.io/spectre/elements.html#labels) - formatted text tags for highlighted, informative information - [Codes](http://picturepan2.github.io/spectre/elements.html#codes) - inline and multiline code snippets - [Media](http://picturepan2.github.io/spectre/elements.html#media) - responsive images, figures and video classes - [Experimentals](http://picturepan2.github.io/spectre/experimentals.html) - experimental elements and features, mostly are not yet ready for wide use #### Layout - [Flexbox-grid](http://picturepan2.github.io/spectre/layout.html#grid) - flexbox based responsive grid system - [Responsive](http://picturepan2.github.io/spectre/layout.html#responsive) - responsive grid and utilities - [Navbar](http://picturepan2.github.io/spectre/layout.html#navbar) - layout container that appears in the header of apps and websites - [Panels](http://picturepan2.github.io/spectre/layout.html#panels) - flexible view container layout with auto-expand content section - [Empty states](http://picturepan2.github.io/spectre/layout.html#empty) - empty states/blank slates for first time use, empty data and error screens #### Components - [Autocomplete](http://picturepan2.github.io/spectre/components.html#autocomplete) - form component provides suggestions while you type - [Avatars](http://picturepan2.github.io/spectre/components.html#avatars) - user profile pictures or name initials rendered avatar - [Badges](http://picturepan2.github.io/spectre/components.html#badges) - unread number indicators - [Cards](http://picturepan2.github.io/spectre/components.html#cards) - flexible content containers - [Chips](http://picturepan2.github.io/spectre/components.html#chips) - complex entities in small blocks - [Menus](http://picturepan2.github.io/spectre/components.html#menus) - list of links or buttons for actions and navigation - [Modals](http://picturepan2.github.io/spectre/components.html#modals) - flexible dialog prompts - [Navigation](http://picturepan2.github.io/spectre/components.html#navigation) - breadcrumb, tabs, pagination and navs - [Steps](http://picturepan2.github.io/spectre/components.html#steps) - progress indicators of a sequence of task steps - [Tiles](http://picturepan2.github.io/spectre/components.html#tiles) - repeatable or embeddable information blocks - [Toasts](http://picturepan2.github.io/spectre/components.html#toasts) - showing alerts or notifications - [Tooltips](http://picturepan2.github.io/spectre/components.html#tooltips) - simple tooltip built entirely in CSS #### Utilities - [Utilities](http://picturepan2.github.io/spectre/utilities.html) - 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 compatibility, these browsers are recommended: - Chrome (last 4) - Microsoft Edge (last 4) - Firefox (last 4) - Safari (last 4) - Opera (last 4) - Internet Explorer 10+ Designed and built with ♥ by [Yan Zhu](https://twitter.com/picturepan2). Feel free to submit a pull request. Help is always appreciated.