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
- Accordions
- Avatars
- Badges
- Breadcrumbs
- Bars
- Cards
- Chips
- Empty states
- Menu
- Nav
- Modals
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips
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
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?
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
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.unset
ting it shows the whole image, but the sliding motion stretches the image as we slide.@picturepan2 Is there a more elegant solution?
iphone 滑动很卡,怎么办?
/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.
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,
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 :)
`.grid-960 {width: 98rem}` not work for Chrome
Since the root font-size is defined on
<html>
:And
.grid-960
is defined with a width of98rem
. So the expected width should be:However this does not work because Chrome has a smallest
font-size
limit of12px
. So the width is actually calculated like this:And the layout breaks.
A workaround is to define a larger root
font-size
on<html>
and recalculate therem
s.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
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?
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!
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.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
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:
A new docset could be submitted through this, or you can just double click it to directly add it to Dash.
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.
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.