What is this?
Spectre.css is a lightweight, responsive and modern CSS framework for building web UIs with a flexbox-based grid, prebuilt elements, components and utility classes.
Spectre.css is a lightweight, responsive and modern CSS framework for building web UIs with a flexbox-based grid, prebuilt elements, components and utility classes.Is this a full JS framework or just CSS?It is pure CSS (compiled from Sass/Scss) with no JavaScript included; you just link the stylesheet and use its classes.
It is pure CSS (compiled from Sass/Scss) with no JavaScript included; you just link the stylesheet and use its classes.How do I add it to a project?Download the compiled spectre.css and link it in your HTML head, or install it via NPM, Yarn or Bower.
Download the compiled spectre.css and link it in your HTML head, or install it via NPM, Yarn or Bower.Do I need a build tool to use it?No, you can just include the precompiled CSS file or load it from a CDN like unpkg or cdnjs; a Sass compiler is only needed if you want a custom build.
No, you can just include the precompiled CSS file or load it from a CDN like unpkg or cdnjs; a Sass compiler is only needed if you want a custom build.Does it work in older browsers like Internet Explorer?It targets modern browsers (latest Chrome, Edge, Firefox ESR, Safari, Opera) and only supports IE10+ with some HTML5/CSS3 features not fully working.
It targets modern browsers (latest Chrome, Edge, Firefox ESR, Safari, Opera) and only supports IE10+ with some HTML5/CSS3 features not fully working.Is this free to use, including commercially?Yes, it's completely free under the MIT license, though the author accepts optional donations via Paypal or Patreon.
Yes, it's completely free under the MIT license, though the author accepts optional donations via Paypal or Patreon.How small is the CSS file?It's about 10KB gzipped, which is the main selling point of its 'lightweight' design.
It's about 10KB gzipped, which is the main selling point of its 'lightweight' design.What components come built in?It ships elements like typography, buttons and forms, layout pieces like the flexbox grid and navbar, and components such as cards, modals, tabs, tooltips and pagination.
It ships elements like typography, buttons and forms, layout pieces like the flexbox grid and navbar, and components such as cards, modals, tabs, tooltips and pagination.Are there experimental features?Yes, an 'Experimentals' section includes things like a 360-degree viewer, carousels, parallax effects, sliders and timelines, some implemented purely in CSS.
Yes, an 'Experimentals' section includes things like a 360-degree viewer, carousels, parallax effects, sliders and timelines, some implemented purely in CSS.Why was Spectre created?It started as a side project distilling years of CSS work from a large web service project into a reusable framework.
It started as a side project distilling years of CSS work from a large web service project into a reusable framework.What are similar projects?flag-icons, materialize, responsive-html-email-template, tachyons, material-design-lite, uikit, bulma, milligram
flag-icons, materialize, responsive-html-email-template, tachyons, material-design-lite, uikit, bulma, milligramWhich topics is it in?modern, utility-library, responsive-web-design, flexbox, static, utilities, css-framework, html5, ui-design, responsive, lightweight, accessibility
modern, utility-library, responsive-web-design, flexbox, static, utilities, css-framework, html5, ui-design, responsive, lightweight, accessibility