grids_lite 0.1.0 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +61 -19
- data/app/assets/stylesheets/grids_lite/base.css +3 -3
- data/lib/grids_lite/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2ad28decfbe2f2549bc2aeae15a3e3dc40bb89ef
|
|
4
|
+
data.tar.gz: b04cca7c15981bfaf43e4f31cf2116651a358e77
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8e83ac444514efcc25da1c59f23bac3c459c4b61384020c82ded2782e54939a990888a515fc7bba34a21fb132d9d7b9766a7997d9c8194d2567f22dd136995e6
|
|
7
|
+
data.tar.gz: 41bab0d8a2cb3541f4b364d827b3f1ff2410416268b33c804476067d261a00fd408cefe91831b60aa84eb291e9a00bc9038c683419f36fc2083c5b2ed14ccce9
|
data/README.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
# GridsLite
|
|
2
2
|
|
|
3
|
-
A responsive grid system doesn't have to be complicated or full of unused styles. GridsLite
|
|
3
|
+
A responsive grid system doesn't have to be complicated or full of unused styles. GridsLite is a lightweight and simple solution to responsive grids where you include the columns that you need and leave out the ones you don't. Also supports gutters for columns.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
Add this line to your application's Gemfile:
|
|
8
8
|
|
|
9
9
|
```ruby
|
|
10
|
-
gem 'grids_lite'
|
|
10
|
+
gem 'grids_lite', '~> 1.0.0'
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
And then execute:
|
|
@@ -38,32 +38,74 @@ Pick and choose which column stylesheets to include in your asset pipeline. **ba
|
|
|
38
38
|
|
|
39
39
|
## Usage
|
|
40
40
|
|
|
41
|
-
|
|
42
|
-
```
|
|
43
|
-
.col-1-1.col-1-2-med.col-2-8-lrg
|
|
44
|
-
%div{style: "font-size: 20px"}
|
|
45
|
-
= "100% wide at mobile width, 50% wide at tablet width, 25% wide at desktop width and above"
|
|
41
|
+
Wrap your ```col-``` classes in a ```columns``` class. If you are using text inside your ```col-``` classes you will also need to set a font-size for the text somewhere inside for the text to appear.
|
|
46
42
|
|
|
47
|
-
|
|
48
|
-
%div{style: "font-size: 20px"}
|
|
49
|
-
= "100% wide at mobile width, 50% wide at tablet width, 75% wide at desktop width and above"
|
|
43
|
+
Example 1
|
|
50
44
|
```
|
|
51
|
-
|
|
52
|
-
|
|
45
|
+
<div class="columns">
|
|
46
|
+
<div class="col-1-1 col-1-2-med col-2-8-lrg">
|
|
47
|
+
<div style="font-size: 20px">
|
|
48
|
+
100% wide at mobile width, 50% wide at tablet width, 25% wide at desktop width and above
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<div class="col-1-1 col-1-2-med col-6-8-lrg">
|
|
53
|
+
<div style="font-size: 20px">
|
|
54
|
+
100% wide at mobile width, 50% wide at tablet width, 75% wide at desktop width and above
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
````
|
|
59
|
+
|
|
60
|
+
Example 2
|
|
61
|
+
```
|
|
62
|
+
<div class="columns">
|
|
63
|
+
<div class="col-1-1 col-1-5-med">
|
|
64
|
+
<div style="font-size: 20px">
|
|
65
|
+
100% wide at mobile width, 20% wide at tablet width and above
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<div class="col-1-1 col-4-5-med">
|
|
70
|
+
<div style="font-size: 20px">
|
|
71
|
+
100% wide at mobile width, 80% wide at tablet width and above
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
53
75
|
```
|
|
54
|
-
.col-1-1.col-1-5-med
|
|
55
|
-
%div{style: "font-size: 20px"}
|
|
56
|
-
= "100% wide at mobile width, 20% wide at tablet width and above"
|
|
57
76
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
77
|
+
Example using gutters
|
|
78
|
+
```
|
|
79
|
+
<div class="columns gutters">
|
|
80
|
+
<div class="col-1-1">
|
|
81
|
+
<div style="font-size: 20px">
|
|
82
|
+
100% wide at mobile width and above
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<div class="col-1-1">
|
|
87
|
+
<div style="font-size: 20px">
|
|
88
|
+
100% wide at mobile width and above
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
61
92
|
```
|
|
62
93
|
|
|
63
94
|
## Gotchas
|
|
64
95
|
|
|
65
|
-
GridsLite uses ```display: inline-block``` to arrange the columns. To account for the default horizontal space between inline-block elements, GridsLite sets ```font-size: 0```
|
|
96
|
+
GridsLite uses ```display: inline-block``` to arrange the columns. To account for the default horizontal space between inline-block elements, GridsLite sets ```font-size: 0``` using the ```columns``` class. This means that **you MUST declare font-sizes for your text elements** with classes, id's, inline or however you wish.
|
|
97
|
+
|
|
98
|
+
When using ```gutters```, be aware that your div has side margin applied to it and the ```col-``` elements have side padding applied to them. It would be advisable when using ```gutters``` to not use any side margin or side padding directly on those divs and instead use it above or below them in the dom hierarchy so no conflicts occur.
|
|
99
|
+
|
|
66
100
|
|
|
101
|
+
## Future releases
|
|
102
|
+
To include: Customizing media query breakpoints and gutter distances.
|
|
103
|
+
<br>
|
|
104
|
+
**Current settings**
|
|
105
|
+
- tablet width starting at 768px
|
|
106
|
+
- desktop width starting at 1024px
|
|
107
|
+
- gutters distances set to 20px
|
|
108
|
+
- multiple nesting layers for gutters without extra padding
|
|
67
109
|
|
|
68
110
|
## Contributing
|
|
69
111
|
|
data/lib/grids_lite/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: grids_lite
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version:
|
|
4
|
+
version: 1.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Miles Stanfield
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2016-01-
|
|
11
|
+
date: 2016-01-10 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|