Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

README.md

Tag Downloads Downloads License

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 or spacegrid.css file and link it to your project:

<html>
	<head>
		<!-- for the @media queries to function -->
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- include the space-grid css -->
		<link rel="stylesheet" href="path_to/space-grid/css/spacegrid.min.css">
	</head>
	...
</html>

Quick Installation

Install with NPM

See documentation

$ npm install spacegrid

Add this to the head of your pages:

<script src="path_to/node_modules/spacegrid/build/bundle.js"></script>

Install with Bower

See documentation

$ bower install spacegrid

Add this to the head of your pages:

<link href="path_to/bower_components/spacegrid/spacegrid.css" rel="stylesheet" type="text/css">

Install using Ruby Gem

See documentation

Add this line to your application's Gemfile:

gem 'spacegrid'

And then execute:

$ bundle

Or install it yourself as:

$ gem install spacegrid

Add this to your application.css file:

*= require spacegrid

Examples

<!-- full width example -->
<div class="row">
	<div class="space-1">This is 100% width</div>
</div>

<!-- three columns -->
<div class="row">
    <div class="space-3">This is 33.3% width</div>
    <div class="space-3">This is 33.3% width</div>
    <div class="space-3">This is 33.3% width</div>
</div>

<!-- two columns -->
<div class="row">
    <div class="space-2">This is 50% width</div>
    <div class="space-2">This is 50% width</div>
</div>

<!-- four columns -->
<div class="row">
    <div class="space-4">This is 25% width</div>
    <div class="space-4">This is 25% width</div>
    <div class="space-4">This is 25% width</div>
    <div class="space-4">This is 25% width</div>
</div>

See it in use here.


With Added Flexibility

Here are a few add-ons:

  • 25% width
  • 40% width
  • 60% width
  • 66% width
  • 75% width
<!-- these works too :D -->

<div class="row">
    <div class="space-3">This is 33.3% width</div>
    <div class="space-66">This is 66.6% width</div>
</div>

<div class="row">
    <div class="space-75">This is 75% width</div>
    <div class="space-25">This is 25% width</div>
</div>

<div class="row">
    <div class="space-40">This is 40% width</div>
    <div class="space-60">This is 60% width</div>
</div>

Compatibility

CSS3 media queries are utilitized, which are well-supported amongst most modern browsers. Here's a compatibility chart.


Contributing to Spacegrid

About

A no-frills responsive grid layout to help you get started on your next project.

Topics

Resources

License

Packages

No packages published

Languages

You can’t perform that action at this time.