concisecss 0.0.5 → 2.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 +13 -8
- data/app/assets/javascripts/concisecss/dropdown.js +17 -8
- data/app/assets/javascripts/concisecss/naver.js +8 -8
- data/app/assets/javascripts/concisecss/navigation.js +5 -5
- data/app/assets/javascripts/concisecss/non-responsive.js +8 -8
- data/app/assets/stylesheets/base/_headings.scss +129 -119
- data/app/assets/stylesheets/base/_main.scss +15 -13
- data/app/assets/stylesheets/{generic → base}/_print.scss +38 -56
- data/app/assets/stylesheets/base/_selection.scss +15 -9
- data/app/assets/stylesheets/base/_type.scss +21 -19
- data/app/assets/stylesheets/{generic/_shared.scss → base/_vertical-rhythm.scss} +9 -10
- data/app/assets/stylesheets/components/_buttons.scss +174 -0
- data/app/assets/stylesheets/components/_colors.scss +25 -0
- data/app/assets/stylesheets/{objects → components}/_dropdowns.scss +67 -79
- data/app/assets/stylesheets/components/_navigation.scss +133 -0
- data/app/assets/stylesheets/concise.scss +31 -31
- data/app/assets/stylesheets/{generic → helpers}/_clearfix.scss +2 -6
- data/app/assets/stylesheets/helpers/_conditional.scss +128 -0
- data/app/assets/stylesheets/helpers/_functions.scss +32 -0
- data/app/assets/stylesheets/{generic/_helper.scss → helpers/_helpers.scss} +29 -38
- data/app/assets/stylesheets/helpers/_mixins.scss +315 -0
- data/app/assets/stylesheets/{generic → helpers}/_normalize.scss +35 -35
- data/app/assets/stylesheets/{_defaults.scss → helpers/_variables.scss} +68 -78
- data/app/assets/stylesheets/layout/_container.scss +17 -0
- data/app/assets/stylesheets/layout/_forms.scss +103 -0
- data/app/assets/stylesheets/layout/_grid.scss +71 -0
- data/app/assets/stylesheets/layout/_lists.scss +88 -0
- data/app/assets/stylesheets/layout/tables.scss +63 -0
- data/lib/concisecss/concisecss_source.rb +30 -40
- data/lib/concisecss/version.rb +1 -1
- metadata +21 -20
- data/app/assets/stylesheets/generic/_conditional.scss +0 -126
- data/app/assets/stylesheets/generic/_mixins.scss +0 -157
- data/app/assets/stylesheets/objects/_badges.scss +0 -53
- data/app/assets/stylesheets/objects/_breadcrumbs.scss +0 -35
- data/app/assets/stylesheets/objects/_buttons.scss +0 -287
- data/app/assets/stylesheets/objects/_colors.scss +0 -48
- data/app/assets/stylesheets/objects/_groups.scss +0 -102
- data/app/assets/stylesheets/objects/_navigation.scss +0 -382
- data/app/assets/stylesheets/objects/_progress.scss +0 -106
- data/app/assets/stylesheets/objects/_wells.scss +0 -103
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 10c61f3f483dad0adab83788e58ad6901aad2bdc
|
4
|
+
data.tar.gz: 28d4da196838dc77e8932fe8229ecd102fb69972
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 973c6dc8ac896a547071ce85a47ccf195a61e8fca329d0cff8e50fd7b382c9a2c6a78807179c58a74325cb8cc8726efa9e2731a8c7e637327173d2785121a39d
|
7
|
+
data.tar.gz: 24ad5e69c645f70e4373e16d12fda7e3797a28630b344b58d3ab5e683a5cebdb8101fbc25e249e691800547d42cadf186ac4afee7f739faec0404b2df232cb1d
|
data/README.md
CHANGED
@@ -1,15 +1,16 @@
|
|
1
1
|
# [<img src="http://i.imgur.com/4t1ClRx.png">](http://concisecss.com/)
|
2
2
|
|
3
|
-
[![Gitter chat](https://badges.gitter.im/concisecss.png)](https://gitter.im/concisecss)
|
3
|
+
[![Gitter chat](https://badges.gitter.im/concisecss.png)](https://gitter.im/concisecss)
|
4
|
+
[![Code Climate](https://codeclimate.com/github/ConciseCSS/concise.css-gem.png)](https://codeclimate.com/github/ConciseCSS/concise.css-gem)
|
4
5
|
[![Gem Version](https://badge.fury.io/rb/concisecss.svg)](http://badge.fury.io/rb/concisecss)
|
5
6
|
|
6
|
-
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,
|
7
|
+
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, and a high level of customization.
|
7
8
|
|
8
9
|
## Installation Instructions
|
9
10
|
|
10
11
|
Add this line to your application's Gemfile:
|
11
12
|
|
12
|
-
gem 'concisecss', '~> 0.0
|
13
|
+
gem 'concisecss', '~> 2.0.0'
|
13
14
|
|
14
15
|
And then execute:
|
15
16
|
|
@@ -21,7 +22,7 @@ Or install it yourself as:
|
|
21
22
|
|
22
23
|
## Usage
|
23
24
|
|
24
|
-
Not every single project you are working needs all the
|
25
|
+
Not every single project you are working needs all of the Concise JavaScript files. You can update your `application.js` with the files you need
|
25
26
|
```js
|
26
27
|
//= require concisecss/navigation
|
27
28
|
//= require concisecss/non-responsive
|
@@ -29,11 +30,11 @@ Not every single project you are working needs all the ConciseCss javascripts f
|
|
29
30
|
//= require concisecss/dropdown
|
30
31
|
//= require concisecss/close
|
31
32
|
```
|
32
|
-
To add the
|
33
|
+
To add the CSS just require
|
33
34
|
```css
|
34
|
-
*= require concise
|
35
|
+
*= require concise
|
35
36
|
```
|
36
|
-
If you intend to extend or override
|
37
|
+
If you intend to extend or override Concise, you might want to create an override file. For example: `app/assets/stylesheets/custom.scss` and then import concise
|
37
38
|
```css
|
38
39
|
@import "concise";
|
39
40
|
```
|
@@ -49,9 +50,13 @@ Check out our documentation here: [http://concisecss.com/documentation](http://c
|
|
49
50
|
You can keep up-to-date with the changes that we have made via our [releases page](https://github.com/ConciseCSS/concise.css-gem/releases).
|
50
51
|
|
51
52
|
## Versioning
|
52
|
-
|
53
|
+
|
53
54
|
Concise is currently maintained under the [Semantic Versioning guidelines](http://semver.org/).
|
54
55
|
|
56
|
+
## Acknowledgments
|
57
|
+
|
58
|
+
There are acknowledgements spread throughout the source code if you look around, and you can also view a list of credits [here](http://concisecss.com/credits/).
|
59
|
+
|
55
60
|
## Elsewhere
|
56
61
|
|
57
62
|
[![Like Concise on Facebook](http://i.imgur.com/4dy5UUK.png)](https://facebook.com/ConciseCSS)
|
@@ -9,25 +9,34 @@
|
|
9
9
|
this.dd = el;
|
10
10
|
this.initEvents();
|
11
11
|
}
|
12
|
-
|
12
|
+
|
13
13
|
DropDown.prototype = {
|
14
|
-
initEvents : function() {
|
14
|
+
initEvents : function() {
|
15
15
|
// Toggle .dropdown-active on click
|
16
16
|
this.dd.on('click', function(event){
|
17
17
|
$(this).toggleClass('dropdown-active');
|
18
18
|
event.stopPropagation();
|
19
19
|
});
|
20
|
+
|
21
|
+
// Toggle .dropdown-active on hover
|
22
|
+
$(".dropdown-hover").mouseenter(function(event) {
|
23
|
+
$(this).addClass("dropdown-active");
|
24
|
+
event.stopPropagation();
|
25
|
+
});
|
20
26
|
}
|
21
|
-
}
|
22
|
-
|
27
|
+
};
|
28
|
+
|
23
29
|
$(function(){
|
24
30
|
var dropdown = $('.dropdown');
|
25
|
-
|
31
|
+
|
26
32
|
new DropDown(dropdown);
|
27
|
-
|
33
|
+
|
28
34
|
$(document).click(function() {
|
29
|
-
// Remove class from all dropdowns
|
30
35
|
dropdown.removeClass('dropdown-active');
|
31
36
|
});
|
37
|
+
|
38
|
+
$(".dropdown-menu").mouseleave(function() {
|
39
|
+
dropdown.removeClass("dropdown-active");
|
40
|
+
});
|
32
41
|
});
|
33
|
-
}(jQuery));
|
42
|
+
}(jQuery));
|
@@ -1,10 +1,10 @@
|
|
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
|
-
*/
|
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
8
|
|
9
9
|
;(function ($, window) {
|
10
10
|
"use strict";
|
@@ -355,4 +355,4 @@
|
|
355
355
|
pub.defaults.apply(this, Array.prototype.slice.call(arguments, 1));
|
356
356
|
}
|
357
357
|
};
|
358
|
-
})(jQuery, window);
|
358
|
+
})(jQuery, window);
|
@@ -1,15 +1,15 @@
|
|
1
|
-
(function($){
|
1
|
+
(function($){
|
2
2
|
/**
|
3
3
|
* Determine if responsive navigation text needs to be added.
|
4
4
|
*
|
5
5
|
* @method responsiveNav
|
6
6
|
* @return {Object} naver A naver plugin instantiation
|
7
7
|
*/
|
8
|
-
$.fn.responsiveNav = function() {
|
8
|
+
$.fn.responsiveNav = function() {
|
9
9
|
// Loop through each instance of responsive navigation
|
10
10
|
this.each(function(index) {
|
11
11
|
var labelState = $(this).hasClass( "nav-responsive-text" );
|
12
|
-
|
12
|
+
|
13
13
|
return $(this).naver({
|
14
14
|
maxWidth: "768px",
|
15
15
|
label: labelState
|
@@ -18,6 +18,6 @@
|
|
18
18
|
};
|
19
19
|
}(jQuery));
|
20
20
|
|
21
|
-
jQuery(document).ready(function() {
|
21
|
+
jQuery(document).ready(function() {
|
22
22
|
jQuery(".nav-responsive, .nav-responsive-left, .nav-responsive-center").responsiveNav();
|
23
|
-
});
|
23
|
+
});
|
@@ -1,9 +1,9 @@
|
|
1
|
-
(function($){
|
1
|
+
(function($){
|
2
2
|
/**
|
3
3
|
* Calculate object width
|
4
4
|
*
|
5
5
|
*/
|
6
|
-
$.fn.calculateWidth = function() {
|
6
|
+
$.fn.calculateWidth = function() {
|
7
7
|
return $(this).width();
|
8
8
|
};
|
9
9
|
|
@@ -14,7 +14,7 @@
|
|
14
14
|
* @note Only necessary for non-responsive websites.
|
15
15
|
*/
|
16
16
|
$.fn.nonResponsive = function() {
|
17
|
-
|
17
|
+
|
18
18
|
// Loop through each instance of the `.non-responsive` class
|
19
19
|
this.each(function(index) {
|
20
20
|
if ($(this).hasClass("non-responsive")) {
|
@@ -22,11 +22,11 @@
|
|
22
22
|
var containerWidth = $(".container").width(),
|
23
23
|
i = 1,
|
24
24
|
max = 24;
|
25
|
-
|
25
|
+
|
26
26
|
// Set pixel-based alternatives for grid styles
|
27
27
|
// But first we need to know if our row has class `gutters`
|
28
28
|
if($(this).hasClass("gutters")) {
|
29
|
-
for (; i <= max; i++ ) {
|
29
|
+
for (; i <= max; i++ ) {
|
30
30
|
// Column width for row with gutters
|
31
31
|
var columnWidth = ($('.column-'+i).calculateWidth()),
|
32
32
|
gutterWidth = columnWidth * 0.02;
|
@@ -37,7 +37,7 @@
|
|
37
37
|
for (; i <= max ; i++ ) {
|
38
38
|
// Column width for normal row
|
39
39
|
var columnWidth = ($('.column-'+i).calculateWidth() - 1);
|
40
|
-
|
40
|
+
|
41
41
|
$('.column-'+i).css("width", columnWidth + "px");
|
42
42
|
}
|
43
43
|
}
|
@@ -46,6 +46,6 @@
|
|
46
46
|
};
|
47
47
|
}(jQuery));
|
48
48
|
|
49
|
-
jQuery(document).ready(function() {
|
49
|
+
jQuery(document).ready(function() {
|
50
50
|
jQuery("body, .row").nonResponsive();
|
51
|
-
});
|
51
|
+
});
|
@@ -2,157 +2,167 @@
|
|
2
2
|
//------------------------------------
|
3
3
|
// HEADINGS
|
4
4
|
//------------------------------------
|
5
|
-
|
6
|
-
//
|
7
|
-
|
8
|
-
|
5
|
+
|
6
|
+
// Variables
|
7
|
+
$giga-sizes: (
|
8
|
+
"extra-small": 48px,
|
9
|
+
"small": 64px,
|
10
|
+
"large": 80px,
|
11
|
+
"extra-large": 96px
|
12
|
+
);
|
13
|
+
|
14
|
+
$mega-sizes: (
|
15
|
+
"extra-small": 40px,
|
16
|
+
"small": 48px,
|
17
|
+
"large": 64px,
|
18
|
+
"extra-large": 72px
|
19
|
+
);
|
20
|
+
|
21
|
+
$kilo-sizes: (
|
22
|
+
"extra-small": 32px,
|
23
|
+
"small": 32px,
|
24
|
+
"large": 48px,
|
25
|
+
"extra-large": 64px
|
26
|
+
);
|
27
|
+
|
28
|
+
$h1-sizes: (
|
29
|
+
"extra-small": 24px,
|
30
|
+
"small": 32px,
|
31
|
+
"medium": 36px
|
32
|
+
);
|
33
|
+
|
34
|
+
$h2-sizes: (
|
35
|
+
"extra-small": 20px,
|
36
|
+
"small": 24px,
|
37
|
+
"medium": 30px
|
38
|
+
);
|
39
|
+
|
40
|
+
$h3-sizes: (
|
41
|
+
"extra-small": 18px,
|
42
|
+
"small": 20px,
|
43
|
+
"medium": 24px
|
44
|
+
);
|
45
|
+
|
46
|
+
$h4-sizes: (
|
47
|
+
"extra-small": 16px,
|
48
|
+
"small": 18px,
|
49
|
+
"medium": 20px
|
50
|
+
);
|
51
|
+
|
52
|
+
$h5-sizes: (
|
53
|
+
"extra-small": 14px,
|
54
|
+
"small": 16px,
|
55
|
+
"medium": 18px
|
56
|
+
);
|
57
|
+
|
58
|
+
$h6-sizes: (
|
59
|
+
"extra-small": 12px,
|
60
|
+
"small": 14px,
|
61
|
+
"medium": 16px
|
62
|
+
);
|
63
|
+
|
64
|
+
|
65
|
+
// Font sizing
|
66
|
+
h1, h2, h3, h4, h5, h6,
|
9
67
|
.h1, .h2, .h3, .h4, .h5, .h6,
|
10
68
|
.giga, .mega, .kilo {
|
11
|
-
color:
|
69
|
+
color: $base-heading-color;
|
70
|
+
font-family: $base-heading-font-family;
|
12
71
|
font-weight: normal;
|
13
72
|
text-rendering: optimizeLegibility;
|
73
|
+
|
74
|
+
a { font-weight: inherit; }
|
75
|
+
|
76
|
+
small {
|
77
|
+
color: $base-sub-heading-color;
|
78
|
+
font-size: 60%;
|
79
|
+
line-height: 1;
|
80
|
+
}
|
14
81
|
}
|
15
82
|
|
16
83
|
h1, .h1 {
|
17
|
-
@include font-size(
|
84
|
+
@include responsive("font-size" "line-height", map-get($h1-sizes, extra-small),
|
85
|
+
(
|
86
|
+
"small" : map-get($h1-sizes, small),
|
87
|
+
"medium" : map-get($h1-sizes, medium)
|
88
|
+
)
|
89
|
+
);
|
18
90
|
}
|
19
91
|
|
20
92
|
h2, .h2 {
|
21
|
-
@include font-size(
|
93
|
+
@include responsive("font-size" "line-height", map-get($h2-sizes, extra-small),
|
94
|
+
(
|
95
|
+
"small" : map-get($h2-sizes, small),
|
96
|
+
"medium" : map-get($h2-sizes, medium)
|
97
|
+
)
|
98
|
+
);
|
22
99
|
}
|
23
100
|
|
24
101
|
h3, .h3 {
|
25
|
-
@include font-size(
|
102
|
+
@include responsive("font-size" "line-height", map-get($h3-sizes, extra-small),
|
103
|
+
(
|
104
|
+
"small" : map-get($h3-sizes, small),
|
105
|
+
"medium" : map-get($h3-sizes, medium)
|
106
|
+
)
|
107
|
+
);
|
26
108
|
}
|
27
109
|
|
28
110
|
h4, .h4 {
|
29
|
-
@include font-size(
|
111
|
+
@include responsive("font-size" "line-height", map-get($h4-sizes, extra-small),
|
112
|
+
(
|
113
|
+
"small" : map-get($h4-sizes, small),
|
114
|
+
"medium" : map-get($h4-sizes, medium)
|
115
|
+
)
|
116
|
+
);
|
30
117
|
}
|
31
118
|
|
32
119
|
h5, .h5 {
|
33
|
-
@include font-size(
|
120
|
+
@include responsive("font-size" "line-height", map-get($h5-sizes, extra-small),
|
121
|
+
(
|
122
|
+
"small" : map-get($h5-sizes, small),
|
123
|
+
"medium" : map-get($h5-sizes, medium)
|
124
|
+
)
|
125
|
+
);
|
34
126
|
}
|
35
127
|
|
36
128
|
h6, .h6 {
|
37
|
-
@include font-size(
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
}
|
44
|
-
|
45
|
-
h2, .h2 {
|
46
|
-
@include font-size(24px);
|
47
|
-
}
|
48
|
-
|
49
|
-
h3, .h3 {
|
50
|
-
@include font-size(20px);
|
51
|
-
}
|
52
|
-
|
53
|
-
h4, .h4 {
|
54
|
-
@include font-size(18px);
|
55
|
-
}
|
56
|
-
|
57
|
-
h5, .h5 {
|
58
|
-
@include font-size(16px);
|
59
|
-
}
|
60
|
-
|
61
|
-
h6, .h6 {
|
62
|
-
@include font-size(14px);
|
63
|
-
}
|
64
|
-
}
|
65
|
-
|
66
|
-
@include breakpoint(medium) {
|
67
|
-
h1, .h1 {
|
68
|
-
@include font-size($h1-size);
|
69
|
-
}
|
70
|
-
|
71
|
-
h2, .h2 {
|
72
|
-
@include font-size($h2-size);
|
73
|
-
}
|
74
|
-
|
75
|
-
h3, .h3 {
|
76
|
-
@include font-size($h3-size);
|
77
|
-
}
|
78
|
-
|
79
|
-
h4, .h4 {
|
80
|
-
@include font-size($h4-size);
|
81
|
-
}
|
82
|
-
|
83
|
-
h5, .h5 {
|
84
|
-
@include font-size($h5-size);
|
85
|
-
}
|
86
|
-
|
87
|
-
h6, .h6 {
|
88
|
-
@include font-size($h6-size);
|
89
|
-
}
|
90
|
-
}
|
91
|
-
|
92
|
-
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
|
93
|
-
.h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a,
|
94
|
-
.giga a, .mega a, .kilo a { font-weight: inherit; }
|
95
|
-
|
96
|
-
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
|
97
|
-
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small,
|
98
|
-
.giga small, .mega small, .kilo small {
|
99
|
-
font-size: 65% !important;
|
100
|
-
line-height: 1;
|
129
|
+
@include responsive("font-size" "line-height", map-get($h6-sizes, extra-small),
|
130
|
+
(
|
131
|
+
"small" : map-get($h6-sizes, small),
|
132
|
+
"medium" : map-get($h6-sizes, medium)
|
133
|
+
)
|
134
|
+
);
|
101
135
|
}
|
102
136
|
|
103
137
|
|
104
138
|
// Extra-large heading classes
|
105
139
|
.giga {
|
106
|
-
@include font-size(
|
140
|
+
@include responsive("font-size" "line-height", map-get($giga-sizes, extra-small),
|
141
|
+
(
|
142
|
+
"small" : map-get($giga-sizes, small),
|
143
|
+
"large" : map-get($giga-sizes, large),
|
144
|
+
"extra-large" : map-get($giga-sizes, extra-large)
|
145
|
+
)
|
146
|
+
);
|
107
147
|
}
|
108
148
|
|
109
149
|
.mega {
|
110
|
-
@include font-size(
|
150
|
+
@include responsive("font-size" "line-height", map-get($mega-sizes, extra-small),
|
151
|
+
(
|
152
|
+
"small" : map-get($mega-sizes, small),
|
153
|
+
"large" : map-get($mega-sizes, large),
|
154
|
+
"extra-large" : map-get($mega-sizes, extra-large)
|
155
|
+
)
|
156
|
+
);
|
111
157
|
}
|
112
158
|
|
113
159
|
.kilo {
|
114
|
-
@include font-size(
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
.mega {
|
123
|
-
@include font-size(48px);
|
124
|
-
}
|
125
|
-
|
126
|
-
.kilo {
|
127
|
-
@include font-size(32px);
|
128
|
-
}
|
129
|
-
}
|
130
|
-
|
131
|
-
@include breakpoint(large) {
|
132
|
-
.giga {
|
133
|
-
@include font-size(80px);
|
134
|
-
}
|
135
|
-
|
136
|
-
.mega {
|
137
|
-
@include font-size(64px);
|
138
|
-
}
|
139
|
-
|
140
|
-
.kilo {
|
141
|
-
@include font-size(48px);
|
142
|
-
}
|
143
|
-
}
|
144
|
-
|
145
|
-
@include breakpoint(extra-large) {
|
146
|
-
.giga {
|
147
|
-
@include font-size($giga-size);
|
148
|
-
}
|
149
|
-
|
150
|
-
.mega {
|
151
|
-
@include font-size($mega-size);
|
152
|
-
}
|
153
|
-
|
154
|
-
.kilo {
|
155
|
-
@include font-size($kilo-size);
|
156
|
-
}
|
160
|
+
@include responsive("font-size" "line-height", map-get($kilo-sizes, extra-small),
|
161
|
+
(
|
162
|
+
"small" : map-get($kilo-sizes, small),
|
163
|
+
"large" : map-get($kilo-sizes, large),
|
164
|
+
"extra-large" : map-get($kilo-sizes, extra-large)
|
165
|
+
)
|
166
|
+
);
|
157
167
|
}
|
158
168
|
}
|