Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Last update: Jan 8, 2023

Overview

Spectre.css

Spectre.css is a lightweight, responsive and modern CSS framework.

Lightweight (~10KB gzipped) starting point for your projects
Flexbox-based, responsive and mobile-friendly layout
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 Sass/Scss compiler.

Spectre.css is completely free to use. If you enjoy it, please consider donating via Paypal or via Patreon for the further development. ♥

Getting started

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 files. 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 or cdnjs 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

Install with Yarn

$ yarn add spectre.css

Install with Bower

$ bower install spectre.css --save

Compiling custom version

You can compile your custom version of Spectre.css. Read the documentation.

Documentation and examples

Elements

Layout

Components

Utilities

Utilities - colors, display, divider, loading, position, shapes and text utilities

Experimentals

360-Degree Viewer - CSS ONLY
Autocomplete
Calendars
Carousels - CSS ONLY
Comparison Sliders - CSS ONLY
Filters - CSS ONLY
Meters
Off-canvas - CSS ONLY
Parallax - CSS ONLY
Progress
Sliders
Timelines

Browser support

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.

Designed and built with ♥ by Yan Zhu. Feel free to submit a pull request. Help is always appreciated.

Comments

Is Spectre still being maintained?

I see the last release was quite a while ago (over a year ago) and we’re still not yet to a stable 1.0.0 release. Is there a roadmap available for future development of the Spectre CSS framework?

opened by webuxr 18
Sass port available

First of all I liked the simplicity of spectre, good job yan 👍 I converted spectre to sass in order to people like me use however they want

repository: https://github.com/nusu/spectre.scss

opened by nusu 12
Comparison sliders don't fit images responsively

Images under comparison sliders (especially when the "after" image is smaller than the "before") are not fit responsively — meaning the full image isn't displayed entirely; I assume it is because of the object-fit: none style. unsetting it shows the whole image, but the sliding motion stretches the image as we slide.

@picturepan2 Is there a more elegant solution?
bug

opened by paambaati 11

iphone 滑动很卡，怎么办？

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>滑动很慢</title>
	<link rel="stylesheet" href="css/spectre.min.css" />
	<link rel="stylesheet" href="css/spectre-exp.min.css" />
	<link rel="stylesheet" href="css/spectre-icons.min.css" />
	<link rel="stylesheet" href="css/public.css" />
	<link rel="alternate icon" href="img/logo.jpg">
	<link rel="apple-touch-icon-precomposed" href="img/logo.jpg">
</head>

<body>
	<div class="off-canvas">
		<input type="checkbox" class="off-canvas-checkbox" id="sidebar-checkbox" name="sidebar-checkbox" hidden="">
		<label class="off-canvas-toggle btn btn-primary btn-lg" for="sidebar-checkbox">
              <i class="icon icon-menu"></i>
            </label>
		<div class="off-canvas-sidebar flex-centered">
			<span>Sidebar</span>
		</div>
		<div class="off-canvas-content">
			<div id="cards" class="container">
				<h3 class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3>
				<div class="docs-note">
					<p>Cards are flexible content containers.</p>
				</div>
				<div class="columns">
					<div class="column col-6 col-xs-12">
						<div class="card">
							<div class="card-image">
								<img class="img-responsive" src="img/osx-el-capitan.jpg" alt="OS X El Capitan">
							</div>
							<div class="card-header">
								<div class="card-title h5">Microsoft</div>
								<div class="card-subtitle text-gray">Software and hardware</div>
							</div>
							<div class="card-body">
								Empower every person and every organization on the planet to achieve more.
							</div>
							<div class="card-footer">
								<a href="#cards" class="btn btn-primary">Do</a>
							</div>
						</div>
					</div>
					<div class="column col-6 col-xs-12">
						<div class="card">
							<div class="card-header">
								<div class="card-title h5">Apple</div>
								<div class="card-subtitle text-gray">Hardware and software</div>
							</div>
							<div class="card-image">
								<img class="img-responsive" src="img/osx-yosemite.jpg" alt="OS X Yosemite">
							</div>
							<div class="card-body">
								To make a contribution to the world by making tools for the mind that advance humankind.
							</div>
							<div class="card-footer">
								<div class="btn-group btn-group-block">
									<button class="btn btn-primary">Buy</button>
									<button class="btn">Buy</button>
									<button class="btn">Buy</button>
								</div>
							</div>
						</div>
					</div>
					<div class="column col-6 col-xs-12">
						<div class="card">
							<div class="card-image">
								<img class="img-responsive" src="img/macos-sierra-2.jpg" alt="macOS Sierra">
							</div>
							<div class="card-header">
								<button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button>
								<div class="card-title h5">Google I/O</div>
								<div class="card-subtitle text-gray">Software and hardware</div>
							</div>
							<div class="card-body">
								An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
							</div>
						</div>
					</div>
					<div class="column col-6 col-xs-12">
						<div class="card">
							<div class="card-image">
								<img class="img-responsive" src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan">
							</div>
							<div class="card-footer">
								<a href="#cards" class="btn btn-primary">Buy</a>
								<a href="#cards" class="btn btn-link">Share</a>
							</div>
							<div class="card-body">
								<strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process.
							</div>
						</div>
					</div>
					<div class="column col-6 col-xs-12">
						<div class="card">
							<div class="card-header">
								<div class="card-title h5">Apple</div>
								<div class="card-subtitle text-gray">Hardware and software</div>
							</div>
							<div class="card-body">
								To make a contribution to the world by making tools for the mind that advance humankind.
							</div>
							<div class="card-image">
								<img class="img-responsive" src="img/macos-sierra.jpg" alt="macOS Sierra">
							</div>
						</div>
					</div>
					<div class="column col-6 col-xs-12">
						<div class="card">
							<div class="card-header">
								<div class="card-title h5">Google</div>
								<div class="card-subtitle text-gray">Software and hardware</div>
							</div>
							<div class="card-body">
								Organize the world’s information and make it universally accessible and useful.
							</div>
							<div class="card-image">
								<img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite">
							</div>
							<div class="card-footer">
								<a href="#cards" class="btn btn-primary">Search</a>
								<a href="#cards" class="btn btn-link">Share</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

question

opened by Damingboss 11

/dist folder in Github

Hi,

It isn't a best practice to commit the dist folder to the version control system. I would be nice if Gulp generate it only when running the gulpfile locally (and add this folder to .gitignore).

It's kind annoying since, to git pull the changes, git complains about having modified files in my local branch and blocks the pull.

I imagine you do that to facilitate distribution. But a separate web folder to serve the compiled files would be better.

Just my 2c.
enhancement

opened by alexandremjacques 11
Converted Spectre to Sass (SCSS).

Hello,

I've made a Sass version of spectre.

I've adjusted the gulpfile to better suit my own workflow. In Terminal on OS X you'd need to run sudo npm install and then sudo npm install gulp-sass inside the project's directory. From there just run the gulp command and it'll watch for changes to SCSS files and update the CSS file automatically. Feel free to change the gulpfile back to the original if you prefer.

I wasn't sure if creating a pull request to the master was the best option but I couldn't see a sass branch available.

All the best,

opened by samrawks 11
Unofficial SCSS version updated to 0.3.2

I've merged all the 0.3.2 additions/fixes/changes into my SCSS fork of Spectre.css: https://github.com/trilbymedia/spectre-scss

I've eyeball tested the docs with the LESS compiled version with the SCSS version and I'm pretty sure everything lines up 100%. Please leave any issues you find on the repo above so as not to clutter the official repo with SCSS related inconsistencies.

I'll keep track of any updates like last time. Still hoping we can have an official SCSS version added to the original repo some time :)

opened by rhukster 10
`.grid-960 {width: 98rem}` not work for Chrome
Since the root font-size is defined on <html>:

html { font-size: 10px; }

And .grid-960 is defined with a width of 98rem. So the expected width should be:

98rem = 98 * 10px = 980px

However this does not work because Chrome has a smallest font-size limit of 12px. So the width is actually calculated like this:

98rem = 98 * 12px = 1176px

And the layout breaks.

A workaround is to define a larger root font-size on <html> and recalculate the rems.
opened by gera2ld 10
input type file

Hi,

is there a plan to change 'input type file' look? It's a bit delicate problem, heck I can't make it properly, but defaults are just soooo ugly.

Thank you

opened by melkior 10
Difference between Spectre and Bootstrap?

Hi,

Considering how very much Spectre looks like Bootstrap, both from a visual perspective and also naming convention, it would be good to have some info on what the actual difference is between them.

I understand Spectre is smaller, but what else? My thinking is that Bootstrap is bigger for a reason, but why..? Do they support older browsers, or what's the reason?

opened by sandebert 9
Sidebar does not close properly in IE11

First, I just want to say great work! This framework looks pretty awesome, and will be using for a project soon.

Second, I found an issue with the sidebar menu items not closing properly in IE11 when the window is resized (for the docs page). It works fine in Chrome and MS Edge. The accordion component is a little flaky in IE11 as well with the visibility of the menu items when expanded.

Will you be releasing this as a component (Sidebar)? I could proabably extract what I need, but it would be great to have this as a standalone (perhaps with Icons).

Thanks!
bug enhancement

opened by Potentiator 8
multiline tooltips only work in opera

Multiline Tooltips don't work in Firefox, Chrome, or Safari.

I haven't confirmed that they work in Opera, but that's the only browser where they work according to this GeeksForGeeks article.

The browsers where I have tested it all appear like the attached image, with a \n showing instead of splitting the lines.

opened by jaadus 2
double ended slider

Hey, Thanks so much for building this. I wondered if you might be able to help with sliders having two inputs so you can choose the minimum and maximum?

https://picturepan2.github.io/spectre/experimentals/sliders.html

opened by amlwwalker 0
Add a configuration file for creating a Dash docset
This is a configuration file for the docs generator dashing for the macOS offline documentation browser Dash.

To build the docset, you'd run install dashing like described and run the command:

dashing build spectre

A new docset could be submitted through this, or you can just double click it to directly add it to Dash.
opened by akirk 0
Migration to other CSS framework

Hello,

It looks like this project is dead and I was wondering, how to migrate to something else like tailwindCSS. Did anyone go through this process and has some good practices?

Thank you for your help.

opened by simkepal 21
Support for fixed first column in horizontal-scrollable tables

I have added a gist (https://gist.github.com/jimbobmcgee/edd734e4bfc3eb7c90ae7ef001f8b756) for the extra CSS needed to allow a table with table-scroll to have a first column which remains on screen during the scroll. The colours are just taken from the Spectre docs page, but work for striped and hovered tables, too.

I'm not a SASS guy, so I am not about to meddle with any preprocessor, but if you want to incorporate it within your SASS rules so it better respects screen sizes, colours, etc., please feel free.

It also might be better to target a specific class, e.g. table-sticky, which is easily achievable.

opened by jimbobmcgee 0

Releases(v0.5.9)

v0.5.9(Jul 2, 2020)
Update gulp and dependencies

Update docs, fixes typos, merging PRs, and add more examples like Hero layout and custom prefix

Update column classes less verbose

Fix #619 by adding pointer-events to 3 dots

Fix the behavior of class loading together with tooltip

Only rotate the first child icon when accordion is open/close

Add a "Reviewed by Hound" badge

Source code(tar.gz)
Source code(zip)
v0.5.8(Dec 23, 2018)
IMPORTANT: Moving Icons to a new GitHub Repo

Add Auto width column #541

Add more Menu badge support #545

Improve 360-Degree Viewer

Fix gulp issue #547

Fix the errors in the Docs #538

Source code(tar.gz)
Source code(zip)
v0.5.7(Nov 25, 2018)
Add pure CSS 360-Degree Viewer

Change Carousels image number to variable #428

Fix Form textarea height issue

Source code(tar.gz)
Source code(zip)
v0.5.6(Nov 21, 2018)
Add Docs Search #509 #291

Add Copy icon

Add Hero layout #380

Add multiline Tooltips #500

Replace transition: all; #526

Fix #511 issue

Fix sidebar background height for short docs pages

Source code(tar.gz)
Source code(zip)
v0.5.5(Nov 7, 2018)
IMPORTANT: New Docs

Add Changelog to What's New section

Fix chip vertical scrollbar #521

Fix circle -> s-circle #489

Fix code font-family issue for asian languages #476

Source code(tar.gz)
Source code(zip)
v0.5.4(Nov 3, 2018)
IMPORTANT: Change naming of position utilities to avoid conflicts

Update dark color variable

Fix sidebar hash link bug #482

Fix browser support typo #469

Fix code typo #460

Fix GitHub button z-index bug #458

Fix Bar background color issue by adding !important to color utilities

Fix chip bug when content is too long #506

Fix multiple select height bug #508

Source code(tar.gz)
Source code(zip)
v0.5.3(Jun 23, 2018)
Add dark text color to utilities

Add error state to the indeterminate checkbox

Add inline forms

Add more code examples

Fix errors in the Docs

Source code(tar.gz)
Source code(zip)
v0.5.1(Feb 19, 2018)
IMPORTANT: Move Autocomplete to the Experimentals

Add form checkbox, radio and switch support to Menus

Add responsive horizontal form support #375

Add Favicons in the docs #398

Fix Off-canvas z-index problem #361

Fix icons disappearing on group classes on focus

Fix Deprecation Warning #396 #356

Initial commit of RTL support (not finished)

Source code(tar.gz)
Source code(zip)
v0.5.0(Dec 7, 2017)
IMPORTANT: Restore /dist folder

Add Grid nesting example #353

Add Form control sizes support

Update Off-canvas default behavior and new option available #347

Split Mixins

Fix Navbar last-child align right bug #346

Fix modal doc typo

Fix docs examples #348

Source code(tar.gz)
Source code(zip)
v0.4.7(Nov 26, 2017)
Add new button colors (success and error) #227 #241 #342

Add overflow-scrolling: touch; CSS for better scrolling

Add touch support to Parallax image hover effect

Update the Modal example code

Fix form horizontal layout spacing

Source code(tar.gz)
Source code(zip)
v0.4.6(Nov 20, 2017)
Add new Sliders example #328

Add Table with horizontal scroll support #333

Update Calendar event style which makes use of color utilities #326

Define $parallax-fade-color as default variable #332

Fix the Docs content mistake

Fix breadcrumb-item extra spacing #337

Fix comparison slider image responsive bug #338

Source code(tar.gz)
Source code(zip)
v0.4.5(Oct 23, 2017)
Rewrite Off-canvas component

Add active support to the Off-canvas #308

Update the Docs pages

Source code(tar.gz)
Source code(zip)
v0.4.4(Oct 10, 2017)
IMPORTANT: Increase default font sizes to 16px #271

Add version number to CSS #288 #289

Source code(tar.gz)
Source code(zip)
v0.4.3(Sep 30, 2017)
Add Icon Sizes #284

Add Large Modals #293

Update primary color to #5755d9

Change Tooltips white-space to pre #292

Encode SVG Data URI (thanks to @mariodev) #297 #298

Improve Buttons and Forms small and large variables

Improve Filters code

Improve gulpfile and package

Add Importing SASS Docs

Source code(tar.gz)
Source code(zip)
v0.4.2(Sep 21, 2017)
Add Off-screen experimental

Fix Docs rendering bug in Safari

Source code(tar.gz)
Source code(zip)
v0.4.1(Sep 11, 2017)
Add default modifier to all variables

Add address reset which changes font-style to normal

Add Details and Summary Accordions support

Fix responsive video

Update the Docs

Source code(tar.gz)
Source code(zip)
v0.4.0(Sep 1, 2017)
Switch from LESS to SASS

Add Cursor utilities

If you are looking for LESS version of Spectre.css, please switch to LESS branch.
Source code(tar.gz)
Source code(zip)
v0.3.2(Aug 28, 2017)
Add label-rounded classes

Add Avatars presence status code

Add Typography Fonts Docs

Add Button variant mixins

Update Autocomplete style

Update Autoprefixer rules

Update label mixin and code mono font family

Source code(tar.gz)
Source code(zip)
v0.3.1(Aug 19, 2017)
IMPORTANT: The default root font-size has been changed to 20px, please update your rem numbers if you're using the custom sizes. Learn more.

Fix margin and padding utilities bug

Add grid offset

Rename Display utilities class names

Move Panels and Empty states to Components from Layout

Fix Docs bugs and cleanup codes

Source code(tar.gz)
Source code(zip)
v0.2.15(Aug 15, 2017)
IMPORTANT: The default root font-size has been changed to 20px, please update your rem numbers if you're using the custom sizes. Learn more.

BIG Update to the Docs experience, completely rewritten and improved #240

Add Text and Background colors utilities #205 #219

Add Install from CDN option #191

Add unit size (4px) and unit size variables

Add Responsive container (max width container) #222

Add error and success states to checkbox, radio and switch #246

Fix Rem unit issue in East Asian Chrome #110

Fix icon direction bug #218

Fix Dropdown menu max items/height #226

Source code(tar.gz)
Source code(zip)
v0.2.14(Apr 27, 2017)
Add vertical divider

Add Form icon support

Add Accordions

Add anchor links to Docs

Add new container grid size

Fix link error and typo

Source code(tar.gz)
Source code(zip)
v0.2.13(Apr 10, 2017)
Add Timelines code

Add input readonly style

Change Gulp building process and ignore /dist

Change naming danger to error

Change label-variant mixin

Fix dropdown-toggle border radius in button groups

Fix Calendars date item width bug under Firefox

Source code(tar.gz)
Source code(zip)
v0.2.12(Apr 5, 2017)
Add pure CSS Comparison Sliders

Add pure CSS content Filters

Add Avatars badge support

Add more icons

Change :focus support

Change Docs image sizes and add object-fit support

Update Navbar code

Fix typos, Modals bugs

Source code(tar.gz)
Source code(zip)
v0.2.11(Mar 29, 2017)
Add pure CSS Popovers

Add pure CSS Icons

Add Slider bars

Add tvOS Parallax effect text layer

Update shadow mixin

Source code(tar.gz)
Source code(zip)
v0.2.10(Mar 19, 2017)
Add Shadows and Z-index variables

Add Divider text

Improve color variables

Cleanup components code

Remove the Responsive Resizer tool (Moved to https://github.com/picturepan2/responsive-resizer)

Source code(tar.gz)
Source code(zip)
v0.2.9(Mar 11, 2017)
Add Panels layout: flexible view container layout with auto-expand content section

Update Navbar layout

Update docs and examples

Source code(tar.gz)
Source code(zip)
v0.2.8(Mar 10, 2017)
Add Carousels previous and next buttons

Improve disabled state for forms

Improve calendar events style

Improve Sliders disabled style

Improve Autocomplete menu position

Merge Menus and Dropdowns

Source code(tar.gz)
Source code(zip)
v0.2.7(Mar 6, 2017)
Add Calendars experimental support

Add tabindex note to the dropdowns docs

Add shrink-to-fit=no to head meta

Add Colors docs and update colors

Fix wrong shadow colors with form-select

Fix grid-480

Source code(tar.gz)
Source code(zip)
v0.2.6(Mar 4, 2017)
Add Carousels initial experimental version

Add Spectre.css Twitter account (@spectrecss) link

Improve Docs experience and navbar

Fix the bug of form input focus colors

Source code(tar.gz)
Source code(zip)
v0.2.5(Mar 3, 2017)
Improve color variables completely

Add Menu badges

Add Responsive visibility (show-x)

Add Parallax effect (pure CSS)

Fix elements and components

Update empty state layout code

Source code(tar.gz)
Source code(zip)

Owner

Yan Zhu

Microsoft MVP · Xbox gamer · Product & UX designer · JAMstack developer · Blocks.tech partner · @reworktools maker · @spectrecss maker

GitHub https://picturepan2.github.io/spectre/

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

161k Jan 1, 2023

Modern CSS framework based on Flexbox

Bulma Bulma is a modern CSS framework based on Flexbox. Quick install Bulma is constantly in development! Try it out now: NPM npm install bulma or Yar

46.6k Dec 31, 2022

A classless CSS framework to write modern websites using only HTML.

new.css new.css A classless CSS framework to write modern websites using only HTML. It weighs 4.8kb. All it does is set some sensible defaults and sty

3.6k Jan 3, 2023

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.

Install | Documentation | Releases | Contributing Foundation is the most advanced responsive front-end framework in the world. Quickly go from prototy

29.4k Jan 4, 2023

Lightweight CSS framework

Material Design CSS Framework MUI is a lightweight CSS framework that follows Google's Material Design guidelines. Use From the CDN: <link href="//cdn

4.5k Jan 1, 2023

Modern framework to print the web correctly.

Modern framework to print web pages correctly How to use Simply include the right stylesheet(s) in your html and load it only for a printer. Gutenberg

4.6k Dec 29, 2022

A set of small, responsive CSS modules that you can use in every web project.

Pure A set of small, responsive CSS modules that you can use in every web project. http://purecss.io/ This project is looking for maintainers to suppo

22.7k Jan 3, 2023

A lightweight and modular front-end framework for developing fast and powerful web interfaces

UIkit UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. Homepage - Learn more about UIkit @getui

17.7k Jan 8, 2023

A modern alternative to CSS resets

normalize.css A modern alternative to CSS resets NPM npm install --save normalize.css CDN See https://yarnpkg.com/en/package/normalize.css Download Se

49.4k Jan 5, 2023

A tiny modern CSS reset

minireset.css A tiny modern CSS reset that covers the basics: resets the font sizes: so that using semantic markup doesn't affect the styling resets t

2.6k Dec 29, 2022

A bare-bones CSS reset for modern web development.

A modern CSS reset A tiny little reset that you can use as the basis of your CSS projects. You can read a breakdown of it here. Installation NPM: npm

2.7k Jan 1, 2023

🚿 A modern CSS reset

Modern CSS reset Installation npm install --save ress or bower install --save ress Features Apply box-sizing: border-box; in all elements. Reset paddi

1.9k Jan 4, 2023

A modern alternative to CSS resets

49.4k Jan 1, 2023

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

5.3k Jan 1, 2023

Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

96 Dec 10, 2022

A responsive HTML template for coding projects with a clean, user friendly design. Crafted with the latest web technologies, the template is suitable for landing pages and documentations.

Scribbler - a responsive HTML template for coding projects and documentations Scribbler is a responsive HTML/CSS/Javascript template designed for deve

394 Jan 1, 2023

Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Related tags

Overview

Spectre.css

Getting started

Install manually

Install from CDN

Install with NPM

Install with Yarn

Install with Bower

Compiling custom version

Documentation and examples

Elements

Layout

Components

Utilities

Experimentals

Browser support

Comments

Releases(v0.5.9)

v0.5.9(Jul 2, 2020)

v0.5.8(Dec 23, 2018)

v0.5.7(Nov 25, 2018)

v0.5.6(Nov 21, 2018)

v0.5.5(Nov 7, 2018)

v0.5.4(Nov 3, 2018)

v0.5.3(Jun 23, 2018)

v0.5.1(Feb 19, 2018)

v0.5.0(Dec 7, 2017)

v0.4.7(Nov 26, 2017)

v0.4.6(Nov 20, 2017)

v0.4.5(Oct 23, 2017)

v0.4.4(Oct 10, 2017)

v0.4.3(Sep 30, 2017)

v0.4.2(Sep 21, 2017)

v0.4.1(Sep 11, 2017)

v0.4.0(Sep 1, 2017)

v0.3.2(Aug 28, 2017)

v0.3.1(Aug 19, 2017)

v0.2.15(Aug 15, 2017)

v0.2.14(Apr 27, 2017)

v0.2.13(Apr 10, 2017)

v0.2.12(Apr 5, 2017)

v0.2.11(Mar 29, 2017)

v0.2.10(Mar 19, 2017)

v0.2.9(Mar 11, 2017)

v0.2.8(Mar 10, 2017)

v0.2.7(Mar 6, 2017)

v0.2.6(Mar 4, 2017)

v0.2.5(Mar 3, 2017)

Owner

Yan Zhu

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Modern CSS framework based on Flexbox

A classless CSS framework to write modern websites using only HTML.

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.

Lightweight CSS framework

Modern framework to print the web correctly.

A set of small, responsive CSS modules that you can use in every web project.

A lightweight and modular front-end framework for developing fast and powerful web interfaces

A modern alternative to CSS resets

A tiny modern CSS reset

A bare-bones CSS reset for modern web development.

🚿 A modern CSS reset

A modern alternative to CSS resets

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Tiny CSS framework with almost no classes and some pure CSS effects

A responsive HTML template for coding projects with a clean, user friendly design. Crafted with the latest web technologies, the template is suitable for landing pages and documentations.

Skeleton: A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development

A responsive, Bootstrap landing page template created by Start Bootstrap

Free responsive one page portfolio template