flexbox_sass_rails 0.1.3 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +124 -5
  3. data/flexbox_sass_rails-0.1.3.gem +0 -0
  4. data/flexbox_sass_rails.gemspec +2 -0
  5. data/lib/flexbox_sass_rails/version.rb +1 -1
  6. metadata +16 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 839aafd9735f0c1403728f8f4a3f0516689e6ad4
4
- data.tar.gz: 3c3b7d75ae8a20630b94e994bd988127ae25f855
3
+ metadata.gz: 574bd951472499ce657fcddb3f65b39680169e28
4
+ data.tar.gz: 216b9e8a02d6395bed913dea5a5f57faf9e57cdb
5
5
  SHA512:
6
- metadata.gz: bf9d5cd07cee612504e7fb031a9a6d278ce35f2ede338c8dc02906fa34214ceaaff8df0234e911e93d9dc0989ac5098029a333ebd3e44408fa5bbc6c3e95ed9d
7
- data.tar.gz: 1ef777f6892982a8b8dea1bc27002ea944011b8c5cee5568ec25cdd809abb06b974fc20198067c94270fd5db959dece31350ab26236baef5fe0f6ac03dabfbf6
6
+ metadata.gz: cc31a941248ce98456a69e30231549f28bf2044cfc70115746e163b6fbbf23ee7b92897305534e0c19bd5f25b095fc5d0aa52f21e2e3e9e54d43b8be82808345
7
+ data.tar.gz: 50c4977929b5629008b8b4677491a2ff125cc944d7eb07b81152c5b2c2465d180f0adc452f049b77342f302a1ef47c0a550c124677ab2696d67d3efadbf5e934
data/README.md CHANGED
@@ -1,8 +1,8 @@
1
- # FlexboxSassRails
1
+ # flexbox_sass_rails
2
2
 
3
- Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/flexbox_sass_rails`. To experiment with that code, run `bin/console` for an interactive prompt.
3
+ This ruby gem gives you a set of classes you can use to create a responsive flexbox grid in your rails application. It is very similar to [angular material](https://material.angularjs.org) flexbox classes. It's written in sass, you can specify breakpoints for different media query ranges.
4
4
 
5
- TODO: Delete this and the text above, and describe your gem
5
+ Note that this project is still a work in progress. The released version contains only features that should work perfectly. There is just a basic set of flexbox classes, but more will be added soon.
6
6
 
7
7
  ## Installation
8
8
 
@@ -22,7 +22,126 @@ Or install it yourself as:
22
22
 
23
23
  ## Usage
24
24
 
25
- TODO: Write usage instructions here
25
+ ### Including flexbox stylesheet in a project:
26
+
27
+ To use the stylesheet as it is, require flexbox_sass_rails in `application.css`. Simply add this line:
28
+
29
+ ``` css
30
+ /*
31
+ *= require flexbox_sass_rails
32
+ */
33
+ ```
34
+
35
+ To modify viewport width breakpoints, instead of requiring it in `application.css`, import flexbox_sass_rails in a scss file in your stylesheets and set width variables:
36
+
37
+ ``` scss
38
+ $fb-layout-sm: 768px;
39
+ $fb-layout-md: 1024px;
40
+
41
+ @import 'flexbox_sass_rails';
42
+ ```
43
+
44
+ ### Viewport width breakpoints:
45
+
46
+ These are the preset breakpoints:
47
+
48
+ ``` scss
49
+ $fb-layout-sm: 600px;
50
+ $fb-layout-md: 960px;
51
+ $fb-layout-lg: 1280px;
52
+ $fb-layout-xl: 1920px;
53
+ ```
54
+
55
+ Breakpoints define the lowest widths of each media query range. There are five of them:
56
+
57
+ ```
58
+ Extra small [xs]: 0px - 599px
59
+ Small [sm]: 600px - 959px
60
+ Medium [md]: 960px - 1279px
61
+ Large [lg]: 1280px - 1919px
62
+ Extra large [xl]: 1920px and more
63
+ ```
64
+
65
+ Usage of breakpoints is very simple to make your project responsive. Each class containing the media query range abbreviation will only add the styles to the element if the viewport width is within the media query range.
66
+
67
+ **Exception!** There is one class excluded from the responsive classes, `fb-layout-fill` can only be set regardless of the viewport's width.
68
+
69
+ ### Class names:
70
+
71
+ Class names allways begin with a `fb-` prefix to avoid conflicts with other class names in your project.
72
+
73
+ Class names consist of:
74
+
75
+ ```
76
+ (optional)
77
+ [prefix]-[name]-[media-query-range]-[value]
78
+
79
+ // fb-flex-xs-20
80
+ [fb]-[flex]-[xs]-[20]
81
+
82
+ // fb-layout-sm-row:
83
+ [fb]-[layout]-[sm]-[row]
84
+
85
+ // fb-layout-align-md-center-center:
86
+ [fb]-[layout-align]-[md]-[center-center]
87
+ ```
88
+
89
+ **Exception!** There is one class that doesn't have a value part, `fb-flex` (or `fb-flex-sm` etc)
90
+
91
+ ### Set of style classes:
92
+
93
+ Description will be added soon
94
+
95
+ ```
96
+ fb-layout-fill
97
+
98
+ fb-layout-row (fb-layout-md-row)
99
+ fb-layout-column (fb-layout-md-column)
100
+
101
+ fb-layout-wrap (fb-layout-md-wrap)
102
+
103
+ fb-layout-align-start-stretch (fb-layout-align-md-start-stretch)
104
+ fb-layout-align-start-start
105
+ fb-layout-align-start-center
106
+ fb-layout-align-start-end
107
+
108
+ fb-layout-align-center-stretch
109
+ fb-layout-align-center-start
110
+ fb-layout-align-center-center
111
+ fb-layout-align-center-end
112
+
113
+ fb-layout-align-end-stretch
114
+ fb-layout-align-end-start
115
+ fb-layout-align-end-center
116
+ fb-layout-align-end-end
117
+
118
+ fb-layout-align-space-around-stretch
119
+ fb-layout-align-space-around-start
120
+ fb-layout-align-space-around-center
121
+ fb-layout-align-space-around-end
122
+
123
+ fb-layout-align-space-between-stretch
124
+ fb-layout-align-space-between-start
125
+ fb-layout-align-space-between-center
126
+ fb-layout-align-space-between-end
127
+
128
+ fb-flex (fb-flex-md)
129
+
130
+ fb-flex-5 (fb-flex-md-5)
131
+ fb-flex-10
132
+ ...
133
+ fb-flex-95
134
+ fb-flex-100
135
+
136
+ fb-flex-33
137
+ fb-flex-66
138
+
139
+ fb-flex-order--20
140
+ fb-flex-order--19
141
+ ...
142
+ fb-flex-order-19
143
+ fb-flex-order-20
144
+ ```
26
145
 
27
146
  ## Development
28
147
 
@@ -32,7 +151,7 @@ To install this gem onto your local machine, run `bundle exec rake install`. To
32
151
 
33
152
  ## Contributing
34
153
 
35
- Bug reports and pull requests are welcome on GitHub at https://github.com/Pavel Cerny/flexbox_sass_rails.
154
+ Bug reports and pull requests are welcome on GitHub at https://github.com/pavelccz/flexbox_sass_rails.
36
155
 
37
156
 
38
157
  ## License
data/flexbox_sass_rails-0.1.3.gem ADDED
Binary file
data/flexbox_sass_rails.gemspec CHANGED
@@ -23,4 +23,6 @@ Gem::Specification.new do |spec|
23
23
 
24
24
  spec.add_development_dependency "bundler", "~> 1.14"
25
25
  spec.add_development_dependency "rake", "~> 10.0"
26
+
27
+ spec.add_dependency 'sass-rails'
26
28
  end
data/lib/flexbox_sass_rails/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module FlexboxSassRails
2
- VERSION = "0.1.3"
2
+ VERSION = "0.2.0"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: flexbox_sass_rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.3
4
+ version: 0.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Pavel Cerny
@@ -38,6 +38,20 @@ dependencies:
38
38
  - - "~>"
39
39
  - !ruby/object:Gem::Version
40
40
  version: '10.0'
41
+ - !ruby/object:Gem::Dependency
42
+ name: sass-rails
43
+ requirement: !ruby/object:Gem::Requirement
44
+ requirements:
45
+ - - ">="
46
+ - !ruby/object:Gem::Version
47
+ version: '0'
48
+ type: :runtime
49
+ prerelease: false
50
+ version_requirements: !ruby/object:Gem::Requirement
51
+ requirements:
52
+ - - ">="
53
+ - !ruby/object:Gem::Version
54
+ version: '0'
41
55
  description: Flexbox style classes
42
56
  email:
43
57
  - pavelc@gmail.com
@@ -54,6 +68,7 @@ files:
54
68
  - bin/setup
55
69
  - flexbox_sass_rails-0.1.1.gem
56
70
  - flexbox_sass_rails-0.1.2.gem
71
+ - flexbox_sass_rails-0.1.3.gem
57
72
  - flexbox_sass_rails.gemspec
58
73
  - lib/flexbox_sass_rails.rb
59
74
  - lib/flexbox_sass_rails/version.rb