<!-- standard Accordions example --><divclass="accordion"><inputtype="checkbox"id="accordion-1"name="accordion-checkbox"hidden><labelclass="accordion-header"for="accordion-1"><iclass="icon icon-arrow-right mr-1"></i>
Title
</label><divclass="accordion-body"><!-- Accordions content --></div></div><!-- mutually exclusive Accordions example (with same input names) --><divclass="accordion"><inputtype="radio"id="accordion-1"name="accordion-radio"hidden><labelclass="accordion-header"for="accordion-1">
Title
</label><divclass="accordion-body"><!-- Accordions content --></div></div>
Alternatively, you can use details and summary instead of input radio or checkbox trick.
Add the open attribute to details to expand it.
Microsoft Edge support is under consideration.
<!-- details and summary Accordions example --><detailsclass="accordion"open><summaryclass="accordion-header"><iclass="icon icon-arrow-right mr-1"></i>
Title
</summary><divclass="accordion-body"><!-- Accordions content --></div></details>
Add the avatar class 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 avatar class and avatar size class to <div> element.
The data-initial attribute is the name appear inside the avatar.
<!-- Basic avatar examples --><figureclass="avatar avatar-xl"><imgsrc="img/avatar-1.png"alt="..."></figure><figureclass="avatar avatar-xl"data-initial="YZ"style="background-color: #5755d9;"></figure><!-- Show initals when avatar image is unavailable or not fully loaded --><figureclass="avatar avatar-xl"data-initial="YZ"style="background-color: #5755d9;"><imgsrc="img/avatar-1.png"alt="..."></figure>
Avatars support presence indicators.
You can add an <i> element with the avatar-presence class, and add online, busy or away class for different status colors.
The default is gray which means offline.
Badges are often used as unread number indicators.
Notifications
Notifications
Notifications
Notifications
Add the badge class to non self closing elements.
And add the data-badge attribute to define the content of a badge.
The badge will appear in the top-right direction of the element.
If there is no data-badge or the attribute is not specified, the badge will appear as a dot.
Badges support button and avatars elements as well.
Bars represent the progress of a task or the value within the known range.
Bars are custom components for displaying HTML5 <progress>, <meter> and input range elements.
25%
15%
10%
15%
Add a container element with the bar class.
And add child elements with the bar-item class.
The width percentage value is needed for every bar-item.
There is the bar-sm class for thinner Bars.
Also, you could use Tooltips for any bar-item.
<!-- normal bars --><divclass="bar bar-sm"><divclass="bar-item"role="progressbar"style="width:25%;"aria-valuenow="25"aria-valuemin="0"aria-valuemax="100"></div></div><!-- multi-bars --><divclass="bar"><divclass="bar-item tooltip"data-tooltip="25%"style="width:25%;">25%</div><divclass="bar-item"style="width:15%;background:#818bd5;">15%</div></div>
You can add the bar-slider class to the Bars container.
And add child elements with the bar-item class and bar-slider-btn inside bar-item.
You need to set the bar-item width manually to have the slider point.
If there are two bar-item divs in one bar-slider, you will have a range slider.
<!-- normal slider --><divclass="bar bar-slider"><divclass="bar-item"role="progressbar"style="width:25%;"><buttonclass="bar-slider-btn btn"role="slider"></button></div></div><!-- range slider --><divclass="bar bar-slider"><divclass="bar-item"role="progressbar"style="width:15%;"><buttonclass="bar-slider-btn btn"role="slider"></button></div><divclass="bar-item"role="progressbar"style="width:65%;"><buttonclass="bar-slider-btn btn"role="slider"></button></div></div>
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 I/O
Software and hardware
An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
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
Software and hardware
Organize the world’s information and make it universally accessible and useful.
Add a container element with the card class.
And add child elements with the card-image, card-header, card-body and/or card-footer classes.
The card-image can be placed in any position.
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've successfully signed up
Click the button to invite your friends
You are not following anyone
Start to meet new friends
An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements.
Add empty-icon, empty-title, empty-subtitle or empty-action to the elements.
HTML structure is exampled below.
<divclass="empty"><divclass="empty-icon"><iclass="icon icon-people"></i></div><pclass="empty-title h5">You have no new messages</p><pclass="empty-subtitle">Click the button to start a conversation.</p><divclass="empty-action"><buttonclass="btn btn-primary">Send a message</button></div></div>
Add a container element with the menu class.
And add child elements with the menu-item class.
You can separate menu items with a divider.
Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.
Menus also have Form controls (checkbox, radio and checkbox) support.
<ulclass="menu"><!-- menu header text --><liclass="divider"data-content="LINKS"></li><!-- menu item standard --><liclass="menu-item"><ahref="#"><iclass="icon icon-link"></i> Slack
</a></li><!-- menu item with form control --><liclass="menu-item"><labelclass="form-checkbox"><inputtype="checkbox"><iclass="form-icon"></i> form-checkbox
</label></li><!-- menu divider --><liclass="divider"></li><!-- menu item with badge --><liclass="menu-item"><ahref="#"><iclass="icon icon-link"></i> Settings
</a><divclass="menu-badge"><labelclass="label label-primary">2</label></div></li><liclass="menu-item"><ahref="#">My profile</a><divclass="menu-badge"><labelclass="form-checkbox"><inputtype="checkbox"><iclass="form-icon"></i> Public
</label></div></li></ul>
Dropdown menus component is built entirely in CSS. It is triggered by :focus event.
Add a container element with the dropdown class.
And add a focusable element with the dropdown-toggle class for the button and a menu component right next to it.
You also need to add tabindex to make the buttons focusable.
If the dropdown is close to the right edge of the browser, you can add the dropdown-right class to the container to prevent it appearing off screen.
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 modal class.
And add a real container modal-container and overlay modal-overlay inside it.
You can add child elements with the modal-header, modal-body 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 active class to the modal container.
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.
Add a container element with the pagination class.
And add child elements with the page-item class.
The page-item with the active class will be highlighted.
You can add the disabled class to the page-item to have unclickable page links.
Panels are flexible view container with auto-expand content section.
Bruce Banner
THE HULK
E-mail
bruce.banner@hulk.com
Skype
bruce.banner
Location
Dayton, Ohio
Comments
Thor Odinson
Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
Bruce Banner
The Strategic Homeland Intervention, Enforcement, and Logistics Division...
Tony Stark
Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
Steve Rogers
The Strategic Homeland Intervention, Enforcement, and Logistics Division...
Natasha Romanoff
Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
Add a container element with the panel class.
And add child elements with the panel-header, panel-nav, panel-body and/or panel-footer classes.
The panel-body can be auto expanded and vertically scrollable.
<divclass="panel"><divclass="panel-header"><divclass="panel-title">Comments</div></div><divclass="panel-nav"><!-- navigation components: tabs, breadcrumbs or pagination --></div><divclass="panel-body"><!-- contents --></div><divclass="panel-footer"><!-- buttons or inputs --></div></div>
To make a contribution to the world by making tools for the mind that advance humankind.
Wrap an element by a container with the popover class.
And add a container with the popover-container next to the element.
You can use Cards component inside the popover-container.
Also, you can add the popover-right, popover-bottom or popover-left class to define the position.
By default, the popovers appear above the element.
Add a container element with the step class.
And add child elements with the step-item class.
The step-item with the active class will be highlighted and indicate the current state of progress.
Add a container element with the tab class.
And add child elements with the tab-item class.
You can add the tab-block class for a full-width tab.
The tab-item or its child <a> with the active class will be highlighted.
Tiles are repeatable or embeddable information blocks.
The Avengers
Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
The S.H.I.E.L.D.
The Strategic Homeland Intervention, Enforcement, and Logistics Division...
Add a container with the tile class.
And add child elements with the tile-icon, tile-content or/and tile-action classes.
The tile-icon and tile-action are optional.
There are tile-title and tile-subtitle classes for title and subtitle text styles.
<divclass="tile"><divclass="tile-icon"><divclass="example-tile-icon"><iclass="icon icon-file centered"></i></div></div><divclass="tile-content"><pclass="tile-title">The Avengers</p><pclass="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p></div><divclass="tile-action"><buttonclass="btn btn-primary">Join</button></div></div>
Toasts are used to show alert or information to users.
Toast Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Add a container element with the toast class.
You can add any text within the container, and even icons.
You may also add a close button with the btn-clear class if you need.
<divclass="toast">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
Toast success
Toast warning
Toast error
And you can add the toast-primary, toast-success, toast-warning or toast-error class for additional toast colors.
<divclass="toast toast-primary"><buttonclass="btn btn-clear float-right"></button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS.
Add the tooltip class and the data-tooltip attribute, which contains the tooltip content, to non self closing elements.
And add the tooltip-right, tooltip-bottom or tooltip-left class 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>
Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.
Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
Accordions
Used to toggle sections of content
Avatars
User profile pictures
Badges
Used as unread number indicators
Bars
Progress of a task or the value within the known range
Breadcrumbs
Navigational hierarchies to indicate current location
Cards
Flexible content containers
Chips
Complex entities in small blocks
Empty states
Navigational hierarchies to indicate current location
Menu
Vertical list of links or buttons for actions and navigation
Modals
Flexible dialog prompts
Nav
Vertical list of links
Pagination
Vertical list of links or buttons for actions and navigation
Panels
Flexible view container with auto-expand content section
Popovers
Small overlay content containers
Steps
Progress indicators of a sequence of task steps
Tabs
Switch between different views
Tiles
Repeatable or embeddable information blocks
Toasts
Progress indicators of a sequence of task steps
Tooltips
Context information labels that appear on hover and focus
Buttons include simple button styles for actions in different types and sizes.
Add the btn class to <a>, <input> or <button> elements for a default button.
There are classes btn-primary and btn-link for predefined primary and link buttons.
Add the btn-success or btn-error class for success (green) or error (red) button color.
If you need more button colors, please use button mixins to create your own button color variants.
Please note that you could use the btn-action class for a square button, or add another s-circle class for a round button, which is often used as a Float Action Button (FAB).
Add the active class for active button state style.
Add the disabled class or the disabled attribute for disabled button state style.
<!-- buttons with disabled state --><buttonclass="btn disabled"tabindex="-1">disabled button</button><buttonclass="btn"disabledtabindex="-1">disabled button</button>
A button with the loading class can show loading indicator.
<!-- buttons with loading state --><buttonclass="btn loading">button</button><buttonclass="btn btn-primary loading">primary button</button>
For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it.
The data-lang attribute is rendered as the language name in the top right.
<!-- 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 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 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 radio control --><divclass="form-group"><labelclass="form-label">Gender</label><labelclass="form-radio"><inputtype="radio"name="gender"checked><iclass="form-icon"></i> Male
</label><labelclass="form-radio"><inputtype="radio"name="gender"><iclass="form-icon"></i> Female
</label></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 checkbox control --><divclass="form-group"><labelclass="form-checkbox"><inputtype="checkbox"><iclass="form-icon"></i> Remember me
</label></div>
You can change checkbox to indeterminate state by setting the indeterminate property of input checkboxes to true.
If you want to have a horizontal form, add the form-horizontal class to the <form> container.
And add the col-<1-12> and col-xs/sm/lg/xl-<1-12> class to the child elements for responsive form row layout.
<formclass="form-horizontal"><divclass="form-group"><divclass="col-3 col-sm-12"><labelclass="form-label"for="input-example-1">Name</label></div><divclass="col-9 col-sm-12"><inputclass="form-input"type="text"id="input-example-1"placeholder="Name"></div></div><!-- form structure --></form>
For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.
You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.
Add a wrapper with the has-icon-left/has-icon-right class to <input> element.
And add the icon with form-icon class next to the <input>.
<!-- form input with Spectre icon --><divclass="has-icon-left"><inputtype="text"class="form-input"placeholder="..."><iclass="form-icon icon icon-check"></i></div>
You can use the loading class for loading or posting state.
<!-- form input with loading icon --><divclass="has-icon-right"><inputtype="text"class="form-input"placeholder="..."><iclass="form-icon loading"></i></div>
If you want to attach text and button along with an input, add the input-group class to the input container.
And add the input-group-addon class to the text element and input-group-btn to the button element.
<!-- normal input group --><divclass="input-group"><spanclass="input-group-addon">...</span><inputtype="text"class="form-input"placeholder="..."></div><!-- large input group --><divclass="input-group"><spanclass="input-group-addon addon-lg">...</span><inputtype="text"class="form-input input-lg"placeholder="..."></div><!-- normal input group with button --><divclass="input-group"><spanclass="input-group-addon">...</span><inputtype="text"class="form-input"placeholder="..."><buttonclass="btn btn-primary input-group-btn">Submit</button></div>
To use form validation styles, you can either add is-success or is-error class to the controls or add has-success or has-error class to parent elements.
Use the form-input-hint class to provide form validation success and error messages.
<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="..."><pclass="form-input-hint">The name is invalid.</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="..."><pclass="form-input-hint">The name is invalid.</p></div><!-- form validation example for checkbox, radio and switch --><divclass="form-group"><labelclass="form-checkbox is-error"><inputtype="checkbox"><iclass="form-icon"></i> Remember me
</label></div></form>
You can use input pattern attribute to validate the value as well.
<!-- pattern validation example for Email --><inputclass="form-input"type="email"placeholder="Email"pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$"><!-- pattern validation example for password (8 or more characters that are of at least one number, and one uppercase and lowercase letter) --><inputclass="form-input"type="password"placeholder="Password"pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$">
Add the disabled attribute to the element or <fieldset> for a disabled form components style.
<formaction="#forms"><fieldsetdisabled><divclass="form-group"><labelclass="form-label"for="input-example-19">Name</label><inputclass="form-input"type="text"id="input-example-19"placeholder="Name"></div><divclass="form-group"><labelclass="form-label">Gender</label><labelclass="form-radio"><inputtype="radio"name="gender"disabled><iclass="form-icon"></i> Male
</label><labelclass="form-radio"><inputtype="radio"name="gender"disabled><iclass="form-icon"></i> Female
</label></div><divclass="form-group"><selectclass="form-select"disabled><option>Choose an option</option><option>Slack</option><option>Skype</option><option>Hipchat</option></select></div><divclass="form-group"><labelclass="form-switch"><inputtype="checkbox"disabled><iclass="form-icon"></i> Send me emails with news and tips
</label></div><divclass="form-group"><labelclass="form-label"for="input-example-20">Message</label><textareaclass="form-input"id="input-example-20"placeholder="Textarea"rows="3"disabled></textarea></div><divclass="form-group"><labelclass="form-checkbox"><inputtype="checkbox"disabled><iclass="form-icon"></i> Remember me
</label></div></fieldset>
Spectre.css Icons will be moved to a new GitHub Repo while Spectre will only include basic icons.
Icons.css are single-element, responsive and pure CSS icons.
You can include spectre-icons.css located in the dist folder to your web <head> to have these CSS icons.
Add the label class to <span> or <small> elements.
You can add another class label-primary, label-secondary, label-success, label-warning and label-error for colored labels.
<!-- normal labels --><spanclass="label">default label</span><spanclass="label label-primary">primary label</span>
Add the img-fit-contain or img-fit-cover class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container).
This feature can replace the classic background image trick. Microsoft Edge support is shipped with Build Number 16299+.
You can use the element <figure> for an image with a caption.
Add the figure class to <figure> element.
The images with the img-responsive class 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.
For responsive video, add a container with the video-responsive class.
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.
For responsive <video> elements, you can add the video-responsive class directly.
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.
나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
Add the lang attribute to the <html> element or use the class lang-zh, lang-zh-hans, lang-zh-hant, lang-ja or lang-ko to have better Asian CJK (Chinese, Japanese and Korean) font support.
<htmllang="zh-Hans">……</html><pclass="lang-zh-hans">革命不是请客吃饭，不是做文章……</p><pclass="lang-ja">祇園精舎の鐘の声、諸行無常の響きあり……</p><pclass="lang-ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
And you can use the lang-cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
Spectre sets the most common and best font-family for each OS with fallback support in old systems.
There are also fonts targeted East Asian typography.
The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
- Bill Gates
<blockquote><p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p><cite>- Bill Gates</cite></blockquote>
Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.
Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
Typography
Headings, paragraphs, semantic text, blockquote and lists elements
Tables
Tables and data sets
Buttons
Simple button styles for actions in different types and sizes
Forms
Input, textarea, select, checkbox, radio and switch
Icons
Single-element, responsive and pure CSS icons
Labels
Formatted text tags for highlighted, informative information
Add a container element with the form-autocomplete class.
There are 2 parts of it, one is form-autocomplete-input, another is menu component.
You may add the is-focused class to form-autocomplete-input to make it appear as focus state.
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.
Bruce Banner
Thor Odinson
Steve Rogers
Tony Stark
Natasha Romanoff
<divclass="form-autocomplete"><!-- autocomplete input container --><divclass="form-autocomplete-input form-input"><!-- autocomplete chips --><divclass="chip"><imgsrc="img/avatar-1.png"class="avatar avatar-sm"alt="Thor Odinson">
Thor Odinson
<ahref="#"class="btn btn-clear"aria-label="Close"role="button"></a></div><!-- autocomplete real input box --><inputclass="form-input"type="text"placeholder="typing here"></div><!-- autocomplete suggestion list --><ulclass="menu"><!-- menu list items --><liclass="menu-item"><ahref="#"><divclass="tile tile-centered"><divclass="tile-icon">
...
</div><divclass="tile-content">
...
</div></div></a></li></ul></div>
Carousels are slideshows for cycling images. It is built in pure CSS.
The default image number of Carousels is 8. You can add more images by changing the variable $carousel-number in _carousels.scss and re-compiling the CSS.
Filters use tag-1 to tag-8 to flag different tags.
tag-0 is reserved for clearing filter (or showing all).
You can overwrite $filter-number in _filters.scss to have more filters.
Meters represent the value within the known range.
<!-- Meter is green when low < value < high --><meterclass="meter"value="20"min="0"max="100"></meter><meterclass="meter"value="60"min="0"max="100"low="30"high="80"></meter><!-- Meter is yellow when value < low or high < value --><meterclass="meter"value="85"min="0"max="100"low="30"high="80"></meter><!-- Meter is red when value < low < high < optimum or optimum < low < high < value --><meterclass="meter"value="20"optimum="90"min="0"max="100"low="30"high="80"></meter>
The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.
By default, the off-canvas menu is collapsed whenever the window width is.
But you can add the off-canvas-sidebar-show class to the off-canvas to make the sidebar expanded when the window width is larger than or equal to 960px.
Sidebar
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.
You can open the sidebar by adding the class active to off-canvas-sidebar.
And remove the active to close it.
You will need to use your own product image sprite (all angle of photos in one image) and set the attribute max to the image numbers to use this component.
The Experimentals include experimental elements and features, mostly are not yet ready for wide use.
These elements and components are limited inside spectre-exp.scss before browsers fully support them.
Sometimes, there are some specific browsers targeted components.
360-Degree Viewer
Interactive 360-degree product photo viewer
Autocomplete
Form component provides suggestions while you type
Calendars
Date or date range picker and events display based on Flexbox
Carousels
Pure CSS slideshows for cycling images
Comparison sliders
Pure CSS sliders for comparing two images
Filters
CSS only content filters
Meters
Representing the value within the known range
Off-canvas
Navigation layout that sidebars can slide in and out of the viewport
Spectre uses Autoprefixer to make most styles compatible with earlier browsers and 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 Extended Support Release
Safari LAST 4
Opera LAST 4
Internet Explorer 10+
Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.
It is recommended to customize Spectre by importing Sass source files to your projects. In this way, you can keep Spectre up to date without conflicts, since Spectre code and your custom code are separate.
Then create your project-name.scss file in the root folder. You can use project-name.scss to define your variables.
Compile the Sass file to CSS to get the custom version of Spectre.
// Example of project-name.scss// Define variables to override default ones$primary-color: #2e5bec;
$dark-color: #3e396b;
// Import full Spectre source code@import"node_modules/spectre.css/src/spectre";
Alternatively, you can create custom _variables.scss and import it to project-name.scss.
// Example of project-name.scss@import"variables";
// Import only the needed components@import"node_modules/spectre.css/src/buttons";
@import"node_modules/spectre.css/src/forms";
Spectre.css is designed with consistent design language. You can use your own variables to create your new or match existing design. All variables in _variables.scss include !default flag. You can redefine the variables to override the values.
<!-- filled button with the success color -->
.btn-success {
@include button-variant($success-color);
}
<!-- outlined button with the success color -->
.btn-outline-success {
@include button-outline-variant($success-color);
}
The default REM (root em) size in Spectre.css is 20px.
Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to 20px, which is relatively easy to calculate.
Spectre uses 4px as the unit size. Sizes of components are based on the unit size.
I have updated the whole Spectre.css documents experience and bumped the version to v0.2.x. The new Docs can be viewed at https://picturepan2.github.io/spectre/. Here are the new things added:
New Docs experience with better navigations and better mobile off-canvas menu
New components: Tiles, Steps and Navs (part of Navigation)
Improvements: Action button, Autocomplete, Pagination, Tabs, Breadcrumbs, Badges, Cards, new Progress experimental support
Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.
Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
Lightweight (~10KB gzipped) starting point for your projects
Responsive
Flexbox-based, responsive and mobile-friendly layout
Modern
Elegantly designed and developed elements and components
Introduction
Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.
Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
Layout includes flexbox based responsive grid system with 12 columns.
col-12 (100%)
col-9 (75%)
col-6 (50%)
col-3 (25%)
<!-- flexbox grid example --><divclass="container"><divclass="columns"><divclass="column col-6">col-6</div><divclass="column col-3">col-3</div><divclass="column col-2">col-2</div><divclass="column col-1">col-1</div></div></div>
Add the columns class to a container with the container class.
And add any element you want with the column class inside the container. These columns will take up the space equally.
You can specify the width of each column by adding class col-<1-12>.
By default, Spectre grid has multi-line flexbox enabled. You can add the col-oneline class to columns to make all its child columns positioned in the same single row.
col-8
col-8
<!-- one line columns --><divclass="columns col-oneline"><divclass="column col-8">col-8</div><divclass="column col-8">col-8</div></div>
The Flexbox grid provides margin auto utilities to set offset.
There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns.
col-2
col-4 col-mx-auto
col-2
col-4 col-ml-auto
col-4 col-ml-auto
col-2
col-4 col-mx-auto
col-2
col-4 col-mr-auto
col-2
col-4 col-mx-auto
<!-- grid offset example --><divclass="container"><divclass="columns"><divclass="column col-4 col-mr-auto">col-4 col-mr-auto</div><divclass="column col-2">col-2</div></div></div>
You can add the col-auto class to the column to have auto width columns.
There are col-xl-auto, col-lg-auto, col-md-auto, col-sm-auto and col-xs-auto to set auto width in different viewport sizes.
col-auto
col
col-lg-auto
col
<!-- auto width column example --><divclass="container"><divclass="columns"><divclass="column col-auto">col-auto</div><divclass="column">col</div></div></div><divclass="container"><divclass="columns"><divclass="column col-lg-auto col-6">col-lg-auto</div><divclass="column">col</div></div></div>
The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements.
Each section with the navbar-section class will be evenly distributed in the container.
<headerclass="navbar"><sectionclass="navbar-section"><ahref="#"class="btn btn-link">Docs</a><ahref="#"class="btn btn-link">Examples</a></section><sectionclass="navbar-center"><!-- centered logo or brand --></section><sectionclass="navbar-section"><ahref="#"class="btn btn-link">Twitter</a><ahref="#"class="btn btn-link">GitHub</a></section></header>
Spectre provides a neat responsive layout grid system and responsive visibility utilities.
col-10
col-lg-8
col-lg-8
col-md-6
col-md-6
col-sm-4
col-sm-4
col-2
col-lg-4
col-lg-4
col-md-6
col-md-6
col-sm-8
col-sm-8
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.
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.
col-<1-12> apply to all window width, including the width wider than 1280px.
The responsive layout also provides fixed-width containers.
Use grid-xs(480px), grid-sm(600px), grid-md(840px), grid-lg(960px) or grid-xl(1280px) to the container for a fixed-width container with the specific max-width.
<!-- 100% width container with max-width set to grid-lg (960px) --><divclass="container grid-lg"><divclass="columns">
...
</div></div>
Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.
Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
Flexbox grid
Flexbox based responsive grid system with 12 columns
Responsive
Responsive layout grid system and responsive visibility utilities
Hero
Container for key featured content or information
Navbar
Layout container that appears in the header of apps and websites
Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
Include spectre.css located in /dist in your website or Web app <head>. Also, you can add spectre-icons.css and spectre-exp.css accordingly.
================================================
FILE: docs/src/_layout/_ad-c.pug
================================================
================================================
FILE: docs/src/_layout/_ad-g.pug
================================================
block ad-adsense
.docs-ad
.hide-md.text-center
script(async='', src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js')
// GitHub-lg
ins.adsbygoogle.mx-auto(style='display:inline-block;width:728px;height:90px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9894180784')
script.
(adsbygoogle = window.adsbygoogle || []).push({});
.show-md.text-center
// GitHub-sm
ins.adsbygoogle(style='display:inline-block;width:300px;height:250px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9278881734')
script.
(adsbygoogle = window.adsbygoogle || []).push({});
================================================
FILE: docs/src/_layout/_docs-layout.pug
================================================
extends _layout.pug
include _mixins.pug
block content
.docs-container.off-canvas.off-canvas-sidebar-show
.docs-navbar
a.off-canvas-toggle.btn.btn-link.btn-action(href='#sidebar')
i.icon.icon-menu
.btns.d-flex
input.docs-search.form-input(type="text" placeholder="Search Docs")
a.btn.ml-1(href='https://www.paypal.me/picturepan2' target='_blank') PayPal
a.btn.btn-primary.ml-1(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
#sidebar.docs-sidebar.off-canvas-sidebar
.docs-brand
if slug != parent
a.docs-logo(href='../index.html')
img(src='../img/spectre-logo.svg' alt='Spectre.css CSS Framework')
h2 SPECTRE
small.label.label-secondary.text-bold DOCS
else
a.docs-logo(href='index.html')
img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
h2 SPECTRE
small.label.label-secondary.text-bold DOCS
.docs-nav
.accordion-container
+docs-accordion(
'getting-started',
'Getting started',
{url: 'installation', name: 'Installation'},
{url: 'custom', name: 'Custom version'},
{url: 'browsers', name: 'Browser support'},
{url: 'whatsnew', name: 'What\'s new'}
)
+docs-accordion(
'elements',
'Elements',
{url: 'typography', name: 'Typography'},
{url: 'tables', name: 'Tables'},
{url: 'buttons', name: 'Buttons'},
{url: 'forms', name: 'Forms'},
{url: 'icons', name: 'Icons.css'},
{url: 'labels', name: 'Labels'},
{url: 'code', name: 'Code'},
{url: 'media', name: 'Media'}
)
+docs-accordion(
'layout',
'Layout',
{url: 'grid', name: 'Flexbox grid'},
{url: 'responsive', name: 'Responsive'},
{url: 'hero', name: 'Hero'},
{url: 'navbar', name: 'Navbar'}
)
+docs-accordion(
'components',
'Components',
{url: 'accordions', name: 'Accordions'},
{url: 'avatars', name: 'Avatars'},
{url: 'badges', name: 'Badges'},
{url: 'bars', name: 'Bars'},
{url: 'breadcrumbs', name: 'Breadcrumbs'},
{url: 'cards', name: 'Cards'},
{url: 'chips', name: 'Chips'},
{url: 'empty', name: 'Empty states'},
{url: 'menu', name: 'Menu'},
{url: 'modals', name: 'Modals'},
{url: 'nav', name: 'Nav'},
{url: 'pagination', name: 'Pagination'},
{url: 'panels', name: 'Panels'},
{url: 'popovers', name: 'Popovers'},
{url: 'steps', name: 'Steps'},
{url: 'tabs', name: 'Tabs'},
{url: 'tiles', name: 'Tiles'},
{url: 'toasts', name: 'Toasts'},
{url: 'tooltips', name: 'Tooltips'}
)
+docs-accordion(
'utilities',
'Utilities',
{url: 'colors', name: 'Colors'},
{url: 'cursors', name: 'Cursors'},
{url: 'display', name: 'Display'},
{url: 'divider', name: 'Divider'},
{url: 'loading', name: 'Loading'},
{url: 'position', name: 'Position'},
{url: 'shapes', name: 'Shapes'},
{url: 'text', name: 'Text'}
)
+docs-accordion(
'experimentals',
'Experimentals',
{url: 'viewer-360', name: '360-Degree Viewer'},
{url: 'autocomplete', name: 'Autocomplete'},
{url: 'calendars', name: 'Calendars'},
{url: 'carousels', name: 'Carousels'},
{url: 'comparison', name: 'Comparison sliders'},
{url: 'filters', name: 'Filters'},
{url: 'meters', name: 'Meters'},
{url: 'off-canvas', name: 'Off-canvas'},
{url: 'parallax', name: 'Parallax'},
{url: 'progress', name: 'Progress'},
{url: 'sliders', name: 'Sliders'},
{url: 'timelines', name: 'Timelines'}
)
a.off-canvas-overlay(href='#close')
.off-canvas-content
#content.docs-content
block docs-content
script(type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js")
script.
docsearch({
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
indexName: 'picturepan2_spectre',
inputSelector: '.docs-search',
debug: true
});
================================================
FILE: docs/src/_layout/_example-layout.pug
================================================
block variables
- var slug = ''
- var parent = ''
- var title = 'Spectre.css - A Lightweight, Responsive and Modern CSS Framework'
- var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
doctype html
html(lang='en')
head
title= title
meta(charset='utf-8')
meta(name='robots' content='index, follow')
meta(name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no')
meta(http-equiv='x-ua-compatible' content='ie=edge')
meta(name='description' content= description)
link(rel='shortcut icon' href='../img/favicons/favicon.ico')
link(rel='icon' href='../img/favicons/favicon.png')
link(rel='stylesheet' href='../dist/spectre.min.css')
link(rel='stylesheet' href='../dist/spectre-icons.min.css')
link(rel='stylesheet' href='../dist/spectre-exp.min.css')
link(rel='stylesheet' href='../dist/docs.min.css')
body
block content
script.
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2702768-8', 'auto');
ga('send', 'pageview');
================================================
FILE: docs/src/_layout/_footer.pug
================================================
#copyright.docs-footer.container.grid-lg
p
a(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
| ·
a(href='https://twitter.com/spectrecss' target='_blank') Twitter
| ·
a(href='https://www.paypal.me/picturepan2' target='_blank') PayPal Donate
| ·
a(href='https://www.patreon.com/spectrecss' target='_blank') Patreon Sponsor
| · Version
span.version
p
| Designed and built with
span.text-error ♥
| by
a(href='https://twitter.com/picturepan2' target='_blank') Yan Zhu
| . Licensed under the
a(href='https://github.com/picturepan2/spectre/blob/master/LICENSE' target='_blank') MIT License
| .
================================================
FILE: docs/src/_layout/_layout.pug
================================================
block global
- var domain = 'https://picturepan2.github.io/spectre/'
- var url = domain
block variables
- var slug = ''
- var parent = ''
- var title = 'Spectre.css - A Lightweight, Responsive and Modern CSS Framework'
- var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
if slug == parent
if slug == 'index'
- var url = domain
else
- var url = domain + slug + '.html'
else
- var url = domain + parent + '/' + slug + '.html'
doctype html
html(lang='en')
head
title= title
meta(charset='utf-8')
meta(name='robots' content='index, follow')
meta(name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no')
meta(http-equiv='x-ua-compatible' content='ie=edge')
meta(name='description' content= description)
meta(name='author' content='Yan Zhu')
meta(property='og:url' content= url)
meta(property='og:title' content= title)
meta(property='og:description' content= description)
meta(name='twitter:card' content='summary')
meta(name='twitter:site' content='@spectrecss')
meta(name='twitter:creator' content='@picturepan2')
if slug != parent
link(rel='shortcut icon' href='../img/favicons/favicon.ico')
link(rel='icon' href='../img/favicons/favicon.png')
link(rel='stylesheet' href='../dist/spectre.min.css')
link(rel='stylesheet' href='../dist/spectre-icons.min.css')
link(rel='stylesheet' href='../dist/spectre-exp.min.css')
link(rel='stylesheet' href='../dist/docs.min.css')
else
link(rel='shortcut icon' href='img/favicons/favicon.ico')
link(rel='icon' href='img/favicons/favicon.png')
link(rel='stylesheet' href='dist/spectre.min.css')
link(rel='stylesheet' href='dist/spectre-icons.min.css')
link(rel='stylesheet' href='dist/spectre-exp.min.css')
link(rel='stylesheet' href='dist/docs.min.css')
link(rel='canonical' href= url)
body
block content
script.
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2702768-8', 'auto');
ga('send', 'pageview');
================================================
FILE: docs/src/_layout/_mixins.pug
================================================
mixin docs-accordion(id, name, ...pages)
.accordion
input(id='accordion-' + id type='checkbox' name='docs-accordion-checkbox' hidden='' checked=(parent === id ? true : false))
label.accordion-header.c-hand(for='accordion-' + id)= name
.accordion-body
ul.menu.menu-nav
each page in pages
li.menu-item
if slug != parent
a(href='../' + id + '/' + page.url + '.html')= page.name
else
a(href=id + '/' + page.url + '.html')= page.name
mixin docs-heading(id, name)
.container(id=id)
h3.s-title
| #{name}
a.anchor(href='#'+id aria-hidden='true') #
if block
block
mixin docs-subheading(id, name)
h4.s-subtitle(id=id)
| #{name}
a.anchor(href='#'+id aria-hidden='true') #
================================================
FILE: docs/src/components/accordions.pug
================================================
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'accordions'
- var parent = 'components'
- var title = 'Accordions - Components - Spectre.css CSS Framework'
- var description = 'Accordions are used to toggle sections of content. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
+docs-heading('accordions', 'Accordions')
include ../_layout/_ad-g.pug
p Accordions are used to toggle sections of content.
.docs-demo.columns
.column.col-6.col-md-12
.accordion
input#accordion-1(type="radio" name="accordion-radio" hidden="" checked="")
label.accordion-header.c-hand(for="accordion-1")
i.icon.icon-arrow-right.mr-1
| Elements
.accordion-body
ul.menu.menu-nav
li.menu-item
a(href="#accordions") Element 1
li.menu-item
a(href="#accordions") Element 2
.accordion
input#accordion-2(type="radio" name="accordion-radio" hidden="")
label.accordion-header.c-hand(for="accordion-2")
i.icon.icon-arrow-right.mr-1
| Layout
.accordion-body
ul.menu.menu-nav
li.menu-item
a(href="#accordions") Layout 1
li.menu-item
a(href="#accordions") Layout 2
.accordion
input#accordion-3(type="radio" name="accordion-radio" hidden="")
label.accordion-header.c-hand(for="accordion-3")
i.icon.icon-arrow-right.mr-1
| Components
.accordion-body
ul.menu.menu-nav
li.menu-item
a(href="#accordions") Component 1
li.menu-item
a(href="#accordions") Component 2
.column.col-6.col-md-12
.accordion
input#accordion-4(type="checkbox" name="accordion-checkbox" hidden="" checked="")
label.accordion-header.c-hand(for="accordion-4")
| Elements
.accordion-body
ul.menu.menu-nav
li.menu-item
a(href="#accordions") Element 1
li.menu-item
a(href="#accordions") Element 2
.accordion
input#accordion-5(type="checkbox" name="accordion-checkbox" hidden="")
label.accordion-header.c-hand(for="accordion-5")
| Layout
.accordion-body
ul.menu.menu-nav
li.menu-item
a(href="#accordions") Layout 1
li.menu-item
a(href="#accordions") Layout 2
.accordion
input#accordion-6(type="checkbox" name="accordion-checkbox" hidden="")
label.accordion-header.c-hand(for="accordion-6")
| Components
.accordion-body
ul.menu.menu-nav
li.menu-item
a(href="#accordions") Component 1
li.menu-item
a(href="#accordions") Component 2
pre.code(data-lang='HTML')
code
:highlight(lang="html")
p
| Alternatively, you can use #[code details] and #[code summary] instead of #[code input] radio or checkbox trick.
| Add the #[code open] attribute to #[code details] to expand it.
| Microsoft Edge support is #[a(href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank") under consideration].
pre.code(data-lang='HTML')
code
:highlight(lang="html")
Title
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
================================================
FILE: docs/src/components/avatars.pug
================================================
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'avatars'
- var parent = 'components'
- var title = 'Avatars - Components - Spectre.css CSS Framework'
- var description = 'Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
+docs-heading('avatars', 'Avatars')
include ../_layout/_ad-g.pug
p Avatars are user profile pictures.
.docs-demo.columns
.column.col-6.col-xs-12
figure.avatar.avatar-xl.mr-2
img(src="../img/avatar-1.png" alt="Avatar XL")
figure.avatar.avatar-lg.mr-2
img(src="../img/avatar-2.png" alt="Avatar LG")
figure.avatar.mr-2
img(src="../img/avatar-3.png" alt="Avatar")
figure.avatar.avatar-sm.mr-2
img(src="../img/avatar-4.png" alt="Avatar SM")
figure.avatar.avatar-xs.mr-2
img(src="../img/avatar-5.png" alt="Avatar XS")
.column.col-6.col-xs-12
figure.avatar.avatar-xl.mr-2(data-initial="YZ")
figure.avatar.avatar-lg.mr-2(data-initial="YZ")
figure.avatar.mr-2(data-initial="YZ")
figure.avatar.avatar-sm.mr-2(data-initial="YZ")
figure.avatar.avatar-xs.mr-2(data-initial="YZ")
p
| Add the #[code avatar] class to #{''} element.
| There are 4 additional sizes available, including #[code avatar-xl](64px), #[code avatar-lg](48px), #[code avatar-sm](24px), and #[code avatar-xs](16px).
| By default, the avatar size is 32px.
p
| For users who don't have profile pictures, you may use their initials for avatars.
| Add the #[code avatar] class and avatar size class to #{'
'} element.
| The #[code data-initial] attribute is the name appear inside the avatar.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
+docs-subheading('avatars-icons', 'Avatar icons')
.docs-demo.columns
.column.col-6.col-xs-12
figure.avatar.avatar-xl.mr-2
img(src="../img/avatar-1.png" alt="Avatar")
img.avatar-icon(src="../img/avatar-2.png" alt="Avatar")
figure.avatar.avatar-lg.mr-2
img(src="../img/avatar-2.png" alt="Avatar")
img.avatar-icon(src="../img/avatar-3.png" alt="Avatar")
figure.avatar.mr-2
img(src="../img/avatar-3.png" alt="Avatar")
img.avatar-icon(src="../img/avatar-4.png" alt="Avatar")
figure.avatar.avatar-sm.mr-2
img(src="../img/avatar-4.png" alt="Avatar")
img.avatar-icon(src="../img/avatar-5.png" alt="Avatar")
figure.avatar.avatar-xs
img(src="../img/avatar-5.png" alt="Avatar")
img.avatar-icon(src="../img/avatar-1.png" alt="Avatar")
pre.code(data-lang='HTML')
code
:highlight(lang="html")
+docs-subheading('avatars-presence', 'Avatar presence')
.docs-demo.columns
.column.col-6.col-xs-12
figure.avatar.avatar-xl.mr-2(data-initial="YZ")
i.avatar-presence.online
figure.avatar.avatar-lg.mr-2(data-initial="YZ")
i.avatar-presence.busy
figure.avatar.mr-2(data-initial="YZ")
i.avatar-presence.away
figure.avatar.avatar-sm.mr-2(data-initial="YZ")
i.avatar-presence.offline
figure.avatar.avatar-xs.mr-2(data-initial="YZ")
i.avatar-presence.online
p
| Avatars support presence indicators.
| You can add an #{''} element with the #[code avatar-presence] class, and add #[code online], #[code busy] or #[code away] class for different status colors.
| The default is gray which means offline.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
================================================
FILE: docs/src/components/badges.pug
================================================
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'badges'
- var parent = 'components'
- var title = 'Badges - Components - Spectre.css CSS Framework'
- var description = 'Badges are often used as unread number indicators. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
+docs-heading('badges', 'Badges')
include ../_layout/_ad-g.pug
p Badges are often used as unread number indicators.
.docs-demo.columns
.column.col-3.col-xs-6
span.badge(data-badge="")
| Notifications
.column.col-3.col-xs-6
span.badge(data-badge="8")
| Notifications
.column.col-3.col-xs-6
span.badge(data-badge="88")
| Notifications
.column.col-3.col-xs-6
span.badge(data-badge="888")
| Notifications
p
| Add the #[code badge] class to non self closing elements.
| And add the #[code data-badge] attribute to define the content of a badge.
| The badge will appear in the top-right direction of the element.
p
| If there is no #[code data-badge] or the attribute is not specified, the badge will appear as a dot.
.docs-demo.columns
.column.col-sm-12
button.btn.badge(data-badge="") Button
button.btn.badge(data-badge="8") Button
.column.col-sm-12
button.btn.btn-primary.badge(data-badge="") Button
button.btn.btn-primary.badge(data-badge="8") Button
.column.col-sm-12
figure.avatar.avatar-xl.badge(data-badge="8" data-initial="YZ")
img(src="../img/avatar-1.png" alt="YZ")
figure.avatar.avatar-lg.badge(data-badge="8" data-initial="YZ")
img(src="../img/avatar-2.png" alt="YZ")
figure.avatar.badge(data-badge="8" data-initial="YZ")
img(src="../img/avatar-3.png" alt="YZ")
p
| Badges support #[code button] and #[code avatars] elements as well.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
Notifications
Notifications
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
================================================
FILE: docs/src/components/bars.pug
================================================
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'bars'
- var parent = 'components'
- var title = 'Bars - Components - Spectre.css CSS Framework'
- var description = 'Bars represent the progress of a task or the value within the known range.Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
+docs-heading('bars', 'Bars')
include ../_layout/_ad-g.pug
p
| Bars represent the progress of a task or the value within the known range.
| Bars are custom components for displaying HTML5 #{'
