Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JonathanSpeek/spacegrid
A no-frills responsive grid layout to help you get started on your next project.
https://github.com/JonathanSpeek/spacegrid
css grid-layout
Last synced: 3 months ago
JSON representation
A no-frills responsive grid layout to help you get started on your next project.
- Host: GitHub
- URL: https://github.com/JonathanSpeek/spacegrid
- Owner: JonathanSpeek
- License: mit
- Created: 2016-09-10T16:30:46.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-02-17T20:56:11.000Z (over 4 years ago)
- Last Synced: 2024-07-18T03:44:56.300Z (4 months ago)
- Topics: css, grid-layout
- Language: CSS
- Homepage: https://jonathanspeek.github.io/spacegrid/
- Size: 197 KB
- Stars: 205
- Watchers: 13
- Forks: 21
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
Awesome Lists containing this project
README
A basic, responsive grid layout to help you get started on your next project (in about 1kb 🔥).
---
### Setup your project
Download either the [spacegrid.min.css](https://raw.githubusercontent.com/JonathanSpeek/spacegrid/master/spacegrid.min.css) or [spacegrid.css](https://raw.githubusercontent.com/JonathanSpeek/spacegrid/master/spacegrid.css) file and link it to your project:
```html
...
```
## Quick Installation
### Install with NPM
See [documentation](https://www.npmjs.com/search?q=spacegrid)
$ npm install spacegrid
Add this to the head of your pages:
```html
```
### Install with Bower
See [documentation](https://github.com/JonathanSpeek/spacegrid_bower.git)
$ bower install spacegrid
Add this to the head of your pages:
```html
```
### Install using Ruby Gem
See [documentation](https://rubygems.org/gems/spacegrid)
Add this line to your application's Gemfile:
```ruby
gem 'spacegrid'
```
And then execute:
$ bundle
Or install it yourself as:
$ gem install spacegrid
Add this to your application.css file:
```css
*= require spacegrid
```
### Examples
```html
This is 100% width
This is 33.3% width
This is 33.3% width
This is 33.3% width
This is 50% width
This is 50% width
This is 25% width
This is 25% width
This is 25% width
This is 25% width
```
See it in use [here](http://speek.design).
---
### With Added Flexibility
#### Here are a few add-ons:
* 25% width
* 40% width
* 60% width
* 66% width
* 75% width
```
This is 33.3% width
This is 66.6% width
This is 75% width
This is 25% width
This is 40% width
This is 60% width
```
---
### Compatibility
#### CSS3 media queries are utilitized, which are well-supported amongst most modern browsers. Here's a compatibility [chart](http://caniuse.com/#search=CSS3%20Media%20Queries).
---
## Contributing to Spacegrid
- Spacegrid CSS is currently maintained by [@JonathanSpeek](http://github.com/jonathanspeek)
- Checkout the [Contribution Guide](https://github.com/JonathanSpeek/spacegrid/blob/master/CONTRIBUTING.md) if you'd like to lend a hand.