Skip to content

Commit 43d9f48

Browse files
palmenhqrbrtsmith
palmenhq
authored and
rbrtsmith
committed
Changeable breakpoint class (\@) (#3)
* Make it possible to change the '@' sign to something else * Add documentation * Update readme
1 parent e9ee8ee commit 43d9f48

10 files changed

+30
-25
lines changed

‎README.md

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* `yarn add nebula-css` / [Get started](#get-started)
66
* Check out [Nebula-CSS React Starter](https://github.com/rbrtsmith/nebula-css-react-starter) to see how this can be integrated into a ReactJS project.
77

8-
Super low-level mobile-first Sass framework using the [ITCSS](https://www.youtube.com/watch?v=1OKZOV-iLj4) architecture and the [BEM(IT)](http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/) naming convention.
8+
Super low-level mobile-first Sass framework using the [ITCSS](https://www.youtube.com/watch?v=1OKZOV-iLj4) architecture and the [BEM(IT)](http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/) naming convention.
99

1010
Rather than using 'semantic classnames' that some other frameworks push, the classnames employed in Nebula explicitly describe the underlying architecture.
1111
This makes it *much* easier to reason about the CSS structure from your HTML, promotes code re-use and composition; which otherwise would all be severely hindered if classnames were closely coupled with content.
@@ -109,15 +109,15 @@ Having a deep knowledge of Sass is not required to consume Nebula CSS, but a fam
109109

110110
**This document assumes you have [NodeJS](https://nodejs.org/en/) installed on your machine.**
111111

112-
Nebula's source code does not include any vendor prefixes. This gives you the freedom to configure [Autoprefixer](https://github.com/postcss/autoprefixer) to the browsers that you intend to support.
112+
Nebula's source code does not include any vendor prefixes. This gives you the freedom to configure [Autoprefixer](https://github.com/postcss/autoprefixer) to the browsers that you intend to support.
113113
This can be ran directly in NPM scripts as you can see happening in this projects [package.json](https://github.com/rbrtsmith/nebula-css/blob/master/package.json#L9). Alternatively you can run this in your build-tool of choice.
114114

115115

116116
## Get Started
117117
1. `yarn add nebula-css` OR `npm i -S nebula-css`
118118
2. Setup an ITCSS file structure:
119119
1. `cd` into the directory where you intend to build out your ITCSS structure.
120-
2. Paste the following snippet into your terminal:
120+
2. Paste the following snippet into your terminal:
121121
*— Windows users will have to manually create and populate the files.*
122122

123123
```
@@ -266,6 +266,10 @@ Base font-sizing for body copy.
266266
```sass
267267
$nb-base-font-size: 1rem !default;
268268
```
269+
The delimiter to use for responsive variations of classes. Default `@`. (Can be changed to i.e. `-bp-` to allow CSS modules' `composes:` as that doesn't work with `@` in class names)
270+
```sass
271+
$nb-breakpoint-class: '\\@' !default;
272+
```
269273
Breakpoints using a Sass Map. the keys `sm`, `md` are used to generate the responsive classnames. Being a Sass map it is possible to add or remove breakpoints and of course you can change the values.
270274
```sass
271275
$nb-breakpoints: (
@@ -274,7 +278,7 @@ $nb-breakpoints: (
274278
lg: 1200px
275279
) !default;
276280
```
277-
The root font-sizing set as a percentage on the `<html>` element.
281+
The root font-sizing set as a percentage on the `<html>` element.
278282
The key `default` being the initial sizing up until the key matching the `$nb-breakpoints` key. In this case `sm` So screens larger than 720px will get 100% root-font sizing. Those smaller will receive 90%.
279283
```sass
280284
$nb-root-sizing: (
@@ -434,7 +438,7 @@ The following CSS classnames would be generated:
434438
.o-bare-list--spaced-lg\@myKey {}
435439
```
436440

437-
As we can see in these examples the `@` symbol denotes that this class applies to a particular breakpoint, the chars after should map directly to a key in `$nb-breakpoints`.
441+
As we can see in these examples the `@` symbol denotes that this class applies to a particular breakpoint, the chars after should map directly to a key in `$nb-breakpoints`.
438442
Also note that the `@` symbol here is escaped, this is because symbols like `@` are not strictly valid CSS selectors so they must be escaped. However you don't need to do this when defining your classnames in your HTML.
439443

440444
Nebula CSS also provides you with a mixin that can be use to interface with the defined breakpoints: `nb-respond-to()` This mixin accepts a string argument. The string should match one of the maps in `nb-breakpoints`. e.g.

‎nebula-css/_settings.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ $nb-spacing-unit: 1rem !default;
66
$nb-spacing-unit-half: ($nb-spacing-unit / 2) !default;
77
$nb-spacing-unit-double: ($nb-spacing-unit * 2) !default;
88

9+
$nb-breakpoint-class: '\\@' !default;
910
$nb-breakpoints: (
1011
xs: 480px,
1112
sm: 720px,

‎nebula-css/objects/_flag.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,24 +57,24 @@
5757

5858
@each $bp-key, $bp-value in $nb-breakpoints {
5959
@include nb-respond-to(#{$bp-key}) {
60-
.#{$nb-namespace}o-flag\@#{$bp-key} {
60+
.#{$nb-namespace}o-flag#{$nb-breakpoint-class}#{$bp-key} {
6161
display: table;
6262
}
6363

64-
.#{$nb-namespace}o-flag\@#{$bp-key} > .#{$nb-namespace}o-flag__body,
65-
.#{$nb-namespace}o-flag\@#{$bp-key} > .#{$nb-namespace}o-flag__component {
64+
.#{$nb-namespace}o-flag#{$nb-breakpoint-class}#{$bp-key} > .#{$nb-namespace}o-flag__body,
65+
.#{$nb-namespace}o-flag#{$nb-breakpoint-class}#{$bp-key} > .#{$nb-namespace}o-flag__component {
6666
display: table-cell;
6767
}
6868

6969

7070
@each $key, $value in $nb-flag-gutter-sizes {
7171
// deep nesting required
7272
/* stylelint-disable max-nesting-depth */
73-
.#{$nb-namespace}o-flag\@#{$bp-key}.#{$nb-namespace}o-flag--gutter-#{$key}.#{$nb-namespace}o-flag--reverse > .#{$nb-namespace}o-flag__component {
73+
.#{$nb-namespace}o-flag#{$nb-breakpoint-class}#{$bp-key}.#{$nb-namespace}o-flag--gutter-#{$key}.#{$nb-namespace}o-flag--reverse > .#{$nb-namespace}o-flag__component {
7474
padding-left: $nb-spacing-unit;
7575
}
7676

77-
.#{$nb-namespace}o-flag\@#{$bp-key}.#{$nb-namespace}o-flag--gutter-#{$key}:not(.#{$nb-namespace}o-flag--reverse) > .#{$nb-namespace}o-flag__component {
77+
.#{$nb-namespace}o-flag#{$nb-breakpoint-class}#{$bp-key}.#{$nb-namespace}o-flag--gutter-#{$key}:not(.#{$nb-namespace}o-flag--reverse) > .#{$nb-namespace}o-flag__component {
7878
padding-right: $nb-spacing-unit;
7979
}
8080
/* stylelint-enable */

‎nebula-css/tools/_gutters.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@
2626

2727
@each $bp-key, $bp-value in $nb-breakpoints {
2828
@include nb-respond-to($bp-key) {
29-
#{$matrix-class}.#{$nb-namespace}o-grid--gutter#{$size-key}\@#{$bp-key} {
29+
#{$matrix-class}.#{$nb-namespace}o-grid--gutter#{$size-key}#{$nb-breakpoint-class}#{$bp-key} {
3030
margin-#{$side}: -$size-value;
3131
}
3232

33-
#{$matrix-class}.#{$nb-namespace}o-grid--gutter#{$size-key}\@#{$bp-key} > .#{$nb-namespace}o-grid__item {
33+
#{$matrix-class}.#{$nb-namespace}o-grid--gutter#{$size-key}#{$nb-breakpoint-class}#{$bp-key} > .#{$nb-namespace}o-grid__item {
3434
padding-#{$side}: $size-value;
3535
}
3636

37-
.#{$nb-namespace}o-grid__item > #{$matrix-class}.#{$nb-namespace}o-grid--gutter#{$size-key}\@#{$bp-key} {
37+
.#{$nb-namespace}o-grid__item > #{$matrix-class}.#{$nb-namespace}o-grid--gutter#{$size-key}#{$nb-breakpoint-class}#{$bp-key} {
3838
width: calc(100% + #{$size-value});
3939
}
4040
}

‎nebula-css/tools/_hidden.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@mixin nb-hidden() {
22
@each $bp-key, $bp-value in $nb-breakpoints {
33
@include nb-respond-to($bp-key) {
4-
.#{$nb-namespace}u-hidden\@#{$bp-key} {
4+
.#{$nb-namespace}u-hidden#{$nb-breakpoint-class}#{$bp-key} {
55
display: none !important;
66
}
77
}
88
@include nb-respond-to('max-#{$bp-key}') {
9-
.#{$nb-namespace}u-hidden\@max-#{$bp-key} {
9+
.#{$nb-namespace}u-hidden#{$nb-breakpoint-class}max-#{$bp-key} {
1010
display: none !important;
1111
}
1212
}

‎nebula-css/tools/_list-spacing.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@
1717

1818
@each $bp-key, $bp-value in $nb-breakpoints {
1919
@include nb-respond-to($bp-key) {
20-
.#{$compound-class}\@#{$bp-key} {
20+
.#{$compound-class}#{$nb-breakpoint-class}#{$bp-key} {
2121
margin-#{$side}: -$value;
2222
}
2323

24-
.#{$compound-class}\@#{$bp-key} > .#{$nb-namespace}o-#{$class}__item {
24+
.#{$compound-class}#{$nb-breakpoint-class}#{$bp-key} > .#{$nb-namespace}o-#{$class}__item {
2525
padding-#{$side}: $value;
2626
}
2727
}

‎nebula-css/tools/_offsets.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
@each $key, $value in $fractions {
2626
$modifier: nb-str-replace($key, '/', '\\/');
2727
$offset-value: (($value * 100) * 1%);
28-
.#{$nb-namespace}u-#{$class}#{$modifier}\@#{$bp-key} {
28+
.#{$nb-namespace}u-#{$class}#{$modifier}#{$nb-breakpoint-class}#{$bp-key} {
2929
#{$property}: $offset-value;
3030
}
3131
}

‎nebula-css/tools/_section.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
@each $bp-key, $bp-value in $nb-breakpoints {
1010
@include nb-respond-to($bp-key) {
11-
.#{$nb-namespace}o-section#{$class}\@#{$bp-key} {
11+
.#{$nb-namespace}o-section#{$class}#{$nb-breakpoint-class}#{$bp-key} {
1212
padding-top: $value;
1313
padding-bottom: $value;
1414
}

‎nebula-css/tools/_spacing.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
@each $bp-key, $bp-value in $nb-breakpoints {
2121
@include nb-respond-to(#{$bp-key}) {
2222
@each $direction in $directions {
23-
.#{$nb-namespace}u-#{$action}#{$direction}-#{$key}\@#{$bp-key} {
23+
.#{$nb-namespace}u-#{$action}#{$direction}-#{$key}#{$nb-breakpoint-class}#{$bp-key} {
2424
#{$property}#{$direction}: $value !important;
2525
}
2626
}
@@ -51,24 +51,24 @@
5151

5252
@each $key, $value in $nb-breakpoints {
5353
@include nb-respond-to(#{$key}) {
54-
.#{$nb-namespace}u-#{$action}\@#{$key} {
54+
.#{$nb-namespace}u-#{$action}#{$nb-breakpoint-class}#{$key} {
5555
#{$property}: 0 !important;
5656
}
5757

5858
@each $direction in $directions {
59-
.#{$nb-namespace}u-#{$action}#{$direction}\@#{$key} {
59+
.#{$nb-namespace}u-#{$action}#{$direction}#{$nb-breakpoint-class}#{$key} {
6060
#{$property}#{$direction}: 0 !important;
6161
}
6262
}
6363
}
6464
$max-key: 'max-' + $key;
6565
@include nb-respond-to(#{$max-key}) {
66-
.#{$nb-namespace}u-#{$action}\@#{$max-key} {
66+
.#{$nb-namespace}u-#{$action}#{$nb-breakpoint-class}#{$max-key} {
6767
#{$property}: 0 !important;
6868
}
6969

7070
@each $direction in $directions {
71-
.#{$nb-namespace}u-#{$action}#{$direction}\@#{$max-key} {
71+
.#{$nb-namespace}u-#{$action}#{$direction}#{$nb-breakpoint-class}#{$max-key} {
7272
#{$property}#{$direction}: 0 !important;
7373
}
7474
}

‎nebula-css/tools/_uniformed-list.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@mixin uniformed-list-properties($bp: null) {
22
$bp-class: '';
33
@if $bp {
4-
$bp-class: '\\@#{$bp}';
4+
$bp-class: '#{$nb-breakpoint-class}#{$bp}';
55
}
66

77
.#{$nb-namespace}o-uniformed-list#{$bp-class} {

0 commit comments

Comments
 (0)