diff options
| author | Yan Zhu <picturepan2@hotmail.com> | 2017-03-30 21:10:00 +0300 |
|---|---|---|
| committer | Yan Zhu <picturepan2@hotmail.com> | 2017-03-30 21:10:00 +0300 |
| commit | 78e146ff17306ab3810fbf5902cc4c0c66fdaf9e (patch) | |
| tree | 8efdb1e8938b8b7982ef27e060b5d913b91ea65e /README.md | |
| parent | e65448cbb41339eed62ea42503800430ba911530 (diff) | |
Add Avatars badge support
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 60 |
1 files changed, 31 insertions, 29 deletions
@@ -7,7 +7,7 @@ Spectre.css is a lightweight, responsive and modern CSS framework for faster and 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. +Read [the documentation](https://picturepan2.github.io/spectre/) to learn more. ### Getting started @@ -31,47 +31,49 @@ 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). +You can compile your custom version of Spectre.css. Read [the documentation](https://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 +- [Typography](https://picturepan2.github.io/spectre/elements.html#typography) - headings, paragraphs, semantic text, blockquote, lists and code elements, optimized for east asian fonts +- [Tables](https://picturepan2.github.io/spectre/elements.html#tables) - organize and display data +- [Buttons](https://picturepan2.github.io/spectre/elements.html#buttons) - button styles in different types and sizes, and even button groups +- [Forms](https://picturepan2.github.io/spectre/elements.html#forms) - input, radio, checkbox, switch and other form elements +- [Icons](https://picturepan2.github.io/spectre/elements.html#icons) - single-element, responsive and pure CSS icons +- [Labels](https://picturepan2.github.io/spectre/elements.html#labels) - formatted text tags for highlighted, informative information +- [Codes](https://picturepan2.github.io/spectre/elements.html#codes) - inline and multiline code snippets +- [Media](https://picturepan2.github.io/spectre/elements.html#media) - responsive images, figures and video classes +- [Experimentals](https://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 +- [Flexbox-grid](https://picturepan2.github.io/spectre/layout.html#grid) - flexbox based responsive grid system +- [Responsive](https://picturepan2.github.io/spectre/layout.html#responsive) - responsive grid and utilities +- [Navbar](https://picturepan2.github.io/spectre/layout.html#navbar) - layout container that appears in the header of apps and websites +- [Panels](https://picturepan2.github.io/spectre/layout.html#panels) - flexible view container layout with auto-expand content section +- [Empty states](https://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 -- [Popovers](http://picturepan2.github.io/spectre/components.html#popovers) - small overlay content containers -- [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 +- [Autocomplete](https://picturepan2.github.io/spectre/components.html#autocomplete) - form component provides suggestions while you type +- [Avatars](https://picturepan2.github.io/spectre/components.html#avatars) - user profile pictures or name initials rendered avatar +- [Badges](https://picturepan2.github.io/spectre/components.html#badges) - unread number indicators +- [Bars](https://picturepan2.github.io/spectre/components.html#bars) - progress of a task or the value within the known range +- [Cards](https://picturepan2.github.io/spectre/components.html#cards) - flexible content containers +- [Chips](https://picturepan2.github.io/spectre/components.html#chips) - complex entities in small blocks +- [Menus](https://picturepan2.github.io/spectre/components.html#menus) - list of links or buttons for actions and navigation +- [Modals](https://picturepan2.github.io/spectre/components.html#modals) - flexible dialog prompts +- [Navigation](https://picturepan2.github.io/spectre/components.html#navigation) - breadcrumb, tabs, pagination and navs +- [Popovers](https://picturepan2.github.io/spectre/components.html#popovers) - small overlay content containers +- [Steps](https://picturepan2.github.io/spectre/components.html#steps) - progress indicators of a sequence of task steps +- [Tiles](https://picturepan2.github.io/spectre/components.html#tiles) - repeatable or embeddable information blocks +- [Toasts](https://picturepan2.github.io/spectre/components.html#toasts) - showing alerts or notifications +- [Tooltips](https://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 +- [Utilities](https://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: |