Spectre uses Gulp for compiling CSS. You can customize your version of Spectre.css by editing LESS files in /src directory or removing unneeded components from spectre.less.
-
Then, you can build the CSS file from the command line:
-
-
Navigate to the root directory of Spectre where you can find package.json file.
-
Run npm install. NPM will install all dev dependencies as listed in package.json.
-
When completed, run gulp build to compile LESS to CSS and minify files.
-
You can find compiled CSS files in /dist directory.
-
-
You can watch file changes and rebuild CSS files by using gulp watch.
Typography sets default styles for headings, paragraphs, semantic text, blockquote, lists and code elements.
-
-
-
headings
-
H1 Title 5rem
-
H2 Title 4rem
-
H3 Title 3rem
-
H4 Title 2.4rem
-
H5 Title 2rem
-
H6 Title 1.6rem
-
-
-
-<h1>H1 Title</h1>
-<h2>H2 Title <smallclass="label">4rem</small></h2>
-
-
-
paragraphs
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
-
Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
-
-
-
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <ahref="#">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
-
나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
-
-
-
Use the attribute lang or add the class cjk to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.
Tables include default styles for tables and data sets.
-
-
-
-
-
-
name
-
duration
-
genre
-
release date
-
-
-
-
-
The Shawshank Redemption
-
2h 22min
-
Crime, Drama
-
14 October 1994 USA
-
-
-
The Godfather
-
2h 55min
-
Crime, Drama
-
24 March 1972 USA
-
-
-
Schindler's List
-
3h 15min
-
Biography, Drama, History
-
4 February 1994 USA
-
-
-
Se7en
-
2h 7min
-
Crime, Drama, Mystery
-
22 September 1995 USA
-
-
-
-
-
Add the class table to any <table> element. The class will add padding, border and emphasized table header. Use table-striped to <table> to add zebra striped style. For hoverable table rows, you can add the class table-hover to enable hover style.
-
Use the class selected to make <tr> element highlighted.
Buttons include simple button styles for actions in different types and sizes.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Add the class btn to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons. A button with the class loading can show loading indicator.
-
-
-
-
-<buttonclass="btn">default button</button>
-<buttonclass="btn btn-primary">primary button</button>
-<buttonclass="btn btn-link">link button</button>
-
-<!-- a button with loading state -->
-<buttonclass="btn loading">button</button>
-
-
-
-
Add the class disabled or the attribute disabled for a disabled button.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
button sizes
-
-
-
-
-
-
-
-
-
-
-
-
-
Add the class btn-sm or btn-lg for small or large button size. Also, you can add the class btn-block for a full-width button.
Forms provide the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch.
-
-
-
-
-
-
-
-
-
-<form>
- <!-- form input control -->
- <divclass="form-group">
- <labelclass="form-label"for="input-example-1">Name</label>
- <inputclass="form-input"type="text"id="input-example-1"placeholder="Name" />
- </div>
- <!-- form radio control -->
- <divclass="form-group">
- <labelclass="form-label">Gender</label>
- <labelclass="form-radio">
- <inputtype="radio"name="gender" />
- <iclass="form-icon"></i> Male
- </label>
- <labelclass="form-radio">
- <inputtype="radio"name="gender"checked />
- <iclass="form-icon"></i> Female
- </label>
- </div>
- <!-- form select control -->
- <divclass="form-group">
- <selectclass="form-select">
- <option>Choose an option</option>
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
- </div>
- <!-- form switch control -->
- <divclass="form-group">
- <labelclass="form-switch">
- <inputtype="checkbox" />
- <iclass="form-icon"></i> Send me emails with news and tips
- </label>
- </div>
- <!-- form textarea control -->
- <divclass="form-group">
- <labelclass="form-label"for="input-example-3">Message</label>
- <textareaclass="form-input"id="input-example-3"placeholder="Textarea"rows="3"></textarea>
- </div>
- <!-- form checkbox control -->
- <divclass="form-group">
- <labelclass="form-checkbox">
- <inputtype="checkbox" />
- <iclass="form-icon"></i> Remember me
- </label>
- </div>
-</form>
-
-
-
-
You can use :indeterminate pseudo class for indeterminate state of checkboxes.
-
If you want to have a horizontal form, add the class form-horizontal to the <form> container. And add the class col-[1-12] to the child elements for form row layout.
To use form validation styles, add is-success and is-danger to the controls or add has-success and has-danger to parent elements. You can use the class form-input-hint to provide form validation success and error messages.
-
-
-
-
-
-
-
-
The name is invaild.
-
-
-
-
-
The email is available.
-
-
-
-
-
-
-
-
The option is invaild.
-
-
-
-
The option is available.
-
-
-
-
-
-
-<form>
- <!-- form validation class: has-success -->
- <divclass="form-group has-success">
- <labelclass="form-label"for="input-example-1">Name</label>
- <inputclass="form-input"type="text"id="input-example-1"placeholder="Name" />
- <pclass="form-input-hint">The name is invaild.</p>
- </div>
-
- <!-- form validation class: is-success -->
- <divclass="form-group">
- <labelclass="form-label"for="input-example-1">Name</label>
- <inputclass="form-input is-success"type="text"id="input-example-1"placeholder="Name" />
- <pclass="form-input-hint">The name is invaild.</p>
- </div>
-</form>
-
-
-
-
For smaller or larger input and select controls, you could add input-sm/input-lg and select-sm/select-lg to the elements.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
input groups
-
-
-
- slack.com/
-
-
-
-
-
-
- @slack.com
-
-
-
-
- slack.com/
-
-
-
-
-
-
-
-
- slack.com/
-
-
-
-
-
-
- @slack.com
-
-
-
-
- slack.com/
-
-
-
-
-
-
-
-
- slack.com/
-
-
-
-
-
-
- @slack.com
-
-
-
-
- slack.com/
-
-
-
-
-
-
-
If you want to attach text and button along with an input, add the class input-group to the input container. And add the class input-group-addon to the text element and input-group-btn to the button element.
-
-
-
-
-<!-- normal input group -->
-<divclass="input-group">
- <spanclass="input-group-addon">slack.com/</span>
- <inputtype="text"class="form-input"placeholder="site name" />
-</div>
-
-<!-- large input group -->
-<divclass="input-group">
- <spanclass="input-group-addon addon-lg">slack.com/</span>
- <inputtype="text"class="form-input input-lg"placeholder="site name" />
-</div>
-
-<!-- normal input group with button -->
-<divclass="input-group">
- <spanclass="input-group-addon">slack.com/</span>
- <inputtype="text"class="form-input"placeholder="site name" />
- <buttonclass="btn btn-primary input-group-btn">Submit</button>
-</div>
-
-
-
-
-
-
labels
-
-
Labels are formatted text tags for highlighted, informative information.
Add the class label to <span> or <small> elements. You can add another class label-primary, label-success and label-danger for a primary colored label.
Media include responsive images, figures and video classes.
-
Add the class img-responsive to <img> elements. The images will scale with the parent sizes.
-
-
-
-
-
-
-
-
-
You can use the element <figure> for an image with a caption. Add the class figure to <figure> element. The images with the class img-responsive will be responsive. And the included class figure-caption will provide basic style for caption. Also, you can use text-left, text-center and text-right for caption alignment.
-
-
-
-
-
- macOS Yosemite wallpaper
-
-
-
-
-
-
-
For responsive video, add a container with the class video-responsive. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.
Layout includes flexbox based responsive grid system with 12 columns.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
col-12 (100%)
-
-
-
-
-
col-9 (75%)
-
-
-
-
-
col-6 (50%)
-
-
-
-
-
col-3 (25%)
-
-
-
-
-
Add the class columns to a container with the class container. And add any element you want with classname column inside the container. These columns will take up the space equally. You can specific the width of each column by adding class col-[1-12].
-
And you can add the class col-gapless to have gapless columns.
-
-
-
-
-
col-6 (gapless)
-
-
-
col-6 (gapless)
-
-
-
-
-
By default, Spectre grid has multi-line flexbox enabled. You can add the class col-oneline to columns to make all its child columns positioned in the same single row.
Spectre provides a neat responsive layout grid system. There are .col-xs-[1-12], .col-sm-[1-12], .col-md-[1-12], .col-lg-[1-12] and .col-xl-[1-12] available for flexible grid across mobile, tablet and desktop viewport usage.
-
-
For window width less than 480px, all columns will show as a single row.
-
col-xs-[1-12] apply to window width smaller than or equal to 480px.
-
col-sm-[1-12] apply to window width smaller than or equal to 600px.
-
col-md-[1-12] apply to window width smaller than or equal to 840px.
-
col-lg-[1-12] apply to window width smaller than or equal to 960px.
-
col-xl-[1-12] apply to window width smaller than or equal to 1280px.
A navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the class navbar-section will be evenly distributed in the container.
Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
-
-
-
-
-
-
You have no new messages
-
Click the button to start a conversation.
-
-
-
-
-
-
-
You are not following anyone
-
-
-
-
-
-
-
-
-
-
An empty state component can include icons, messages(title and meta messages) and action buttons or any combination of those elements. Add empty-title, empty-meta or empty-action to the elements. HTML structure is exampled below.
-
-
-
-
-<divclass="empty">
- <iclass="icon icon-people"></i>
- <pclass="empty-title">You have no new messages</p>
- <pclass="empty-meta">Click the button to start a conversation.</p>
- <buttonclass="empty-action btn btn-primary">Send a message</button>
-</div>
-
Add the class avatar to <img> element. There are 4 additional sizes available, including avatar-xl (64px), avatar-lg (48px), avatar-sm (24px), and avatar-xs (16px). By default, the avatar size is 32px.
-
For users who don't have profile pictures, you may use their initials for avatars. Add the class avatar and avatar size class to <div> element. The attribute data-initial is the name appear inside the avatar.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-<!-- Basic avatar examples -->
-<figureclass="avatar avatar-xl">
- <imgsrc="img/avatar-1.png" />
-</figure>
-
-<figureclass="avatar avatar-xl">
- <imgsrc="img/avatar-1.png" />
- <imgsrc="img/avatar-5.png"class="avatar-icon" />
-</figure>
-
-<figureclass="avatar avatar-xl"data-initial="YZ"style="background-color: #5764c6;"></figure>
-
-<!-- Show initals when avatar image is unavailable or not fully loaded -->
-<figureclass="avatar avatar-xl"data-initial="YZ"style="background-color: #5764c6;">
- <imgsrc="img/avatar-1.png" />
-</figure>
-
-
-
-
-
-
chips
-
-
Chips are complex entities in small blocks.
-
-
-
-
- Crime
-
-
-
- Drama
-
-
-
- Biography
-
-
-
- Mystery
-
-
-
-
-
-
- Tony Stark
-
-
-
-
- Thor Odinson
-
-
-
-
- Steve Rogers
-
-
-
-
-
-
Add a container element with the class chip-sm. And add child text element, buttons or avatars with the class avatar.
Add a container element with the class form-autocomplete. There are 2 parts of it, one is form-autocomplete-input, another is menu component. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the autocomplete.
-
The autocomplete HTML structure is exampled below.
Tooltips provide context information labels that appear on hover and focus.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Tooltip component is built entirely in CSS.
-
Add the class tooltip and the attribute data-tooltip, which contains the tooltip content, to non self closing elements. And add the class name tooltip-right, tooltip-bottom or tooltip-left to define the position of a tooltip. By default, the tooltip appears above the element.
-
-
-
-
-<buttonclass="btn tooltip"data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
-<buttonclass="btn tooltip tooltip-right"data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
-
-
-
-
-
-
badges
-
-
Badges are often used as unread number indicators.
-
-
-
-
- Notifications
-
-
-
-
- Notifications
-
-
-
-
- Notifications
-
-
-
-
- Notifications
-
-
-
-
-
Add the class badge to non self closing elements. And add the attribute data-badge to define the content of a badge. The badge will appear in the top-right direction of the element.
Toasts are used to show alert or information to users.
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-
-
-
-
Add a container element with the class toast. You can add any text within the container, and even icons. You may also add a close button with the class btn-clear if you need.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-
-
-
-
And you can add the class toast-primary, toast-success or toast-danger for additional toast colors.
-
-
-
-
-<divclass="toast">
- <buttonclass="btn btn-clear float-right"></button>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</div>
-
-<divclass="toast toast-primary">
- <buttonclass="btn btn-clear float-right"></button>
- <iclass="icon icon-error_outline"></i>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</div>
-
-
-
-
-
-
menus
-
-
A menu is a vertical list of links or buttons for actions and navigation.
Add a container element with the class menu. And add child elements with the classname menu-item. You can separate menu items with a divider or menu-header. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.
Dropdown menus component is built entirely in CSS. It is triggered by :focus event.
-
Add a container element with the class dropdown. And add a focusable element with the classname dropdown-toggle for the button and a menu component right next to it.
-
-
-
Also, you can implement your JS to interact with the dropdown menus by adding the class active to the dropdown.
Add a container element with the class tab. And add child elements with the classname tab-item. You can add the class tab-block for a full-width tab. The tab-item or its child <a> with the class active will be highlighted.
Add a container element with the class pagination. And add child elements with the classname page-item. The page-item with the class active will be highlighted.
Add a container element with the class nav. And add child elements with the classname nav-item. The nav-item with the class active will be highlighted.
-
-
-
-
-
-
modals
-
-
Modals are flexible dialog prompts.
-
-
-
-
-
-
-
-
-
Modal title
-
-
-
-
- This is the content inside the modal.
-
-
Lorem ipsum
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
-
Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
-
Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
-
-
-
-
-
-
-
-
-
Add a container element with the class modal. And add a real container modal-container and overlay modal-overlay inside it. You can add child elements with the class name modal-header, modal-content and modal-footer - any or all of them.
-
Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the class active to the modal container
- Empower every person and every organization on the planet to achieve more.
-
-
-
-
-
-
-
-
Apple
-
Hardware and software
-
-
-
-
-
- To make a contribution to the world by making tools for the mind that advance humankind.
-
-
-
-
-
-
-
-
Google
-
Software and hardware
-
-
- Organize the world’s information and make it universally accessible and useful.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Surface Studio. Turn your desk into a Studio. Surface Studio is designed for the creative process.
-
-
-
-
-
-
-
-
Apple
-
Hardware and software
-
-
- To make a contribution to the world by making tools for the mind that advance humankind.
-
-
-
-
-
-
-
-
-
-
Google I/O
-
-
- An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
-
-
-
-
-
-
-
Add a container element with the class card. And add child elements with the class name card-image, card-header, card-content and/or card-footer. The card-image can be placed in any position.
-
-
-
-
-<divclass="card">
- <divclass="card-image">
- <imgsrc="img/osx-el-capitan.jpg"class="img-responsive" />
- </div>
- <divclass="card-header">
- <h4class="card-title">Microsoft</h4>
- <h6class="card-meta">Software and hardware</h6>
- </div>
- <divclass="card-body">
- To make a contribution to the world by making tools for the mind that advance humankind.
- </div>
- <divclass="card-footer">
- <buttonclass="btn btn-primary">Do</button>
- </div>
-</div>
-
Text utilities are used for text alignment, styles and overflow things.
-
-
-
-
-<!-- left-aligned text -->
-<divclass="text-left"></div>
-<!-- center-aligned text -->
-<divclass="text-center"></div>
-<!-- right-aligned text -->
-<divclass="text-right"></div>
-<!-- justified text -->
-<divclass="text-justify"></div>
-
-<!-- Lowercased text -->
-<divclass="text-lowercase"></div>
-<!-- Uppercased text -->
-<divclass="text-uppercase"></div>
-<!-- Capitalized text -->
-<divclass="text-capitalize"></div>
-
-<!-- Normal weight text -->
-<divclass="text-normal"></div>
-<!-- Bold text -->
-<divclass="text-bold"></div>
-<!-- Italicized text -->
-<divclass="text-italic"></div>
-<!-- Larger text (120%) -->
-<divclass="text-large"></div>
-
-<!-- Overflow behavior: display an ellipsis to represent clipped text -->
-<divclass="text-ellipsis"></div>
-<!-- Overflow behavior: truncate the text -->
-<divclass="text-clip"></div>
-<!-- Text may be broken at arbitrary points -->
-<divclass="text-break"></div>
-
-
-
-
-
-
-
Shape utilities are used for change element shapes.
-
-
-
-
-<!-- rounded element -->
-<divclass="rounded"></div>
-<!-- circle element -->
-<divclass="circle"></div>
-
-
-
-
-
-
-
A Divider is used for separating elements.
-
-
-
-
-
-
-
-
-
-<!-- divider element -->
-<divclass="divider"></div>
-
-
-
-
-
-
-
Loading indicator is used for loading or updating. Also, you can add the class loading to buttons for loading status.
-
-
-
-
-
-
-
-
-<!-- loading element -->
-<divclass="loading"></div>
-
- 
- 
- 
- 
- 
- 
- 
-