Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fdorantesm/sassoned
Garlic, Onion, Salt & Pepper is a light weight css library to make front-end faster using OOCSS.
https://github.com/fdorantesm/sassoned
bootstrap css css-framework css-library flexbox framework frontend grid helpers library materializecss mixins oocss responsive sass sass-framework sass-library sass-mixins tailwindcss utilities
Last synced: 3 months ago
JSON representation
Garlic, Onion, Salt & Pepper is a light weight css library to make front-end faster using OOCSS.
- Host: GitHub
- URL: https://github.com/fdorantesm/sassoned
- Owner: fdorantesm
- Created: 2018-03-23T19:42:45.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-08-22T03:31:46.000Z (4 months ago)
- Last Synced: 2024-10-08T21:05:06.160Z (3 months ago)
- Topics: bootstrap, css, css-framework, css-library, flexbox, framework, frontend, grid, helpers, library, materializecss, mixins, oocss, responsive, sass, sass-framework, sass-library, sass-mixins, tailwindcss, utilities
- Language: SCSS
- Homepage: https://sassoned.com/
- Size: 1.18 MB
- Stars: 14
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
Awesome Lists containing this project
README
# gosp.css
Garlic, onion, salt and pepper...
## How to use
Within sass project
```
@import "gosp.css/src/gosp";
```
CSS file
```
@import "gosp.css/dist/gosp.min.css";
```
HTML Link Tag
```
;
```
npm
```
npm i gosp.css --save
```
gulpfile.js
```
let gosp = require('gosp.css').includePaths + '/src'
sass({
includePaths: [gosp]
})
```
style.scss
```
@import "gosp";
/*
Your awesome styles
*/
```
## Build
Just compile gosp.scss file.
```
gulp default
```
Without gulp
```
sass src/gosp.scss dist/gosp.css
```
### Anchor
* Remove underline decoration and outline
* Add transition on hover
### Background
* Background color
* Background-size
* Background-position
* Background-attachment
* Background-image
#### Background colors
| Class | Property | Value |
| :-: | :-: | :-: |
|bc0|background-color|#000|
|bc3|background-color|#333|
|bc6|background-color|#666|
|bc9|background-color|#999|
|bcA|background-color|#AAA|
|bcC|background-color|#CCC|
|bcE|background-color|#EEE|
|bcF|background-color|#FFF|
#### Background size
| Class | Property | Value |
| :-: | :-: | :-: |
|bscc|background-size|contain|
|bscv|background-size|cover|
|bsx|background-size|100% 100%|
#### Background position
| Class | Property | Value |
| :-: | :-: | :-: |
|bpbc|background-position|center bottom|
|bpbl|background-position|left bottom|
|bpbr|background-position|right bottom|
|bpcb|background-position|center bottom|
|bpcc|background-position|center center|
|bpcl|background-position|left center|
|bpcr|background-position|right center|
|bpct|background-position|center top|
|bplb|background-position|left bottom|
|bplc|background-position|left center|
|bplt|background-position|left top|
|bprb|background-position|right bottom|
|bprc|background-position|right center|
|bprt|background-position|right top|
|bptc|background-position|center top|
|bptl|background-position|left top|
|bptr|background-position|right top,|
#### Background attachment
| Class | Property | Value |
| :-: | :-: | :-: |
|baf|background-attachment|fixed|
#### Background image
| Class | Property | Value |
| :-: | :-: | :-: |
|biu|background-image|unset|
#### Background repeat
|Class|Property|Value|
|:-:|:-:|:-:|
|brnr|background-repeat|no-repeat|
|brr|background-repeat|repeat|
|brrx|background-repeat|repeat-x|
|brry|background-repeat|repeat-y|
### Box
* Border none
* Box sizing box
* Box content box
### Cursor
| Class | Property | Value |
|:-:|:-:|:-:|
|curd|cursor|default|
|curna|cursor|not-allowed|
|curp|cursor|pointer|
|curt|cursor|text|
|curw|cursor|wait|
### Display
| Class | Property | Value |
|:-:|:-:|:-:|
|db|display|block|
|dfx|display|flex|
|di|display|inline|
|dib|display|inline-block|
|din|display|initial|
|dn|display|none|
|dt|display|table|
|dtc|display|table-cell|
|dtr|display|table-row|
### Flex
* Align
* Grow
* Justify
* Order
* Shrink
* Direction
#### Flex align
|Class|Property|Value|
|:-:|:-:|:-:|
|aic|align-items|center|
|aife|align-items|flex-end|
|aifs|align-items|flex-start|
|aiu|align-items|unset|
|asc|align-self|center|
|asfe|align-self|flex-end|
|asfs|align-self|flex-start|
|asu|align-self|unset|
#### Flex direction
|Class|Property|Value|
|:-:|:-:|:-:|
|fdc|flex-direction|column|
|fdr|flex-direction|row|
|fdcr|flex-direction|column-reverse|
|fdrr|flex-direction|row-reverse|
#### Flex grow
|Class|Property|Value|
|:-:|:-:|:-:|
|fg0|flex-grow|0|
|fg1|flex-grow|1|
|fg2|flex-grow|2|
|fg3|flex-grow|3|
|fg4|flex-grow|4|
|fg5|flex-grow|5|
|fg6|flex-grow|6|
Note: From 0 to $gosp-grid-columns / 2
#### Flex justify
|Class|Property|Value|
|:-:|:-:|:-:|
|jcc|justify-content|center|
|jcs|justify-content|stretch|
|jcu|justify-content|unset|
|jcfe|justify-content|flex-end|
|jcfs|justify-content|flex-start|
|jcsa|justify-content|space-around|
|jcsb|justify-content|space-between|
|jsc|justify-self|center|
|jss|justify-self|stretch|
|jsu|justify-self|unset|
|jsfe|justify-self|flex-end|
|jsfs|justify-self|flex-start|
|jssa|justify-self|space-around|
|jssb|justify-self|space-between|
#### Flex order
|Class|Property|Value|
|:-:|:-:|:-:|
|ord-1|order|-1|
|ord0|order|0|
|ord1|order|1|
|ord2|order|2|
|ord3|order|3|
|ord4|order|4|
|ord5|order|5|
|ord6|order|6|
|ord7|order|7|
|ord8|order|8|
|ord9|order|9|
|ord10|order|10|
|ord11|order|11|
|ord12|order|12|
#### Flex shrink
|Class|Property|Value|
|:-:|:-:|:-:|
|fsh0|flex-shrink|0|
|fsh1|flex-shrink|1|
|fsh2|flex-shrink|2|
|fsh3|flex-shrink|3|
|fsh4|flex-shrink|4|
|fsh5|flex-shrink|5|
|fsh6|flex-shrink|6|
Note: From 0 to $gosp-grid-columns / 2
#### Flex wrap
|Class|Property|Value|
|:-:|:-:|:-:|
|fwnw|flex-wrap|no-wrap|
|fww|flex-wrap|wrap|
|fwwr|flex-wrap|wrap-reverse|
### Floats
|Class|Property|Value|
|:-:|:-:|:-:|
|fl|float|left|
|fn|float|none|
|fr|float|right|
|fu|float|unset|
### Font
|Prefix class|Property|Unit|From|To|Gap|
|:-:|:-:|:-:|:-:|:-:|:-:|
|fsp|font-size|px|8|48|2|
|fsp|font-size|px|50|100|10|
|fse|font-size|em|0.5|3|0.25|
|fsr|font-size|rem|0.5|3|0.25|
|Class|Property|Value|
|:-:|:-:|:-:|
|fw100|font-weight|100|
|fw200|font-weight|200|
|fw300|font-weight|300|
|fw400|font-weight|400|
|fw500|font-weight|500|
|fw600|font-weight|600|
|fw700|font-weight|700|
|fw800|font-weight|800|
|fw900|font-weight|900|
|b|font-weight|bold|
|l|font-weight|lighter|
|n|font-weight|normal|
|i|font-style|italic|
|o|font-style|oblique|
### Form
* Custom select with angle-down
* Outline 0 on each form control
### Generals
|Class|Property|Value|
|:-:|:-:|:-:|
|fw|width|100%|
|w100vw|width|100vw|
### Grid
|Type|Description|Nested|Offset|Pull|Push|
|:-:|:-|:-:|:-:|:-:|:-:|
|Flex| Based on flexboxgrid)| Yes | Yes | Yes | Yes
|Float| Based on twbs bootstrap)| Yes | Yes | Yes | Yes
|Inline| Same as bootstrap but using inline-block)| Yes | Yes | Yes | Yes
|Fractionary| Using fractions like col-md-1-2 eq col-md-6 based on wp grid by Ricardo Aguirre)| Yes | Yes | Yes | Yes
Note: You can order flex columns using order classes and order media helpers.
### Height
|Class|Property|Value|
|:-:|:-:|:-:|
|h0|height|0|
|h25p|height|25%|
|h50p|height|50%|
|h75p|height|75%|
|h100p|height|100%|
|Prefix class|Property|Unit|From|To|Gap|
|:-:|:-:|:-:|:-:|:-:|:-:|
|h|height|px|0|45|5|
|h|height|px|50|90|10|
|h|height|px|100|500|50|
### List
|Class|Description|
|:-:|:-:|
|list-reset| Sets margin and padding to 0 and list-style to none |
|list-inline| Displays list items as inline-block |
|list-block| Displays list items as block |
|Class|Property|Value|
|:-:|:-:|:-:|
|list-columns-1|columns|1|
|list-columns-2|columns|2|
|list-columns-3|columns|3|
|list-columns-4|columns|4|
|list-columns-5|columns|5|
|list-columns-6|columns|6|
Note: From 1 to $gosp-grid-columns / 2
|Class|Property|Value|
|:-:|:-:|:-:|
|lsd|list-style|decimal|
|lsdlz|list-style|decimal-leading-zero|
|lsla|list-style|lower-alpha|
|lslr|list-style|lower-roman|
|lsua|list-style|upper-alpha|
|lsur|list-style|upper-roman|
### Margin and padding
|Prefix class|Property|Unit|From|To|Gap|
|:-:|:-:|:-:|:-:|:-:|:-:|
|m|margin|px|0|50|5|
|mt|margin-top|px|0|50|5|
|mr|margin-right|px|0|50|5|
|mb|margin-bottom|px|0|50|5|
|ml|margin-left|px|0|50|5|
|p|padding|px|0|50|5|
|pt|padding-top|px|0|50|5|
|pr|padding-right|px|0|50|5|
|pb|padding-bottom|px|0|50|5|
|pl|padding-left|px|0|50|5|
### Position
|Prefix class|Property|Unit|From|To|Gap|
|:-:|:-:|:-:|:-:|:-:|:-:|
|t|top|px|0|50|5|
|r|right|px|0|50|5|
|b|bottom|px|0|50|5|
|l|left|px|0|50|5|
|Class|Property|Value|
|:-:|:-:|:-:|
|pa|position|absolute|
|pf|position|fixed|
|pr|position|relative|
|ps|position|static|
|psy|position|sticky|
|pu|position|unset|
|Class|Description|
|:-:|:-:|
|abs|Creates a layer with the same width and height over the parent element|
### Show and hide
|Class|
|:-:|
|hide|
|hide-[media-query]|
|hide-[media-query]|
|hide-[media-query]|
|hide-[media-query]-below|
|hide-[media-query]-above|
|hide-[media-query]|
|show|
|show-[media-query]|
|show-[media-query]|
|show-[media-query]|
|show-[media-query]-below|
|show-[media-query]-above|
|show-[media-query]|
### Table
|Class| Description|
|:-:|:-|
|Collapsed| Border collapsed|
|Fixed| Columns with the same width|
|Responsive| Table rows to columns under sm size|
|Striped| Even rows with light gray background|
### Text
|Class|Property|Value|
|:-:|:-:|:-:|
|tac|text-align|center|
|taj|text-align|justify|
|tal|text-align|left|
|tar|text-align|right|
|tdlt|text-decoration|line-through|
|tdo|text-decoration|overline|
|tdou|text-decoration|underline overline|
|tdu|text-decoration|underline|
|tduo|text-decoration|underline overline|
|tduos|text-decoration|underline overline line-through|
|tduso|text-decoration|underline overline line-through|
|tdous|text-decoration|underline overline line-through|
|tdosu|text-decoration|underline overline line-through|
|tdsou|text-decoration|underline overline line-through|
|tdsuo|text-decoration|underline overline line-through|
|ttc|text-transform|capitalize|
|ttl|text-transform|lowercase|
|ttn|text-transform|none|
|ttu|text-transform|uppercase|
|tdsda|text-decoration-style|dashed|
|tdsdo|text-decoration-style|dotted|
|tdss|text-decoration-style|solid|
|tdsw|text-decoration-style|wavy|
|tdi|text-direction|initial|
|tdl|text-direction|ltr|
|tdr|text-direction|rtl|
|Class|Description|
|:-:|:-|
|paragraph-reset| Sets margin to 0|
### Vertial align
|Class|Property|Value|
|:-:|:-:|:-:|
|vab|vertical-align|bottom|
|vabl|vertical-align|baseline|
|vainh|vertical-align|inherit|
|vam|vertical-align|middle|
|vasub|vertical-align|sub|
|vasup|vertical-align|super|
|vat|vertical-align|top|
|vatb|vertical-align|text-bottom|
|vatt|vertical-align|text-top|
### Visibility
|Class|Property|Value|
|:-:|:-:|:-:|
vc|visibility|collapse|
vh|visibility|hidden|
vu|visibility|unset|
vv|visibility|visible|
### Z Index
| Index | Elements |
| :-: | :-:|
| -1 | Any |
| 1 | Any |
| 10 | Fixed |
| 100 | Dialog |
| 1000 | Fullscreen layers |
### Breakpoints
| Size | Min | Max | Prefix |
| :-: | :-:| :-: | :-: |
| xs | | 480px| .col-xs |
| sm | 481px | 768px | .col-sm |
| md | 769px | 1280px | .col-md |
| lg | 1281px| 1600px | .col-lg |
| xl | 1601px | col-xl | .col-xl |
### Media queries
| Size | Mixin |
| :-: | :-:
| xs | xs() |
| sm | sm() |
| sm-down | sm-down() |
| sm-up | sm-up() |
| md | md() |
| md-down | md-down() |
| md-up | md-up() |
| lg | lg() |
| lg-down | lg-down() |
| lg-up | lg-up() |
| xl | xl() |
Example:
@include sm-up {
// rules
}
### Media helpers
This classes will be able to change property-value classes in each display resolution. Remember mobile first.
##### {size}-{key}{val}
* Margin
* Padding
* Font size (px, em, rem)
* Position
* Text align
* List columns
* Hide and show
| Property | Value| Helper class | Responsive helper |
| :-: | :-:| :-:| :-:|
| Margin | From 0 to 50 | m50 | md-m50 |
| Margin top| From 0 to 50 | mt50 | md-mt50 |
| Margin right| From 0 to 50 | mr50 | md-mr50 |
| Margin left| From 0 to 50 | ml50 | md-ml50 |
| Margin bottom| From 0 to 50 | mb50 | md-mb50 |
| Padding | From 0 to 50 | p50 | md-p50 |
| Padding top| From 0 to 50 | pt50 | md-pt50 |
| Padding right| From 0 to 50 | pr50 | md-pr50 |
| Padding left| From 0 to 50 | pl50 | md-pl50 |
| Padding bottom| From 0 to 50 | pb50 | md-pb50 |
| Font size | From 8 to 48 | fsp16 | md-fsp16 |
| Font size | From 50 to 100 | fsp60 | xs-fsp20 |
|Class| Responsive class| Description|
|:-:|:-:|:-|
|list-inline| [media-query]-list-inline|Displays list items as inline-block |
|list-block| [media-query]-list-block|Displays list items as block |
### Credits
* Flexboxgrid: Thanks to @kristoferjoseph https://github.com/kristoferjoseph/flexboxgrid
* Bootstrap: Thanks to Twitter https://github.com/twbs/bootstrap
* RicAg
* @escueladigital: em and rem functions from ED-Grid https://github.com/escueladigital/EDgrid
### Changelog
* Rebuilt lib using sass with scss syntax
* Removed color palette mixin
* Added xl media size
* Added auto column
* Added flex push and pull
* Added list-inline and list-block helpers and responsive helpers
* Changed size readme prefix to media-query
* node_module bug
* Restores `.list-reset` class
* Added functions import to media