Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.
Avatars are user profile pictures.
Badges are often used as unread number indicators.
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.
Cards are flexible content containers.
Chips are complex entities in small blocks.
Menus are vertical list of links or buttons for actions and navigation.
The dropdown is a combination of buttons and menus.
Modals are flexible dialog prompts.
Navigation includes several components, including breadcrumbs, tabs, pagination and navs.
Popovers are small overlay content containers. Popovers component is built entirely in CSS.
Steps are progress indicators of a sequence of task steps.
Tiles are repeatable or embeddable information blocks.
Toasts are used to show alert or information to users.
Tooltips provide context information labels that appear on hover and focus.
Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
Tables include default styles for tables and data sets.
Buttons include simple button styles for actions in different types and sizes.
Icons with the icon class can be correctly rendered in each button size.
<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
@@ -504,7 +501,7 @@ Korean
- Forms
#Forms
Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
@@ -716,6 +713,9 @@ Korean
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.
+
+
+
@@ -727,11 +727,11 @@ Korean
-
-
-
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 -->
+<div class="has-icon-left">
+ <input type="text" class="form-input" placeholder="..." />
+ <i class="form-icon icon icon-check"></i>
+</div>
+You can use the loading class for loading or posting state.
<!-- form input with loading icon -->
+<div class="has-icon-right">
+ <input type="text" class="form-input" placeholder="..." />
+ <i class="form-icon loading"></i>
+</div>
+The name is invalid.
+<form>
@@ -1012,7 +1115,7 @@ Korean
- Icons experimental
#Icons experimental
Icons 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.
@@ -1261,7 +1364,7 @@ Korean
- Labels
#Labels
Labels are formatted text tags for highlighted, informative information.
@@ -1286,7 +1389,7 @@ Korean
- Codes
#Codes
Codes are inline and multiline code snippets.
For inline code, you can use the element <code>. 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.
@@ -1309,7 +1412,7 @@ Korean
- Media
#Media
Media includes responsive images, figures and video classes.
Add the img-responsive class to <img> elements. The images will scale with the parent sizes.
@@ -1344,7 +1447,7 @@ Korean
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.
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.
The Experimentals include experimental elements and features, mostly are not yet ready for wide use. These elements and components are limited inside spectre-exp.less before browsers fully support them. Sometimes, there are some specific browsers targeted components.
Accordions are used to toggle sections of content.
+Calendars are designed for date or date range picker and events display. It is made with flex layout.
Carousels are slideshows for cycling images. It is built in pure CSS.
Comparison Sliders are sliders for comparing two images. It is built in pure CSS.
Filters are CSS only content filters.
Meters represent the value within the known range.
The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.
The Progress indicates the progress completion of a task.
Sliders are for selecting values from ranges.
Timelines are ordered sequences of activities.
Spectre.css is a lightweight and responsive and modern CSS framework for faster and extensible development.
Spectre provides basic styles for typography and elements, flexbox based responsive layout system, CSS components and utilities with best practice coding and consistent design language.
@@ -125,7 +125,7 @@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.
And include spectre.css in your website or Web app <head>. If you want the Spectre Experimentals and Spectre Icons, you can add spectre-exp.css and spectre-icons.css accordingly.
And include spectre.css located in /docs/dist in your website or Web app <head>. If you want the Spectre Icons and Experimentals, you can add spectre-icons.css and spectre-exp.css accordingly.
<link rel="stylesheet" href="dist/spectre.min.css" />
-<link rel="stylesheet" href="dist/spectre-exp.min.css" />
-<link rel="stylesheet" href="dist/spectre-icons.min.css" />
+<link rel="stylesheet" href="spectre.min.css" />
+<link rel="stylesheet" href="spectre-exp.min.css" />
+<link rel="stylesheet" href="spectre-icons.min.css" />
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, spectre-exp.less and spectre-icons.less.
Then, you can build the CSS file from the command line:
@@ -220,7 +220,7 @@Spectre.css is designed with consistent design language. You can modify variables.less to create your new or match existing design.
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:
April 2017
Layout includes flexbox based responsive grid system with 12 columns.
Spectre provides a neat responsive layout grid system and responsive visibility utilities.
Navbar is a layout container that appears in the header of apps and websites.
Panels are flexible view container layout with auto-expand content section.
Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.
Display utilities are used for display and hidden things.
Text utilities are used for text alignment, styles and overflow things.
Shape utilities are used for change element shapes.
A Divider is used for separating elements.
<!-- divider element -->
<div class="divider"></div>
<!-- divider element with text -->
<div class="divider text-center" data-content="OR"></div>
-Loading indicator is used for loading or updating. Also, you can add the loading class to buttons for loading status.
Previous
+Next