Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

0.2.15 #249

Merged
merged 30 commits into from
Aug 15, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
66df623
Reuse tables code
picturepan2 Apr 28, 2017
0dde7d9
Fixed incorrect bower main path
May 3, 2017
22af202
Merge pull request #213 from leroydev/fix/bower-main-property
picturepan2 May 5, 2017
17dccfb
Move Accordions to Components and add icons
picturepan2 May 5, 2017
430bb39
Update Breadcrumbs
picturepan2 May 25, 2017
2f9c7cb
Update visual style
picturepan2 Jun 7, 2017
bade342
Visual style update
picturepan2 Jun 8, 2017
130c203
Fix icon direction bug #218
picturepan2 Jun 8, 2017
bf07c7c
Fix icons bug within Autocomplete #212
picturepan2 Jun 8, 2017
73ee932
Fix icon animation bug within Accordions
picturepan2 Jun 8, 2017
123cfa1
Add Install from CDN
picturepan2 Jun 9, 2017
aba0d05
Change Dropdown menus max-height to 50% viewport height
picturepan2 Jun 13, 2017
7e73f38
Add Responsive container to the Docs #222
picturepan2 Jun 13, 2017
b50b8cb
Optimize Japanese font family
mzyy94 Jun 17, 2017
58b1973
Fix button loading with active status #229
picturepan2 Jun 26, 2017
5865991
Add Colors utilities #205
picturepan2 Jun 27, 2017
a827f7e
Merge pull request #228 from mzyy94/master
picturepan2 Jun 28, 2017
ef49185
Update East Asian language support and docs
picturepan2 Jun 28, 2017
78de8f1
IMPORTANT: Replace all rem units to px
picturepan2 Jul 1, 2017
ef7586b
Add Buttons and Forms variables
picturepan2 Jul 1, 2017
ad7ee1b
New Docs experience
picturepan2 Jul 19, 2017
ba51cc1
Update Docs experience
picturepan2 Aug 2, 2017
706c357
Add form-checkbox, radio and switch validation styles
picturepan2 Aug 3, 2017
a2f1864
Update the Docs HTML structure
picturepan2 Aug 3, 2017
f4057ff
Minor update to the Docs
picturepan2 Aug 3, 2017
b15b0ce
Completely rewritten Docs experience
picturepan2 Aug 13, 2017
4cb36cd
Add mobile responsive support
picturepan2 Aug 14, 2017
38962f9
Improve Docs homepage
picturepan2 Aug 15, 2017
a8ba146
IMPORTANT: Change back to rem unit, and default html font size is 20px.
picturepan2 Aug 15, 2017
d6b5a13
Update Responsive Container and docs
picturepan2 Aug 15, 2017
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 19 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,25 @@ Spectre.css is a lightweight, responsive and modern CSS framework for faster and

- Lightweight (~10KB gzipped) starting point for your projects
- Flexbox-based, responsive and mobile-friendly layout
- Carefully designed elements and components
- Elegantly designed and developed 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](https://picturepan2.github.io/spectre/) to learn more.
Read [the documentation](https://picturepan2.github.io/spectre/getting-started.html) 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.
There are 5 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/docs/dist).
Download the compiled and minified [Spectre CSS file](https://github.com/picturepan2/spectre/tree/master/docs/dist). And include `spectre.css` located in `/docs/dist` in your website or Web app <head> part.

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

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

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

##### Install with NPM
`$ npm install spectre.css --save`
Expand All @@ -25,13 +32,11 @@ Download the compiled and minified [Spectre CSS file](https://github.com/picture
##### Install with Bower
`$ bower install spectre.css --save`

And include `spectre.css` located in `/docs/dist` in your website or Web app &lt;head&gt; part.

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

### Compiling custom version

You can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/index.html#compiling).
You can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/getting-started.html#compiling).

### Documentation and examples

Expand All @@ -47,35 +52,37 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
- [Media](https://picturepan2.github.io/spectre/elements.html#media) - responsive images, figures and video classes

#### Layout
- [Flexbox-grid](https://picturepan2.github.io/spectre/layout.html#grid) - flexbox based responsive grid system
- [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

- [Accordions](https://picturepan2.github.io/spectre/components.html#accordions) - used to toggle sections of content
- [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
- [Breadcrumbs](https://picturepan2.github.io/spectre/components.html#breadcrumbs) - navigational hierarchy
- [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
- [Navs](https://picturepan2.github.io/spectre/components.html#navs) - navigational list of links
- [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
- [Pagination](https://picturepan2.github.io/spectre/components.html#pagination) - navigational links for multiple pages
- [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
- [Tabs](https://picturepan2.github.io/spectre/components.html#tabs) - toggle for different views
- [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](https://picturepan2.github.io/spectre/utilities.html) - layout, positions, display, text, shapes, loading things
- [Utilities](https://picturepan2.github.io/spectre/utilities.html) - colors, display, divider, loading, position, shapes and text utilities

#### Experimentals
- [Accordions](https://picturepan2.github.io/spectre/experimentals.html#accordions) - used to toggle sections of content
- [Calendars](https://picturepan2.github.io/spectre/experimentals.html#calendars) - date or date range picker and events display
- [Carousels](https://picturepan2.github.io/spectre/experimentals.html#carousels) - slideshows for cycling images
- [Comparison Sliders](https://picturepan2.github.io/spectre/experimentals.html#comparison) - sliders for comparing two images, built entirely in CSS
Expand Down
4 changes: 2 additions & 2 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{
"name": "spectre.css",
"version": "0.2.14",
"version": "0.2.15",
"description": "Spectre.css: a lightweight, responsive and modern CSS framework.",
"homepage": "http://picturepan2.github.io/spectre",
"repository": "picturepan2/spectre",
"license": "MIT",
"author": "Yan Zhu <picturepan2@hotmail.com>",
"main": "dist/spectre.css",
"main": "docs/dist/spectre.css",
"keywords": [
"css",
"framework",
Expand Down
Loading