All Projects → nusu → spectre.scss

nusu / spectre.scss

Licence: other
port of spectre.css to sass

Programming Languages

CSS
56736 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to spectre.scss

Dragact
a dragger layout system with React style .
Stars: ✭ 710 (+4337.5%)
Mutual labels:  grid-system
Griddd
A dead simple, customisable, flexbox-based griddd
Stars: ✭ 108 (+575%)
Mutual labels:  grid-system
css-grid-playground
A simple interface for experimenting with CSS Grid Layout.
Stars: ✭ 84 (+425%)
Mutual labels:  grid-system
React Flex Ready
A Flexbox grid ready, easy to implement and customize
Stars: ✭ 23 (+43.75%)
Mutual labels:  grid-system
React Rasta
React Rasta is a powerful and flexible grid system for React
Stars: ✭ 88 (+450%)
Mutual labels:  grid-system
Vue Comment Grid
💬 Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-comment-grid
Stars: ✭ 143 (+793.75%)
Mutual labels:  grid-system
Cssgridgenerator
🧮 Generate basic CSS Grid code to make dynamic layouts!
Stars: ✭ 3,943 (+24543.75%)
Mutual labels:  grid-system
60gs
60GS - 60 Columns Grid System based on CSS Grid Layout
Stars: ✭ 65 (+306.25%)
Mutual labels:  grid-system
Griz
Grid library for React; Rescue the cat
Stars: ✭ 99 (+518.75%)
Mutual labels:  grid-system
Ragrid
Intrinsic first auto-layout flexbox grid
Stars: ✭ 249 (+1456.25%)
Mutual labels:  grid-system
Vue Js Grid
🍱 Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering
Stars: ✭ 866 (+5312.5%)
Mutual labels:  grid-system
Awesome Design Language System
list of awesome resources about digital design system.
Stars: ✭ 69 (+331.25%)
Mutual labels:  grid-system
React Awesome Styled Grid
A responsive 8-point grid system layout for React using styled-components
Stars: ✭ 157 (+881.25%)
Mutual labels:  grid-system
Gaintime
GainTime é um framework de HTML, CSS e JS para desenvolvimento de projetos responsivos, focado na simplicidade.
Stars: ✭ 19 (+18.75%)
Mutual labels:  grid-system
nova-gridder
Customize Nova Resource Details using Tailwind Grid System and more
Stars: ✭ 18 (+12.5%)
Mutual labels:  grid-system
Tabulator
Interactive Tables and Data Grids for JavaScript
Stars: ✭ 4,329 (+26956.25%)
Mutual labels:  grid-system
Bootstrap4 Website
Website built with bootstrap 4 Framework
Stars: ✭ 124 (+675%)
Mutual labels:  grid-system
grid-garden
Solutions to CSS Grid Garden
Stars: ✭ 79 (+393.75%)
Mutual labels:  grid-system
flexboxes
CSS flexbox framework with pure flexbox grid ability
Stars: ✭ 27 (+68.75%)
Mutual labels:  grid-system
Bedrock
Foundational Layout Primitives for your React App
Stars: ✭ 173 (+981.25%)
Mutual labels:  grid-system

Sass Version of Spectre.css

Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre.css

This sass version converts less to sass for better integration with your sass project and allows you to use sass mixins and @extends to create, for example, additional buttons, labels etc.

Install

Spectre.scss can be installed from:

npm

npm install spectre.scss

bower

bower install spectre.scss

or manually you can clone this repository

Where is normal css files?

In order to get processed css files first you need to run

npm install
gulp

gulp will process the scss files to dist/ folder

Usage

Simply add your main sass file this

@import "spectre";
@import "spectre-icons";
@import "spectre-exp";

Scope

This is a minimual less->sass conversion.

Syntax for variables and mixins has been converted, but the syntax remains css-like and does not adopt sass' minimal syntax. This has been done to reduce the effort when the less project updates.

Documentation

For framework documentation, see original Spectre.css project.

Credit

Full credit for this brilliant and useful framework goes to Yan Zhu.

Contributions

Feel free to submit a pull request. Help is always appreciated. Please ensure your gulp builds work before requesting.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].