concisecss 0.0.1

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 (47) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +19 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE +26 -0
  5. data/README.md +44 -0
  6. data/Rakefile +8 -0
  7. data/app/assets/javascripts/concisecss/close.js +6 -0
  8. data/app/assets/javascripts/concisecss/dropdown.js +33 -0
  9. data/app/assets/javascripts/concisecss/naver.js +358 -0
  10. data/app/assets/javascripts/concisecss/navigation.js +23 -0
  11. data/app/assets/javascripts/concisecss/non-responsive.js +51 -0
  12. data/app/assets/javascripts/concisecss.js +1 -0
  13. data/app/assets/stylesheets/_defaults.scss +190 -0
  14. data/app/assets/stylesheets/base/_blockquotes.scss +36 -0
  15. data/app/assets/stylesheets/base/_container.scss +14 -0
  16. data/app/assets/stylesheets/base/_forms.scss +125 -0
  17. data/app/assets/stylesheets/base/_grid.scss +67 -0
  18. data/app/assets/stylesheets/base/_headings.scss +155 -0
  19. data/app/assets/stylesheets/base/_lists.scss +125 -0
  20. data/app/assets/stylesheets/base/_main.scss +29 -0
  21. data/app/assets/stylesheets/base/_selection.scss +21 -0
  22. data/app/assets/stylesheets/base/_tables.scss +83 -0
  23. data/app/assets/stylesheets/base/_type.scss +64 -0
  24. data/app/assets/stylesheets/concise.scss +104 -0
  25. data/app/assets/stylesheets/generic/_clearfix.scss +12 -0
  26. data/app/assets/stylesheets/generic/_conditional.scss +122 -0
  27. data/app/assets/stylesheets/generic/_debug.scss +98 -0
  28. data/app/assets/stylesheets/generic/_helper.scss +117 -0
  29. data/app/assets/stylesheets/generic/_mixins.scss +122 -0
  30. data/app/assets/stylesheets/generic/_normalize.scss +191 -0
  31. data/app/assets/stylesheets/generic/_print.scss +109 -0
  32. data/app/assets/stylesheets/generic/_shared.scss +37 -0
  33. data/app/assets/stylesheets/objects/_badges.scss +53 -0
  34. data/app/assets/stylesheets/objects/_breadcrumbs.scss +35 -0
  35. data/app/assets/stylesheets/objects/_buttons.scss +287 -0
  36. data/app/assets/stylesheets/objects/_colors.scss +45 -0
  37. data/app/assets/stylesheets/objects/_dropdowns.scss +167 -0
  38. data/app/assets/stylesheets/objects/_groups.scss +102 -0
  39. data/app/assets/stylesheets/objects/_navigation.scss +377 -0
  40. data/app/assets/stylesheets/objects/_progress.scss +102 -0
  41. data/app/assets/stylesheets/objects/_wells.scss +103 -0
  42. data/concisecss.gemspec +25 -0
  43. data/lib/concisecss/concisecss_source.rb +63 -0
  44. data/lib/concisecss/engine.rb +6 -0
  45. data/lib/concisecss/version.rb +3 -0
  46. data/lib/concisecss.rb +7 -0
  47. metadata +155 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: f3ff922d862706d47acd779aaf1d34d3e6e10b57
4
+ data.tar.gz: a69c57db9c454cf03faf20bc1f083f7988936d9f
5
+ SHA512:
6
+ metadata.gz: d1297912706365603397282b7f93c1c99e0dc03c03e6dc7ca06aca1d3921ee151671a07add33a1242c88ba8098c6ef3cb4edb6ab8511e2c992745aa88d7440fa
7
+ data.tar.gz: 1e8e426046137d066ddc49ed927aa7be2467ab70ffc3d4c9700e166e528f41ceb24be2c8dd68098900e0e32ceff2036660825b90bc24107f77153d9a1f40296d
data/.gitignore ADDED
@@ -0,0 +1,19 @@
1
+ .idea/*
2
+ *.gem
3
+ *.rbc
4
+ .bundle
5
+ .config
6
+ .yardoc
7
+ Gemfile.lock
8
+ InstalledFiles
9
+ _yardoc
10
+ coverage
11
+ doc/
12
+ lib/bundler/man
13
+ pkg
14
+ rdoc
15
+ spec/reports
16
+ test/tmp
17
+ test/version_tmp
18
+ tmp
19
+ pkg/*
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in concisecss.gemspec
4
+ gemspec
data/LICENSE ADDED
@@ -0,0 +1,26 @@
1
+ The MIT License (MIT)
2
+ [OSI Approved License]
3
+ The MIT License (MIT)
4
+
5
+ Copyright (c) 2014 (concisecss) Keenan Payne
6
+
7
+
8
+ http://concisecss.com/credits.php
9
+
10
+ Permission is hereby granted, free of charge, to any person obtaining a copy
11
+ of this software and associated documentation files (the "Software"), to deal
12
+ in the Software without restriction, including without limitation the rights
13
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
14
+ copies of the Software, and to permit persons to whom the Software is
15
+ furnished to do so, subject to the following conditions:
16
+
17
+ The above copyright notice and this permission notice shall be included in
18
+ all copies or substantial portions of the Software.
19
+
20
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
21
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
22
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
23
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
24
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
25
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
26
+ THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,44 @@
1
+ # ConciseCss
2
+
3
+ Concise is a lightweight front-end framework that provides a number of great features without the bloat. Concise is built based on Object-Oriented CSS principles and keeps semantics in mind to provide a small learning curve but high level of customization.
4
+
5
+ ## Installation Instructions
6
+
7
+ Add this line to your application's Gemfile:
8
+
9
+ gem 'concisecss'
10
+
11
+ And then execute:
12
+
13
+ $ bundle
14
+
15
+ Or install it yourself as:
16
+
17
+ $ gem install concisecss
18
+
19
+ ## Documentation
20
+ Check out concisecss documentation here: http://concisecss.com/documentation
21
+
22
+ ## Usage
23
+
24
+ Not every single project you are working needs all the ConciseCss javascripts files , you will need to update application.js with the files you need
25
+ ```js
26
+ //= require concisecss/navigation
27
+ //= require concisecss/non-responsive
28
+ //= require concisecss/naver
29
+ //= require concisecss/dropdown
30
+ //= require concisecss/close
31
+ ```
32
+ To add the css just require
33
+
34
+ ```css
35
+ *= require concise
36
+ ```
37
+
38
+ ## Contributing
39
+
40
+ 1. Fork it ( http://github.com/vezu/concisecss/fork )
41
+ 2. Create your feature branch (`git checkout -b my-new-feature`)
42
+ 3. Commit your changes (`git commit -am 'Add some feature'`)
43
+ 4. Push to the branch (`git push origin my-new-feature`)
44
+ 5. Create new Pull Request
data/Rakefile ADDED
@@ -0,0 +1,8 @@
1
+ require "bundler/gem_tasks"
2
+ require File.expand_path('../lib/concisecss/concisecss_source', __FILE__)
3
+
4
+ desc "Get latest files from concisecss"
5
+ task "update concisecss" do
6
+ files = ConcisecssSource.new
7
+ files.fetch
8
+ end
@@ -0,0 +1,6 @@
1
+ jQuery(document).ready(function() {
2
+ $(document).on('click', '.close', function () {
3
+ // Get .close parent div, fade out
4
+ $(this).parents('.close-this').fadeOut('slow');
5
+ });
6
+ });
@@ -0,0 +1,33 @@
1
+ (function($){
2
+ /**
3
+ * Powers the universal dropdown selector.
4
+ *
5
+ * @class DropDown
6
+ * @param {Object} el jQuery object
7
+ */
8
+ function DropDown(el) {
9
+ this.dd = el;
10
+ this.initEvents();
11
+ }
12
+
13
+ DropDown.prototype = {
14
+ initEvents : function() {
15
+ // Toggle .dropdown-active on click
16
+ this.dd.on('click', function(event){
17
+ $(this).toggleClass('dropdown-active');
18
+ event.stopPropagation();
19
+ });
20
+ }
21
+ }
22
+
23
+ $(function(){
24
+ var dropdown = $('.dropdown');
25
+
26
+ new DropDown(dropdown);
27
+
28
+ $(document).click(function() {
29
+ // Remove class from all dropdowns
30
+ dropdown.removeClass('dropdown-active');
31
+ });
32
+ });
33
+ }(jQuery));
@@ -0,0 +1,358 @@
1
+ /*
2
+ * Naver v3.0.8 - 2014-05-06
3
+ * A jQuery plugin for responsive navigation. Part of the Formstone Library.
4
+ * http://formstone.it/naver/
5
+ *
6
+ * Copyright 2014 Ben Plum; MIT Licensed
7
+ */
8
+
9
+ ;(function ($, window) {
10
+ "use strict";
11
+
12
+ /**
13
+ * @options
14
+ * @param customClass [string] <''> "Class applied to instance"
15
+ * @param label [boolean] <true> "Display handle width label"
16
+ * @param labels.closed [string] <'Navigation'> "Closed state text"
17
+ * @param labels.open [string] <'Close'> "Open state text"
18
+ * @param maxWidth [string] <'980px'> "Width at which to auto-disable plugin"
19
+ */
20
+ var options = {
21
+ customClass: "",
22
+ label: true,
23
+ labels: {
24
+ closed: "Navigation",
25
+ open: "Close"
26
+ },
27
+ maxWidth: "980px"
28
+ };
29
+
30
+ /**
31
+ * @events
32
+ * @event open.naver "Navigation opened"
33
+ * @event close.naver "Navigation closed"
34
+ */
35
+
36
+ var pub = {
37
+
38
+ /**
39
+ * @method
40
+ * @name close
41
+ * @description Closes instance
42
+ * @example $(".target").naver("close");
43
+ */
44
+ close: function(e) {
45
+ return $(this).each(function(i, nav) {
46
+ var data = $(nav).data("naver");
47
+
48
+ if (data && data.$nav.hasClass("enabled")) {
49
+ data.$wrapper.css({
50
+ height: 0
51
+ });
52
+ if (data.label) {
53
+ data.$handle.html(data.labels.closed);
54
+ }
55
+ data.$nav.removeClass("open")
56
+ .trigger("close.naver");
57
+ }
58
+ });
59
+ },
60
+
61
+ /**
62
+ * @method
63
+ * @name defaults
64
+ * @description Sets default plugin options
65
+ * @param opts [object] <{}> "Options object"
66
+ * @example $.naver("defaults", opts);
67
+ */
68
+ defaults: function(opts) {
69
+ options = $.extend(true, options, opts || {});
70
+ return $(this);
71
+ },
72
+
73
+ /**
74
+ * @method
75
+ * @name disable
76
+ * @description Disables instance
77
+ * @example $(".target").naver("disable");
78
+ */
79
+ disable: function() {
80
+ return $(this).each(function(i, nav) {
81
+ var data = $(nav).data("naver");
82
+
83
+ if (data) {
84
+ data.$nav.removeClass("enabled");
85
+ data.$wrapper.css({ height: "" });
86
+ }
87
+ });
88
+ },
89
+
90
+ /**
91
+ * @method
92
+ * @name destroy
93
+ * @description Destroys instance
94
+ * @example $(".target").naver("destroy");
95
+ */
96
+ destroy: function() {
97
+ return $(this).each(function(i, nav) {
98
+ var data = $(nav).data("naver");
99
+
100
+ if (data) {
101
+ data.$handle.remove();
102
+ data.$container.contents()
103
+ .unwrap()
104
+ .unwrap();
105
+
106
+ data.$nav.removeClass("enabled disabled naver " + data.customClass)
107
+ .off(".naver")
108
+ .removeData("naver");
109
+ }
110
+ });
111
+ },
112
+
113
+ /**
114
+ * @method
115
+ * @name enable
116
+ * @description Enables instance
117
+ * @example $(".target").naver("enable");
118
+ */
119
+ enable: function() {
120
+ return $(this).each(function(i, nav) {
121
+ var data = $(nav).data("naver");
122
+
123
+ if (data) {
124
+ data.$nav.addClass("enabled");
125
+ pub.close.apply(data.$nav);
126
+ }
127
+ });
128
+ },
129
+
130
+ /**
131
+ * @method
132
+ * @name open
133
+ * @description Opens instance
134
+ * @example $(".target").naver("open");
135
+ */
136
+ open: function() {
137
+ return $(this).each(function(i, nav) {
138
+ var data = $(nav).data("naver");
139
+
140
+ if (data && data.$nav.hasClass("enabled")) {
141
+ data.$wrapper.css({
142
+ height: data.$container.outerHeight(true)
143
+ });
144
+ if (data.label) {
145
+ data.$handle.html(data.labels.open);
146
+ }
147
+ data.$nav.addClass("open")
148
+ .trigger("open.naver");
149
+ }
150
+ });
151
+ }
152
+ };
153
+
154
+ /**
155
+ * @method private
156
+ * @name _init
157
+ * @description Initializes plugin
158
+ * @param opts [object] "Initialization options"
159
+ */
160
+ function _init(opts) {
161
+ // Settings
162
+ opts = $.extend(true, {}, options, opts);
163
+
164
+ // Apply to each element
165
+ var $items = $(this);
166
+ for (var i = 0, count = $items.length; i < count; i++) {
167
+ _build($items.eq(i), opts);
168
+ }
169
+ return $items;
170
+ }
171
+
172
+ /**
173
+ * @method private
174
+ * @name _build
175
+ * @description Builds each instance
176
+ * @param $nav [jQuery object] "Target jQuery object"
177
+ * @param opts [object] <{}> "Options object"
178
+ */
179
+ function _build($nav, opts) {
180
+ if (!$nav.data("naver")) {
181
+ // Extend Options
182
+ opts = $.extend(true, {}, opts, $nav.data("naver-options"));
183
+
184
+ var $handle = $nav.find(".naver-handle").length ? $nav.find(".naver-handle").detach() : $('<span class="naver-handle"></span>');
185
+
186
+ $nav.addClass("naver " + opts.customClass)
187
+ .wrapInner('<div class="naver-container"></div>')
188
+ .wrapInner('<div class="naver-wrapper"></div>')
189
+ .prepend($handle);
190
+
191
+ var data = $.extend(true, {
192
+ $nav: $nav,
193
+ $container: $nav.find(".naver-container"),
194
+ $wrapper: $nav.find(".naver-wrapper"),
195
+ $handle: $nav.find(".naver-handle")
196
+ }, opts);
197
+
198
+ data.$handle.text((opts.label) ? opts.labels.closed : '');
199
+ data.$nav.on("touchstart.naver", ".naver-handle", data, _onTouchStart)
200
+ .on("click.naver", ".naver-handle", data, _onClick)
201
+ .data("naver", data);
202
+
203
+
204
+ // Navtive MQ Support
205
+ if (window.matchMedia !== undefined) {
206
+ data.mediaQuery = window.matchMedia("(max-width:" + (data.maxWidth === Infinity ? "100000px" : data.maxWidth) + ")");
207
+ // Make sure we stay in context
208
+ data.mediaQuery.addListener(function() {
209
+ _onRespond.apply(data.$nav);
210
+ });
211
+ _onRespond.apply(data.$nav);
212
+ }
213
+ }
214
+ }
215
+
216
+ /**
217
+ * @method private
218
+ * @name _onTouchStart
219
+ * @description Handles touchstart to selected item
220
+ * @param e [object] "Event data"
221
+ */
222
+ function _onTouchStart(e) {
223
+ e.stopPropagation();
224
+
225
+ var data = e.data,
226
+ oe = e.originalEvent;
227
+
228
+ _clearTimer(data.timer);
229
+
230
+ data.touchStartX = oe.touches[0].clientX;
231
+ data.touchStartY = oe.touches[0].clientY;
232
+
233
+ data.$nav.on("touchmove.naver", ".naver-handle", data, _onTouchMove)
234
+ .on("touchend.naver", ".naver-handle", data, _onTouchEnd);
235
+ }
236
+
237
+ /**
238
+ * @method private
239
+ * @name _onTouchMove
240
+ * @description Handles touchmove to selected item
241
+ * @param e [object] "Event data"
242
+ */
243
+ function _onTouchMove(e) {
244
+ var data = e.data,
245
+ oe = e.originalEvent;
246
+
247
+ if (Math.abs(oe.touches[0].clientX - data.touchStartX) > 10 || Math.abs(oe.touches[0].clientY - data.touchStartY) > 10) {
248
+ data.$nav.off("touchmove.naver touchend.naver");
249
+ }
250
+ }
251
+
252
+ /**
253
+ * @method private
254
+ * @name _onTouchEnd
255
+ * @description Handles touchend to selected item
256
+ * @param e [object] "Event data"
257
+ */
258
+ function _onTouchEnd(e) {
259
+ e.preventDefault();
260
+ e.stopPropagation();
261
+
262
+ var data = e.data;
263
+
264
+ data.$nav.off("touchmove.naver touchend.naver click.naver");
265
+
266
+ // prevent ghosty clicks
267
+ data.timer = _startTimer(data.timer, 1000, function() {
268
+ data.$nav.on("click.naver", ".naver-handle", data, _onClick);
269
+ });
270
+
271
+ _onClick(e);
272
+ }
273
+
274
+ /**
275
+ * @method private
276
+ * @name _onClick
277
+ * @description Handles click nav click
278
+ * @param e [object] "Event data"
279
+ */
280
+ function _onClick(e) {
281
+ e.preventDefault();
282
+ e.stopPropagation();
283
+
284
+ var $target = $(e.currentTarget),
285
+ data = e.data;
286
+
287
+ // Close other open instances
288
+ $(".naver").not(data.$nav)
289
+ .naver("close");
290
+
291
+ if (data.$nav.hasClass("open")) {
292
+ pub.close.apply(data.$nav);
293
+ } else {
294
+ pub.open.apply(data.$nav);
295
+ }
296
+ }
297
+
298
+ /**
299
+ * @method private
300
+ * @name _onRespond
301
+ * @description Handles media query match change
302
+ */
303
+ function _onRespond() {
304
+ var data = $(this).data("naver");
305
+
306
+ if (data.mediaQuery.matches) {
307
+ pub.enable.apply(data.$nav);
308
+ } else {
309
+ pub.disable.apply(data.$nav);
310
+ }
311
+ }
312
+
313
+ /**
314
+ * @method private
315
+ * @name _startTimer
316
+ * @description Starts an internal timer
317
+ * @param timer [int] "Timer ID"
318
+ * @param time [int] "Time until execution"
319
+ * @param callback [int] "Function to execute"
320
+ * @param interval [boolean] "Flag for recurring interval"
321
+ */
322
+ function _startTimer(timer, time, func, interval) {
323
+ _clearTimer(timer, interval);
324
+ if (interval === true) {
325
+ return setInterval(func, time);
326
+ } else {
327
+ return setTimeout(func, time);
328
+ }
329
+ }
330
+
331
+ /**
332
+ * @method private
333
+ * @name _clearTimer
334
+ * @description Clears an internal timer
335
+ * @param timer [int] "Timer ID"
336
+ */
337
+ function _clearTimer(timer) {
338
+ if (timer !== null) {
339
+ clearInterval(timer);
340
+ timer = null;
341
+ }
342
+ }
343
+
344
+ $.fn.naver = function(method) {
345
+ if (pub[method]) {
346
+ return pub[method].apply(this, Array.prototype.slice.call(arguments, 1));
347
+ } else if (typeof method === 'object' || !method) {
348
+ return _init.apply(this, arguments);
349
+ }
350
+ return this;
351
+ };
352
+
353
+ $.naver = function(method) {
354
+ if (method === "defaults") {
355
+ pub.defaults.apply(this, Array.prototype.slice.call(arguments, 1));
356
+ }
357
+ };
358
+ })(jQuery, window);
@@ -0,0 +1,23 @@
1
+ (function($){
2
+ /**
3
+ * Determine if responsive navigation text needs to be added.
4
+ *
5
+ * @method responsiveNav
6
+ * @return {Object} naver A naver plugin instantiation
7
+ */
8
+ $.fn.responsiveNav = function() {
9
+ // Loop through each instance of responsive navigation
10
+ this.each(function(index) {
11
+ var labelState = $(this).hasClass( "nav-responsive-text" );
12
+
13
+ return $(this).naver({
14
+ maxWidth: "768px",
15
+ label: labelState
16
+ });
17
+ });
18
+ };
19
+ }(jQuery));
20
+
21
+ jQuery(document).ready(function() {
22
+ jQuery(".nav-responsive, .nav-responsive-left, .nav-responsive-center").responsiveNav();
23
+ });
@@ -0,0 +1,51 @@
1
+ (function($){
2
+ /**
3
+ * Calculate object width
4
+ *
5
+ */
6
+ $.fn.calculateWidth = function() {
7
+ return $(this).width();
8
+ };
9
+
10
+ /**
11
+ * Calculates proper widths for non-responsive websites.
12
+ *
13
+ * @method nonResponsive
14
+ * @note Only necessary for non-responsive websites.
15
+ */
16
+ $.fn.nonResponsive = function() {
17
+
18
+ // Loop through each instance of the `.non-responsive` class
19
+ this.each(function(index) {
20
+ if ($(this).hasClass("non-responsive")) {
21
+
22
+ // Get container width
23
+ var containerWidth = $(".container").width(),
24
+ i = 1,
25
+ max = 24;
26
+
27
+ // Set pixel-based alternatives for grid styles
28
+ // But first we need to know if our row has class `gutters`
29
+ if($(this).hasClass("gutters")) {
30
+ for (; i <= max; i++ ) {
31
+ // Column width for row with gutters
32
+ var columnWidth = ($('.column-'+i).calculateWidth()),
33
+ gutterWidth = columnWidth * 0.02;
34
+
35
+ $('.gutters .column-'+i).css("width", columnWidth - gutterWidth + "px");
36
+ }
37
+ } else {
38
+ for (; i <= max ; i++ ) {
39
+ // Column width for normal row
40
+ var columnWidth = ($('.column-'+i).calculateWidth() - 1);
41
+ $('.column-'+i).css("width", columnWidth + "px");
42
+ }
43
+ }
44
+ }
45
+ });
46
+ };
47
+ }(jQuery));
48
+
49
+ jQuery(document).ready(function() {
50
+ jQuery("body, .row").nonResponsive();
51
+ });
@@ -0,0 +1 @@
1
+ //= require concisecss