ustyle 1.15.3 → 1.16.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.nvmrc +1 -1
- data/Gruntfile.js +104 -82
- data/README.md +45 -21
- data/dist/ustyle-content.css +1 -1
- data/dist/ustyle-latest.css +1 -1
- data/dist/ustyle.js +148 -97
- data/dist/ustyle.json +1 -1
- data/dist/ustyle.min.js +1 -1
- data/grunt/modules/dss-helper.js +103 -105
- data/grunt/modules/file.js +11 -13
- data/grunt/modules/html-parser.js +12 -14
- data/grunt/modules/templates.js +38 -40
- data/grunt/tasks/browser-sync.js +20 -16
- data/grunt/tasks/builder.js +43 -48
- data/grunt/tasks/styleguide.js +187 -182
- data/index.js +31 -0
- data/lib/ustyle/version.rb +1 -1
- data/package-lock.json +9261 -0
- data/package.json +20 -22
- data/styleguide/assets/javascripts/app.js +83 -56
- data/styleguide/assets/javascripts/modules/stats.js +23 -24
- data/styleguide/assets/javascripts/vendor/highlight.js +1 -1
- data/styleguide/assets/javascripts/vendor/svg4everybody.js +1 -1
- data/styleguide/partials/_footer.tpl +1 -1
- data/styleguide/partials/_sidebar.tpl +1 -1
- data/vendor/assets/javascripts/ustyle/tabs.js +153 -102
- data/vendor/assets/stylesheets/ustyle/mixins/_media-query.scss +0 -2
- metadata +4 -5
- data/JAVASCRIPT_STANDARDS.md +0 -88
- data/config/.jscsrc +0 -76
- data/styleguide/assets/javascripts/modules/cleanWhiteSpace.js +0 -34
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e7b09b1796079523c5cb6ec6d78789ce65abca6d
|
|
4
|
+
data.tar.gz: 3022f623ef7bd561b29c2c4d0d1ad5d7f6c227c9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 97a27823c75d51efb16ae9706c54e66739415d1528148b3f90df6aa02621df7fd9d020fce398ca4952818df27a4d5acea0592c7bdc997794cafdeaf4464a911a
|
|
7
|
+
data.tar.gz: 472c6acdbbce66bc61ac8e60d70e296a1e10a9f4c5d8f2de0f4a7aa77c37e37d2c6fac6747d3a56a49ae52326cff770576ad11b6ccc0c4e9acc59f34fa3a5b0e
|
data/.nvmrc
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
8.9
|
data/Gruntfile.js
CHANGED
|
@@ -1,202 +1,224 @@
|
|
|
1
|
-
module.exports = function(grunt) {
|
|
2
|
-
grunt.loadNpmTasks(
|
|
3
|
-
require(
|
|
4
|
-
grunt.loadTasks(
|
|
1
|
+
module.exports = function (grunt) {
|
|
2
|
+
grunt.loadNpmTasks('grunt-postcss')
|
|
3
|
+
require('load-grunt-tasks')(grunt)
|
|
4
|
+
grunt.loadTasks('grunt/tasks')
|
|
5
5
|
|
|
6
6
|
grunt.initConfig({
|
|
7
7
|
shell: {
|
|
8
8
|
publish: {
|
|
9
|
-
command:
|
|
9
|
+
command: 'bundle exec rake ustyle:publish'
|
|
10
10
|
}
|
|
11
11
|
},
|
|
12
12
|
version: {
|
|
13
13
|
project: {
|
|
14
|
-
src: [
|
|
14
|
+
src: ['package.json', 'lib/ustyle/version.rb']
|
|
15
15
|
}
|
|
16
16
|
},
|
|
17
17
|
postcss: {
|
|
18
18
|
options: {
|
|
19
19
|
map: false,
|
|
20
20
|
processors: [
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
require('autoprefixer')({
|
|
22
|
+
browsers: ['last 5 versions', 'Firefox ESR', 'not Explorer < 9', '> 1%', 'Opera > 18']
|
|
23
|
+
})
|
|
24
24
|
]
|
|
25
25
|
},
|
|
26
|
-
dist: { src: [
|
|
26
|
+
dist: { src: ['docs/**/*.css', 'dist/**/*.css'] }
|
|
27
27
|
},
|
|
28
28
|
watch: {
|
|
29
29
|
options: {
|
|
30
30
|
spawn: false
|
|
31
31
|
},
|
|
32
32
|
build: {
|
|
33
|
-
files: [
|
|
34
|
-
tasks: [
|
|
33
|
+
files: ['vendor/assets/**/*', 'styleguide/**/*', 'dist/ustyle.json'],
|
|
34
|
+
tasks: ['copy', 'sass', 'sassdoc', 'postcss', 'browserSync-inject', 'styleguide', 'builder']
|
|
35
35
|
},
|
|
36
36
|
scripts: {
|
|
37
|
-
files: [
|
|
38
|
-
tasks: [
|
|
37
|
+
files: ['styleguide/**/*.js', 'vendor/**/*.js'],
|
|
38
|
+
tasks: ['concat']
|
|
39
39
|
}
|
|
40
40
|
},
|
|
41
41
|
svgstore: {
|
|
42
42
|
options: {
|
|
43
|
-
prefix:
|
|
43
|
+
prefix: 'icon-'
|
|
44
44
|
},
|
|
45
45
|
default: {
|
|
46
46
|
files: {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
}
|
|
47
|
+
'vendor/assets/images/icons.svg': ['vendor/assets/images/icons/*.svg'],
|
|
48
|
+
'dist/icons.svg': ['vendor/assets/images/icons/*.svg'],
|
|
49
|
+
'styleguide/assets/images/icons.svg': ['vendor/assets/images/icons/*.svg']
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
52
|
},
|
|
53
53
|
svgmin: {
|
|
54
54
|
dist: {
|
|
55
55
|
files: [{
|
|
56
56
|
expand: true,
|
|
57
|
-
cwd:
|
|
58
|
-
src:
|
|
59
|
-
dest:
|
|
57
|
+
cwd: 'vendor/assets/images/icons/',
|
|
58
|
+
src: '{,*/}*.svg',
|
|
59
|
+
dest: 'vendor/assets/images/icons/'
|
|
60
60
|
}]
|
|
61
61
|
}
|
|
62
62
|
},
|
|
63
63
|
styleguide: {
|
|
64
64
|
dist: {
|
|
65
|
-
src:
|
|
66
|
-
dir:
|
|
67
|
-
output:
|
|
68
|
-
statsFor:
|
|
69
|
-
tagPlaceholder:
|
|
70
|
-
tagStartVersion:
|
|
65
|
+
src: 'vendor/assets/stylesheets/ustyle/**/*.scss',
|
|
66
|
+
dir: 'styleguide',
|
|
67
|
+
output: 'dist/ustyle.json',
|
|
68
|
+
statsFor: 'https://assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/{#tag}/ustyle-latest.css',
|
|
69
|
+
tagPlaceholder: '{#tag}',
|
|
70
|
+
tagStartVersion: '0.9.9'
|
|
71
71
|
}
|
|
72
72
|
},
|
|
73
73
|
builder: {
|
|
74
|
-
dist:{
|
|
74
|
+
dist: {
|
|
75
75
|
files: {
|
|
76
|
-
|
|
76
|
+
'docs/': 'dist/ustyle.json'
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
},
|
|
80
80
|
sass: {
|
|
81
81
|
dist: {
|
|
82
82
|
options: {
|
|
83
|
-
loadPath: [
|
|
84
|
-
require:
|
|
85
|
-
style:
|
|
86
|
-
sourcemap:
|
|
83
|
+
loadPath: ['vendor/assets/stylesheets/ustyle', 'styleguide/assets/sass'],
|
|
84
|
+
require: './lib/ustyle.rb',
|
|
85
|
+
style: 'compressed',
|
|
86
|
+
sourcemap: 'none',
|
|
87
87
|
bundleExec: true
|
|
88
88
|
},
|
|
89
89
|
files: {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
90
|
+
'dist/ustyle-latest.css': 'vendor/assets/stylesheets/ustyle.scss',
|
|
91
|
+
'dist/ustyle-content.css': 'vendor/assets/stylesheets/ustyle-content.scss',
|
|
92
|
+
'docs/css/main.css': 'styleguide/assets/sass/main.scss'
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
},
|
|
96
96
|
concat: {
|
|
97
97
|
ustyle: {
|
|
98
98
|
src: [
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
99
|
+
'vendor/assets/javascripts/ustyle/utils.js',
|
|
100
|
+
'vendor/assets/javascripts/ustyle/anchor.js',
|
|
101
|
+
'vendor/assets/javascripts/ustyle/backdrop.js',
|
|
102
|
+
'vendor/assets/javascripts/ustyle/overlay.js',
|
|
103
|
+
'vendor/assets/javascripts/ustyle/tabs.js',
|
|
104
|
+
'vendor/assets/javascripts/ustyle/classtoggler.js',
|
|
105
|
+
'vendor/assets/javascripts/ustyle/radioToggle.js'
|
|
106
106
|
],
|
|
107
|
-
dest:
|
|
107
|
+
dest: 'dist/ustyle.js'
|
|
108
108
|
},
|
|
109
109
|
app: {
|
|
110
|
-
src: [
|
|
111
|
-
|
|
110
|
+
src: [
|
|
111
|
+
'styleguide/assets/javascripts/vendor/*.js',
|
|
112
|
+
'dist/ustyle.js',
|
|
113
|
+
'styleguide/assets/javascripts/modules/*.js',
|
|
114
|
+
'styleguide/assets/javascripts/*.js'
|
|
115
|
+
],
|
|
116
|
+
dest: 'docs/js/app.js'
|
|
112
117
|
}
|
|
113
118
|
},
|
|
114
119
|
uglify: {
|
|
115
120
|
ustyle: {
|
|
116
121
|
files: {
|
|
117
|
-
|
|
122
|
+
'dist/ustyle.min.js': ['dist/ustyle.js'],
|
|
123
|
+
'docs/js/app.min.js': ['docs/js/app.js']
|
|
118
124
|
}
|
|
119
125
|
}
|
|
120
126
|
},
|
|
121
127
|
copy: {
|
|
122
128
|
main: {
|
|
123
129
|
files: [
|
|
124
|
-
{expand: true, flatten: true, src: [
|
|
125
|
-
{expand: true, flatten: true, src: [
|
|
126
|
-
{expand: true, flatten: true, src: [
|
|
130
|
+
{expand: true, flatten: true, src: ['dist/*.css'], dest: 'docs/css/'},
|
|
131
|
+
{expand: true, flatten: true, src: ['styleguide/assets/images/**'], dest: 'docs/images/'},
|
|
132
|
+
{expand: true, flatten: true, src: ['styleguide/CNAME'], dest: 'docs/'}
|
|
127
133
|
]
|
|
128
134
|
}
|
|
129
135
|
},
|
|
130
136
|
sassdoc: {
|
|
131
137
|
default: {
|
|
132
|
-
src:
|
|
138
|
+
src: 'vendor/assets/stylesheets/ustyle/**/*.scss',
|
|
133
139
|
options: {
|
|
134
|
-
dest:
|
|
140
|
+
dest: './docs/sass'
|
|
135
141
|
}
|
|
136
142
|
}
|
|
137
143
|
},
|
|
138
144
|
scsslint: {
|
|
139
145
|
allFiles: [
|
|
140
|
-
|
|
141
|
-
|
|
146
|
+
'./vendor/assets/stylesheets/**/*.scss',
|
|
147
|
+
'./styleguide/assets/sass/**/*.scss'
|
|
142
148
|
],
|
|
143
149
|
options: {
|
|
144
150
|
bundleExec: true,
|
|
145
|
-
config:
|
|
151
|
+
config: 'config/scss-lint.yml',
|
|
146
152
|
reporterOutput: null,
|
|
147
153
|
exclude: [
|
|
148
|
-
|
|
149
|
-
|
|
154
|
+
'./vendor/assets/stylesheets/ustyle/vendor/*',
|
|
155
|
+
'./styleguide/assets/sass/vendor/*'
|
|
150
156
|
]
|
|
151
157
|
}
|
|
152
158
|
},
|
|
153
|
-
|
|
154
|
-
src: [
|
|
155
|
-
"Gruntfile.js",
|
|
156
|
-
"vendor/assets/javascripts/**/*.js"
|
|
157
|
-
],
|
|
159
|
+
standard: {
|
|
158
160
|
options: {
|
|
159
|
-
|
|
161
|
+
fix: true,
|
|
162
|
+
globals: [
|
|
163
|
+
'google',
|
|
164
|
+
'$',
|
|
165
|
+
'cleanWhiteSpace',
|
|
166
|
+
'svg4everybody',
|
|
167
|
+
'hljs',
|
|
168
|
+
'Overlay',
|
|
169
|
+
'ClassToggler',
|
|
170
|
+
'Tabs',
|
|
171
|
+
'RadioToggle',
|
|
172
|
+
'reportData'
|
|
173
|
+
]
|
|
174
|
+
},
|
|
175
|
+
ustyle: {
|
|
176
|
+
src: [
|
|
177
|
+
'./grunt/**/*.js',
|
|
178
|
+
'./styleguide/**/!(vendor)/*.js',
|
|
179
|
+
'./vendor/**/*.js',
|
|
180
|
+
'*.js'
|
|
181
|
+
]
|
|
160
182
|
}
|
|
161
183
|
},
|
|
162
184
|
env: {
|
|
163
185
|
dev: {
|
|
164
|
-
NODE_ENV:
|
|
186
|
+
NODE_ENV: 'development'
|
|
165
187
|
},
|
|
166
188
|
build: {
|
|
167
|
-
NODE_ENV:
|
|
189
|
+
NODE_ENV: 'production'
|
|
168
190
|
}
|
|
169
191
|
},
|
|
170
192
|
buildcontrol: {
|
|
171
193
|
options: {
|
|
172
|
-
dir:
|
|
194
|
+
dir: 'docs/',
|
|
173
195
|
commit: true,
|
|
174
196
|
push: true,
|
|
175
|
-
message:
|
|
197
|
+
message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%'
|
|
176
198
|
},
|
|
177
199
|
pages: {
|
|
178
200
|
options: {
|
|
179
|
-
remote:
|
|
180
|
-
branch:
|
|
201
|
+
remote: 'git@github.com:uswitch/ustyle.git',
|
|
202
|
+
branch: 'gh-pages'
|
|
181
203
|
}
|
|
182
204
|
}
|
|
183
205
|
}
|
|
184
|
-
})
|
|
206
|
+
})
|
|
185
207
|
|
|
186
|
-
grunt.registerTask(
|
|
187
|
-
grunt.registerTask(
|
|
208
|
+
grunt.registerTask('lint', ['scsslint', 'standard'])
|
|
209
|
+
grunt.registerTask('icons', ['newer:svgmin', 'svgstore'])
|
|
188
210
|
|
|
189
|
-
grunt.registerTask(
|
|
211
|
+
grunt.registerTask('build', ['sass', 'sassdoc', 'copy', 'concat:ustyle', 'uglify:ustyle', 'concat:app', 'lint', 'postcss', 'styleguide', 'builder'])
|
|
190
212
|
|
|
191
|
-
grunt.registerTask(
|
|
213
|
+
grunt.registerTask('publish', ['env:build', 'build', 'buildcontrol:pages'])
|
|
192
214
|
|
|
193
|
-
grunt.registerTask(
|
|
215
|
+
grunt.registerTask('publish:version', 'Build and publish ustyle version', function (version) {
|
|
194
216
|
if (version === null) {
|
|
195
|
-
grunt.warn(
|
|
217
|
+
grunt.warn('Version must be specified when publishing ustyle')
|
|
196
218
|
}
|
|
197
219
|
|
|
198
|
-
grunt.task.run(
|
|
199
|
-
})
|
|
220
|
+
grunt.task.run('env:build', 'version::' + version, 'build', 'shell:publish', 'buildcontrol:pages')
|
|
221
|
+
})
|
|
200
222
|
|
|
201
|
-
grunt.registerTask(
|
|
202
|
-
}
|
|
223
|
+
grunt.registerTask('default', ['env:dev', 'build', 'browserSync-init', 'watch'])
|
|
224
|
+
}
|
data/README.md
CHANGED
|
@@ -11,7 +11,9 @@ This project is provided as is and is aimed at building uSwitch specific project
|
|
|
11
11
|
* [Installation](#installation)
|
|
12
12
|
* [Sinatra](#sinatra)
|
|
13
13
|
* [Usage](#usage)
|
|
14
|
-
* [
|
|
14
|
+
* [Rails / Sprockets apps](#rails--sprockets-apps)
|
|
15
|
+
* [Node apps](#node-apps)
|
|
16
|
+
* [Mixins/Variables](#mixins--variables)
|
|
15
17
|
* [Development](#development)
|
|
16
18
|
* [Contributing](#contributing)
|
|
17
19
|
|
|
@@ -52,10 +54,8 @@ And then run in your terminal:
|
|
|
52
54
|
|
|
53
55
|
$ bundle
|
|
54
56
|
|
|
55
|
-
|
|
56
57
|
### Sinatra
|
|
57
58
|
|
|
58
|
-
|
|
59
59
|
Add to your Gemfile:
|
|
60
60
|
``` ruby
|
|
61
61
|
gem 'sprockets'
|
|
@@ -79,12 +79,12 @@ uStyle serves it's icons via `<use xlink:href></use>` tags within an SVG. We hav
|
|
|
79
79
|
|
|
80
80
|
Due to this, you need to have the `icons.svg` symbol map on the same domain, protocol and port as your application. To facilite this without serving a sprockets asset, ustyle comes with some `Rack Middleware`
|
|
81
81
|
|
|
82
|
-
For
|
|
82
|
+
For Rails apps, in your `development.rb` file (you do not want this in production)
|
|
83
83
|
```ruby
|
|
84
84
|
config.middleware.use Ustyle::IconMiddleware
|
|
85
85
|
```
|
|
86
86
|
|
|
87
|
-
For
|
|
87
|
+
For Rack apps (including Sinatra)
|
|
88
88
|
```ruby
|
|
89
89
|
configure :development do
|
|
90
90
|
use Ustyle::IconMiddleware
|
|
@@ -113,7 +113,9 @@ You can then successfully reference your icon like so:
|
|
|
113
113
|
|
|
114
114
|
## Usage
|
|
115
115
|
|
|
116
|
-
|
|
116
|
+
### Rails / Sprockets apps
|
|
117
|
+
|
|
118
|
+
If using Rails and Sass, just import the base uSwitch styles at the start of your file
|
|
117
119
|
|
|
118
120
|
```scss
|
|
119
121
|
@import "ustyle";
|
|
@@ -121,27 +123,49 @@ If using rails and SASS, just import the base uSwitch styles at the start of you
|
|
|
121
123
|
|
|
122
124
|
This will import the main components. If you want more granular control of what to import, please look at the source code or the styleguide.
|
|
123
125
|
|
|
126
|
+
### Node apps
|
|
127
|
+
|
|
128
|
+
uStyle comes with JavaScript implementations of the custom Sass Ruby functions used by Sprockets. To use uStyle's mixins and variables within your own Sass, you'll need to add these functions to the compiler you're using. For example, using [node-sass](https://github.com/sass/node-sass) in a project that also has [Webpack](https://webpack.js.org/), you can do the following:
|
|
129
|
+
|
|
130
|
+
```javascript
|
|
131
|
+
// In your webpack.config.js
|
|
132
|
+
|
|
133
|
+
import { SassHelpers } from 'ustyle';
|
|
134
|
+
|
|
135
|
+
module.exports = {
|
|
136
|
+
// ...
|
|
137
|
+
module: {
|
|
138
|
+
rules: [
|
|
139
|
+
// ...
|
|
140
|
+
{
|
|
141
|
+
test: /.scss$/,
|
|
142
|
+
use: [{
|
|
143
|
+
loader: 'sass-loader',
|
|
144
|
+
options: {
|
|
145
|
+
functions: SassHelpers
|
|
146
|
+
}
|
|
147
|
+
}]
|
|
148
|
+
}
|
|
149
|
+
// ...
|
|
150
|
+
]
|
|
151
|
+
}
|
|
152
|
+
// ...
|
|
153
|
+
};
|
|
154
|
+
```
|
|
155
|
+
|
|
124
156
|
### Mixins / Variables
|
|
125
157
|
|
|
126
|
-
|
|
158
|
+
uStyle comes bundled with a good set of Sass variables and mixins to use in your project.
|
|
127
159
|
|
|
128
160
|
For Sass documentation on mixins/variables available to you, please see: https://ustyle.guide/sass/
|
|
129
161
|
|
|
130
162
|
## Development
|
|
131
163
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
To install development
|
|
135
|
-
|
|
136
|
-
$ npm install -g grunt-cli
|
|
137
|
-
$ npm install
|
|
138
|
-
$ bundle
|
|
139
|
-
|
|
140
|
-
To run in development, just run
|
|
164
|
+
To preview changes that you make to uStyle's components and documentation, run:
|
|
141
165
|
|
|
142
|
-
|
|
166
|
+
$ npm start
|
|
143
167
|
|
|
144
|
-
This will
|
|
168
|
+
This will run the [Grunt](http://gruntjs.com/) default task that builds uStyle, then starts a [Browsersync](https://www.browsersync.io/) server at http://localhost:3000. Changes that you make are live-reloaded in your browser.
|
|
145
169
|
|
|
146
170
|
## Contributing
|
|
147
171
|
|
|
@@ -149,6 +173,6 @@ See [CONTRIBUTING.md](https://github.com/uswitch/ustyle/blob/master/CONTRIBUTING
|
|
|
149
173
|
|
|
150
174
|
## Licences
|
|
151
175
|
|
|
152
|
-
- Source code is
|
|
153
|
-
- All icons, except the uSwitch icon are
|
|
154
|
-
- uSwitch icon is
|
|
176
|
+
- Source code is licensed under the Apache v2.0 licence
|
|
177
|
+
- All icons, except the uSwitch icon are licensed under [CC - Attribution - No Derivatives 4.0](http://creativecommons.org/licenses/by-nd/4.0/)
|
|
178
|
+
- uSwitch icon is licensed under [CC - Attribution - NonCommercial - NoDerivates 4.0](http://creativecommons.org/licenses/by-nc-nd/4.0/)
|