https://github.com/kgcreative/neat-omega
An omega mixin family for Neat 2.x
https://github.com/kgcreative/neat-omega
bourbon grid-layout neat omega
Last synced: 6 months ago
JSON representation
An omega mixin family for Neat 2.x
- Host: GitHub
- URL: https://github.com/kgcreative/neat-omega
- Owner: kgcreative
- License: mit
- Created: 2017-02-17T19:23:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-04-22T22:24:50.000Z (about 6 years ago)
- Last Synced: 2024-12-10T15:56:38.216Z (6 months ago)
- Topics: bourbon, grid-layout, neat, omega
- Language: CSS
- Homepage:
- Size: 37.1 KB
- Stars: 8
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license.md
Awesome Lists containing this project
README
# Neat-Omega Family for Bourbon Neat (3.x.x+)
The Omega family is a group of mixins that accomplish several supplemental goals within the Bourbon-Neat framework.
Originally created to address: https://github.com/thoughtbot/neat/issues/543
# Install
## with NPM
- `npm install --save neat-omega`
- add `@import neat-omega` after your `@import neat` statement in your scss.
- add `node_modules/neat-omega/core` to your sass import paths.
## with Bower
- `bower install neat-omega`
- add `@import neat-omega` after your `@import neat` statement in your scss.
- add `bower_components/neat-omega/core` to your sass import paths.
## with Bundler
- add `gem "neat-omega"` to Gemfile
- add `@import neat-omega` after your `@import neat` statement in your scss.
# Documentation
## alpha
`@include alpha($selector: self, $grid: $neat-grid)`
- Clears the float on the specified selector. Generally this is the first item in a new row.
example SCSS
```SCSS
.element:nth-child(3n+1) {
@include alpha;
}
```
example CSS
```CSS
.element:nth-child(3n+1) {
clear: left;
}
```
---
example SCSS
```SCSS
.last-element {
@include alpha('&:last-child');
}
```
example CSS
```CSS
.last-element:last-child {
clear: left;
}
```
---
example SCSS
```SCSS
@include alpha('.custom:nth-child(3n+2)');
```
example CSS
```CSS
.custom:nth-child(3n+2) {
clear: left;
}
```
## nth-alpha
`@include nth-alpha($selector, $grid: $neat-grid)`
- Clears the float on the specified `nth-of-type` selector. This is mostly for convenience, since you can achieve the same result with `alpha`
example SCSS
```SCSS
.nth-element {
@include nth-alpha(4n+1);
}
```
example CSS
```CSS
.nth-element:nth-of-type(4n+1) {
clear: left;
}
```
## omega
`@include omega($selector: self, $grid: $neat-grid)`
- Adds a margin-right to the specified selector. Generally this is only needed for centered flex layouts.
example SCSS
```SCSS
@include omega('.element:nth-of-type(3n+2)');
```
example CSS
```CSS
.element:nth-of-type(3n+2) {
margin-right: 20px;
}
```
---
example SCSS
```SCSS
element {
@include omega('&:nth-of-type(3n+1)');
}
```
example CSS
```CSS
.element:nth-of-type(3n+1) {
margin-right: 20px;
}
```
## omega-flex
`@include omega-flex($selector: null, $grid: $neat-grid)`
- Adds a margin right to the specified object, or if auto, to the last child of the grid.
example SCSS
```SCSS
.element {
@include omega-flex;
}
```
example CSS
```CSS
.element {
margin-right: 20px;
}
```
---
example SCSS
```SCSS
@include omega-flex('.element:nth-of-type(3n+2)');
```
example CSS
```CSS
@example css - CSS Output
.element:nth-of-type(3n+2) {
margin-right: 20px;
}
```
---
example SCSS
```SCSS
.element {
@include omega-flex('&:nth-of-type(3n+1)');
}
```
example CSS
```CSS
@example css - CSS Output
.element:nth-of-type(3n+1) {
margin-right: 20px;
}
```
---
example SCSS
```SCSS
.element {
@include omega-flex(auto);
}
```
example CSS
```CSS
@example css - CSS Output
.element:last-child {
margin-right: 20px;
}
```
## nth-omega
`@include nth-omega($selector, $grid: $neat-grid)`
- Adds a margin right to the specified `nth-of-type` object, and clears the `nth+1` object. Note that composite arguments such as `2n+1` are not supported by this mixin.
example SCSS
```SCSS
.nth-element {
@include nth-omega(4n);
}
```
example CSS
```CSS
.nth-element:nth-child(4n) {
margin-right: 20px;
}
.nth-element:nth-child(4n+1) {
clear: left;
}
.nth-element:last-child {
margin-right: 20px;
}
```