north 0.3.0 → 0.3.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +60 -2
- data/lib/north.rb +1 -1
- data/north/north/_helpers.scss +9 -2
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 93d894b2a4ac2e8afa1d467808e152996ea6bd98
|
4
|
+
data.tar.gz: 0b6c9532a0c8c5577f130a08d6d93f79c44e3011
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: a888a307a7a62194872055feeb77efdf189a335af41f978fbb9f7d6c1f6066b1e1cb098fbfa9844bb11e49aff58f80c149198fc2df22ca1dd7df72f792d920d9
|
7
|
+
data.tar.gz: 71d2f9ef69649d81dd08d013e5ac3a4a5ae3e44a0ab1a0cf8fe8aabf07767ac81da140ad7d6b9db58b8f2c9cefb9c190cf0a4bebcac145bf951906ce818eaba0
|
data/README.md
CHANGED
@@ -1339,14 +1339,72 @@ When building site, very often a point will come when a decision must be made as
|
|
1339
1339
|
|
1340
1340
|
There have been a handful of tools that have been created in order to assist in working with the North standards, making building awesome things easier.
|
1341
1341
|
|
1342
|
-
##
|
1342
|
+
## North Sass Plugin
|
1343
|
+
|
1344
|
+
Available both as a [Bower](http://bower.io/) component (`bower install north --save-dev`) or as a Compass extension (`gem 'north', '~> 0.3.1'` in your [Gemfile](http://bundler.io/)), the North Sass plugin is designed to make working with North's [CSS Naming Conventions](#css-naming-conventions) easy. The North Sass Plugin requires at least *Sass 3.3*. Simply import into a project and have the following mixins and functions available for use:
|
1345
|
+
|
1346
|
+
#### component($name)
|
1347
|
+
#### @include component($name) { @content }
|
1348
|
+
#### @include components($names...) { @content }
|
1349
|
+
|
1350
|
+
#### layout($name)
|
1351
|
+
#### @include layout($name) { @content }
|
1352
|
+
#### @include layoutss($names...) { @content }
|
1353
|
+
|
1354
|
+
#### aspect($name)
|
1355
|
+
#### @include aspect($name) { @content }
|
1356
|
+
#### @include aspects($names...) { @content }
|
1357
|
+
|
1358
|
+
#### element($name)
|
1359
|
+
#### @include element($name) { @content }
|
1360
|
+
#### @include elements($names...) { @content }
|
1361
|
+
|
1362
|
+
#### state($name)
|
1363
|
+
#### @include state($name) { @content }
|
1364
|
+
#### @include states($names...) { @content }
|
1365
|
+
|
1366
|
+
Each function (save `state`) will return their given part of a selector (`aspect` will only return the capitalized half of a selector, `layout` will only return the lowercased name with leading underscore, etc…). `state` will return a full attribute selector to be used. Mixins must contain content. The plural versions of each mixin allow multiple names to be passed, each getting comma separated in the output. Usage of the mixins can look something like the following:
|
1367
|
+
|
1368
|
+
**Sass**
|
1369
|
+
|
1370
|
+
```scss
|
1371
|
+
.message {
|
1372
|
+
@include aspect(warning) {
|
1373
|
+
background: yellow;
|
1374
|
+
}
|
1375
|
+
@include aspect(error) {
|
1376
|
+
background: red;
|
1377
|
+
}
|
1378
|
+
|
1379
|
+
@include element(title) {
|
1380
|
+
font-size: 2em;
|
1381
|
+
}
|
1382
|
+
}
|
1383
|
+
```
|
1384
|
+
|
1385
|
+
**CSS**
|
1386
|
+
|
1387
|
+
```css
|
1388
|
+
.message--WARNING {
|
1389
|
+
background: yellow;
|
1390
|
+
}
|
1391
|
+
.message--ERROR {
|
1392
|
+
background: red;
|
1393
|
+
}
|
1394
|
+
.message--title {
|
1395
|
+
font-size: 2em;
|
1396
|
+
}
|
1397
|
+
```
|
1343
1398
|
|
1344
|
-
[Intake.Center](https://github.com/Snugug/intake) is a webapp developed to assist with [role definitions](https://github.com/Snugug/north#roles-and-responsibilities) and [content strategy](https://github.com/Snugug/north#content-strategy). It includes tools for developing and recording [project vision](#project-vision), [user personas](#user-personas), and [content models](#content-modeling) based on [Schema.org](http://schema.org/) schemas. [Content inventory](#content-inventory) and [audit](#content-audit) should be performed before modeling takes place.
|
1345
1399
|
|
1346
1400
|
## Generator North
|
1347
1401
|
|
1348
1402
|
[Generator North](https://github.com/Snugug/generator-north) is a [Yeoman](http://yeoman.io/) generator designed to quickly spin up new North based projects, including integrations with [Sass and Compass](#sass-and-compass), [Bower](http://bower.io/), and [JSHint](http://www.jshint.com/), with an option to include [BrowserSync](http://browsersync.io/) server and live reloading. Either [Grunt](http://gruntjs.com/) or [Gulp](http://gulpjs.com/) can be chosen as a task runner. Generator North also provides an easy way scaffold out new components and layouts, reducing the overhead needed to create each new component or layout.
|
1349
1403
|
|
1404
|
+
## Intake Center
|
1405
|
+
|
1406
|
+
[Intake.Center](https://github.com/Snugug/intake) is a webapp developed to assist with [role definitions](https://github.com/Snugug/north#roles-and-responsibilities) and [content strategy](https://github.com/Snugug/north#content-strategy). It includes tools for developing and recording [project vision](#project-vision), [user personas](#user-personas), and [content models](#content-modeling) based on [Schema.org](http://schema.org/) schemas. [Content inventory](#content-inventory) and [audit](#content-audit) should be performed before modeling takes place.
|
1407
|
+
|
1350
1408
|
|
1351
1409
|
# License and Acknowledgements
|
1352
1410
|
|
data/lib/north.rb
CHANGED
data/north/north/_helpers.scss
CHANGED
@@ -15,8 +15,15 @@
|
|
15
15
|
}
|
16
16
|
}
|
17
17
|
@each $name in $names {
|
18
|
-
|
19
|
-
|
18
|
+
@if $type == 'state' {
|
19
|
+
&#{call($type, $name)} {
|
20
|
+
@extend %#{$extend};
|
21
|
+
}
|
22
|
+
}
|
23
|
+
@else {
|
24
|
+
&--#{call($type, $name)} {
|
25
|
+
@extend %#{$extend};
|
26
|
+
}
|
20
27
|
}
|
21
28
|
}
|
22
29
|
}
|