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

  • By Yan Zhu
  • Last update: Jan 8, 2023
  • Comments: 16

Spectre.css

Reviewed by Hound

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

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.

Github

https://github.com/picturepan2/spectre

Comments(16)

  • 1

    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?

  • 2

    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

  • 3

    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?

  • 4

    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>
  • 5

    /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.

  • 6

    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,

  • 7

    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 :)

  • 8

    `.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.

  • 9

    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

  • 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?

  • 11

    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!

  • 12

    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.

    Screen Shot 2022-11-09 at 6 00 35 PM
  • 13

    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

  • 14

    Add a configuration file for creating a Dash docset

  • 15

    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.

  • 16

    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.

Popular Tag

Related