{"id":15041314,"url":"https://github.com/fdorantesm/sassoned","last_synced_at":"2025-04-14T20:16:48.475Z","repository":{"id":57252543,"uuid":"126531822","full_name":"fdorantesm/sassoned","owner":"fdorantesm","description":"Garlic, Onion, Salt \u0026 Pepper is a light weight css library to make front-end faster using OOCSS.","archived":false,"fork":false,"pushed_at":"2024-08-22T03:31:46.000Z","size":1240,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T20:16:38.314Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://sassoned.com/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fdorantesm.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-23T19:42:45.000Z","updated_at":"2024-08-22T04:04:11.000Z","dependencies_parsed_at":"2024-10-01T03:21:00.260Z","dependency_job_id":"54b1e6e3-cad4-412c-aa2e-83f2028f7e55","html_url":"https://github.com/fdorantesm/sassoned","commit_stats":{"total_commits":133,"total_committers":4,"mean_commits":33.25,"dds":"0.12030075187969924","last_synced_commit":"083e3466a12c078d99c2378f724114651ecd8c84"},"previous_names":["fdorantesm/gosp.css","gosp-project/sassoned"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fdorantesm%2Fsassoned","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fdorantesm%2Fsassoned/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fdorantesm%2Fsassoned/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fdorantesm%2Fsassoned/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fdorantesm","download_url":"https://codeload.github.com/fdorantesm/sassoned/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248952357,"owners_count":21188427,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-09-24T20:45:56.868Z","updated_at":"2025-04-14T20:16:48.448Z","avatar_url":"https://github.com/fdorantesm.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gosp.css\nGarlic, onion, salt and pepper...\n\n## How to use\n\nWithin sass project\n```\n@import \"gosp.css/src/gosp\";\n```\n\nCSS file\n```\n@import \"gosp.css/dist/gosp.min.css\";\n```\n\nHTML Link Tag\n```\n\u003clink rel=\"stylesheet\" href=\"./css/gosp.css/dist/gosp.min.css\" /\u003e;\n```\n\nnpm\n\n```\nnpm i gosp.css --save\n```\n\ngulpfile.js\n```\nlet gosp = require('gosp.css').includePaths + '/src'\n\nsass({\n\tincludePaths: [gosp]\n})\n\n```\n\nstyle.scss\n```\n@import \"gosp\";\n/*\n\tYour awesome styles\n*/\n```\n\n## Build\n\nJust compile gosp.scss file.\n\n```\ngulp default\n```\n\nWithout gulp\n```\nsass src/gosp.scss dist/gosp.css\n```\n\n### Anchor\n*  Remove underline decoration and outline\n*  Add transition on hover\n\n### Background\n* Background color\n* Background-size\n* Background-position\n* Background-attachment\n* Background-image\n\n#### Background colors\n\n| Class | Property | Value |\n| :-: | :-: | :-: |\n|bc0|background-color|#000|\n|bc3|background-color|#333|\n|bc6|background-color|#666|\n|bc9|background-color|#999|\n|bcA|background-color|#AAA|\n|bcC|background-color|#CCC|\n|bcE|background-color|#EEE|\n|bcF|background-color|#FFF|\n\n#### Background size\n| Class | Property | Value |\n| :-: | :-: | :-: |\n|bscc|background-size|contain|\n|bscv|background-size|cover|\n|bsx|background-size|100% 100%|\n\n#### Background position\n| Class | Property | Value |\n| :-: | :-: | :-: |\n|bpbc|background-position|center bottom|\n|bpbl|background-position|left bottom|\n|bpbr|background-position|right bottom|\n|bpcb|background-position|center bottom|\n|bpcc|background-position|center center|\n|bpcl|background-position|left center|\n|bpcr|background-position|right center|\n|bpct|background-position|center top|\n|bplb|background-position|left bottom|\n|bplc|background-position|left center|\n|bplt|background-position|left top|\n|bprb|background-position|right bottom|\n|bprc|background-position|right center|\n|bprt|background-position|right top|\n|bptc|background-position|center top|\n|bptl|background-position|left top|\n|bptr|background-position|right top,|\n\n#### Background attachment\n| Class | Property | Value |\n| :-: | :-: | :-: |\n|baf|background-attachment|fixed|\n\n#### Background image\n| Class | Property | Value |\n| :-: | :-: | :-: |\n|biu|background-image|unset|\n\n#### Background repeat\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|brnr|background-repeat|no-repeat|\n|brr|background-repeat|repeat|\n|brrx|background-repeat|repeat-x|\n|brry|background-repeat|repeat-y|\n\n### Box\n* Border none\n* Box sizing box\n* Box content box\n\n### Cursor\n| Class | Property | Value |\n|:-:|:-:|:-:|\n|curd|cursor|default|\n|curna|cursor|not-allowed|\n|curp|cursor|pointer|\n|curt|cursor|text|\n|curw|cursor|wait|\n\n### Display\n| Class | Property | Value |\n|:-:|:-:|:-:|\n|db|display|block|\n|dfx|display|flex|\n|di|display|inline|\n|dib|display|inline-block|\n|din|display|initial|\n|dn|display|none|\n|dt|display|table|\n|dtc|display|table-cell|\n|dtr|display|table-row|\n\n### Flex\n* Align\n* Grow\n* Justify\n* Order\n* Shrink\n* Direction\n\n#### Flex align\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|aic|align-items|center|\n|aife|align-items|flex-end|\n|aifs|align-items|flex-start|\n|aiu|align-items|unset|\n|asc|align-self|center|\n|asfe|align-self|flex-end|\n|asfs|align-self|flex-start|\n|asu|align-self|unset|\n\n#### Flex direction\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|fdc|flex-direction|column|\n|fdr|flex-direction|row|\n|fdcr|flex-direction|column-reverse|\n|fdrr|flex-direction|row-reverse|\n\n#### Flex grow\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|fg0|flex-grow|0|\n|fg1|flex-grow|1|\n|fg2|flex-grow|2|\n|fg3|flex-grow|3|\n|fg4|flex-grow|4|\n|fg5|flex-grow|5|\n|fg6|flex-grow|6|\n\nNote: From 0 to $gosp-grid-columns / 2\n\n#### Flex justify\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|jcc|justify-content|center|\n|jcs|justify-content|stretch|\n|jcu|justify-content|unset|\n|jcfe|justify-content|flex-end|\n|jcfs|justify-content|flex-start|\n|jcsa|justify-content|space-around|\n|jcsb|justify-content|space-between|\n|jsc|justify-self|center|\n|jss|justify-self|stretch|\n|jsu|justify-self|unset|\n|jsfe|justify-self|flex-end|\n|jsfs|justify-self|flex-start|\n|jssa|justify-self|space-around|\n|jssb|justify-self|space-between|\n\n#### Flex order\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|ord-1|order|-1|\n|ord0|order|0|\n|ord1|order|1|\n|ord2|order|2|\n|ord3|order|3|\n|ord4|order|4|\n|ord5|order|5|\n|ord6|order|6|\n|ord7|order|7|\n|ord8|order|8|\n|ord9|order|9|\n|ord10|order|10|\n|ord11|order|11|\n|ord12|order|12|\n\n#### Flex shrink\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|fsh0|flex-shrink|0|\n|fsh1|flex-shrink|1|\n|fsh2|flex-shrink|2|\n|fsh3|flex-shrink|3|\n|fsh4|flex-shrink|4|\n|fsh5|flex-shrink|5|\n|fsh6|flex-shrink|6|\n\nNote: From 0 to $gosp-grid-columns / 2\n\n#### Flex wrap\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|fwnw|flex-wrap|no-wrap|\n|fww|flex-wrap|wrap|\n|fwwr|flex-wrap|wrap-reverse|\n\n### Floats\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|fl|float|left|\n|fn|float|none|\n|fr|float|right|\n|fu|float|unset|\n\n### Font\n\n|Prefix class|Property|Unit|From|To|Gap|\n|:-:|:-:|:-:|:-:|:-:|:-:|\n|fsp|font-size|px|8|48|2|\n|fsp|font-size|px|50|100|10|\n|fse|font-size|em|0.5|3|0.25|\n|fsr|font-size|rem|0.5|3|0.25|\n\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|fw100|font-weight|100|\n|fw200|font-weight|200|\n|fw300|font-weight|300|\n|fw400|font-weight|400|\n|fw500|font-weight|500|\n|fw600|font-weight|600|\n|fw700|font-weight|700|\n|fw800|font-weight|800|\n|fw900|font-weight|900|\n|b|font-weight|bold|\n|l|font-weight|lighter|\n|n|font-weight|normal|\n|i|font-style|italic|\n|o|font-style|oblique|\n\n### Form\n* Custom select with angle-down\n* Outline 0 on each form control\n\n### Generals\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|fw|width|100%|\n|w100vw|width|100vw|\n\n### Grid\n|Type|Description|Nested|Offset|Pull|Push|\n|:-:|:-|:-:|:-:|:-:|:-:|\n|Flex| Based on flexboxgrid)| Yes | Yes | Yes | Yes\n|Float| Based on twbs bootstrap)| Yes | Yes | Yes | Yes\n|Inline| Same as bootstrap but using inline-block)| Yes | Yes | Yes | Yes\n|Fractionary| Using fractions like col-md-1-2 eq col-md-6 based on wp grid by Ricardo Aguirre)| Yes | Yes | Yes | Yes\n\nNote: You can order flex columns using order classes and order media helpers.\n\n### Height\n\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|h0|height|0|\n|h25p|height|25%|\n|h50p|height|50%|\n|h75p|height|75%|\n|h100p|height|100%|\n\n|Prefix class|Property|Unit|From|To|Gap|\n|:-:|:-:|:-:|:-:|:-:|:-:|\n|h|height|px|0|45|5|\n|h|height|px|50|90|10|\n|h|height|px|100|500|50|\n\n### List\n\n|Class|Description|\n|:-:|:-:|\n|list-reset| Sets margin and padding to 0 and list-style to none |\n|list-inline| Displays list items as inline-block |\n|list-block| Displays list items as block |\n\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|list-columns-1|columns|1|\n|list-columns-2|columns|2|\n|list-columns-3|columns|3|\n|list-columns-4|columns|4|\n|list-columns-5|columns|5|\n|list-columns-6|columns|6|\n\nNote: From 1 to $gosp-grid-columns / 2\n\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|lsd|list-style|decimal|\n|lsdlz|list-style|decimal-leading-zero|\n|lsla|list-style|lower-alpha|\n|lslr|list-style|lower-roman|\n|lsua|list-style|upper-alpha|\n|lsur|list-style|upper-roman|\n\n### Margin and padding\n|Prefix class|Property|Unit|From|To|Gap|\n|:-:|:-:|:-:|:-:|:-:|:-:|\n|m|margin|px|0|50|5|\n|mt|margin-top|px|0|50|5|\n|mr|margin-right|px|0|50|5|\n|mb|margin-bottom|px|0|50|5|\n|ml|margin-left|px|0|50|5|\n|p|padding|px|0|50|5|\n|pt|padding-top|px|0|50|5|\n|pr|padding-right|px|0|50|5|\n|pb|padding-bottom|px|0|50|5|\n|pl|padding-left|px|0|50|5|\n\n### Position\n\n|Prefix class|Property|Unit|From|To|Gap|\n|:-:|:-:|:-:|:-:|:-:|:-:|\n|t|top|px|0|50|5|\n|r|right|px|0|50|5|\n|b|bottom|px|0|50|5|\n|l|left|px|0|50|5|\n\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|pa|position|absolute|\n|pf|position|fixed|\n|pr|position|relative|\n|ps|position|static|\n|psy|position|sticky|\n|pu|position|unset|\n\n|Class|Description|\n|:-:|:-:|\n|abs|Creates a layer with the same width and height over the parent element|\n\n### Show and hide\n|Class|\n|:-:|\n|hide|\n|hide-[media-query]|\n|hide-[media-query]|\n|hide-[media-query]|\n|hide-[media-query]-below|\n|hide-[media-query]-above|\n|hide-[media-query]|\n|show|\n|show-[media-query]|\n|show-[media-query]|\n|show-[media-query]|\n|show-[media-query]-below|\n|show-[media-query]-above|\n|show-[media-query]|\n\n### Table\n|Class| Description|\n|:-:|:-|\n|Collapsed| Border collapsed|\n|Fixed| Columns with the same width|\n|Responsive| Table rows to columns under sm size|\n|Striped| Even rows with light gray background|\n\n### Text\n\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|tac|text-align|center|\n|taj|text-align|justify|\n|tal|text-align|left|\n|tar|text-align|right|\n|tdlt|text-decoration|line-through|\n|tdo|text-decoration|overline|\n|tdou|text-decoration|underline overline|\n|tdu|text-decoration|underline|\n|tduo|text-decoration|underline overline|\n|tduos|text-decoration|underline overline line-through|\n|tduso|text-decoration|underline overline line-through|\n|tdous|text-decoration|underline overline line-through|\n|tdosu|text-decoration|underline overline line-through|\n|tdsou|text-decoration|underline overline line-through|\n|tdsuo|text-decoration|underline overline line-through|\n|ttc|text-transform|capitalize|\n|ttl|text-transform|lowercase|\n|ttn|text-transform|none|\n|ttu|text-transform|uppercase|\n|tdsda|text-decoration-style|dashed|\n|tdsdo|text-decoration-style|dotted|\n|tdss|text-decoration-style|solid|\n|tdsw|text-decoration-style|wavy|\n|tdi|text-direction|initial|\n|tdl|text-direction|ltr|\n|tdr|text-direction|rtl|\n\n|Class|Description|\n|:-:|:-|\n|paragraph-reset| Sets margin to 0|\n\n### Vertial align\n\n|Class|Property|Value|\n|:-:|:-:|:-:|\n|vab|vertical-align|bottom|\n|vabl|vertical-align|baseline|\n|vainh|vertical-align|inherit|\n|vam|vertical-align|middle|\n|vasub|vertical-align|sub|\n|vasup|vertical-align|super|\n|vat|vertical-align|top|\n|vatb|vertical-align|text-bottom|\n|vatt|vertical-align|text-top|\n\n### Visibility\n\n|Class|Property|Value|\n|:-:|:-:|:-:|\nvc|visibility|collapse|\nvh|visibility|hidden|\nvu|visibility|unset|\nvv|visibility|visible|\n\n### Z Index\n|   Index   |   Elements   |\n| :-: | :-:|\n| -1 | Any |\n| 1 | Any |\n| 10 | Fixed |\n| 100 | Dialog |\n| 1000 | Fullscreen layers |\n\n### Breakpoints\n|   Size   |   Min   |   Max  | Prefix |\n| :-: | :-:| :-: | :-: | \n| xs |  | 480px| .col-xs | \n| sm | 481px | 768px | .col-sm |\n| md | 769px | 1280px | .col-md |\n| lg | 1281px|  1600px | .col-lg |\n| xl | 1601px | col-xl | .col-xl |\n\n### Media queries\n| Size | Mixin |\n| :-: | :-:\n| xs | xs() |\n| sm | sm() |\n| sm-down | sm-down() |\n| sm-up | sm-up() |\n| md | md() |\n| md-down | md-down() |\n| md-up | md-up() |\n| lg | lg() |\n| lg-down | lg-down() |\n| lg-up | lg-up() |\n| xl | xl() |\n\nExample:\n\n\u003cpre\u003e\n@include sm-up {\n    // rules\n}\n\u003c/pre\u003e\n\n### Media helpers\n\nThis classes will be able to change property-value classes in each display resolution. Remember mobile first.\n\n##### {size}-{key}{val}\n\n* Margin\n* Padding\n* Font size (px, em, rem)\n* Position\n* Text align\n* List columns\n* Hide and show\n\n| Property | Value| Helper class  |   Responsive helper   |\n| :-: | :-:| :-:| :-:|\n| Margin | From 0 to 50 | m50 | md-m50 |\n| Margin top| From 0 to 50 | mt50 | md-mt50 |\n| Margin right| From 0 to 50 | mr50 | md-mr50 |\n| Margin left| From 0 to 50 | ml50 | md-ml50 |\n| Margin bottom| From 0 to 50 | mb50 | md-mb50 |\n| Padding | From 0 to 50 | p50 | md-p50 |\n| Padding top| From 0 to 50 | pt50 | md-pt50 |\n| Padding right| From 0 to 50 | pr50 | md-pr50 |\n| Padding left| From 0 to 50 | pl50 | md-pl50 |\n| Padding bottom| From 0 to 50 | pb50 | md-pb50 |\n| Font size | From 8 to 48 | fsp16 | md-fsp16 |\n| Font size | From 50 to 100 | fsp60 | xs-fsp20 |\n\n|Class| Responsive class| Description|\n|:-:|:-:|:-|\n|list-inline| [media-query]-list-inline|Displays list items as inline-block |\n|list-block| [media-query]-list-block|Displays list items as block |\n\n### Credits\n* Flexboxgrid: Thanks to @kristoferjoseph https://github.com/kristoferjoseph/flexboxgrid\n* Bootstrap: Thanks to Twitter https://github.com/twbs/bootstrap\n* RicAg\n* @escueladigital: em and rem functions from ED-Grid https://github.com/escueladigital/EDgrid\n\n### Changelog\n* Rebuilt lib using sass with scss syntax\n* Removed color palette mixin\n* Added xl media size\n* Added auto column\n* Added flex push and pull\n* Added list-inline and list-block helpers and responsive helpers\n* Changed size readme prefix to media-query\n* node_module bug\n* Restores `.list-reset` class\n* Added functions import to media","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffdorantesm%2Fsassoned","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffdorantesm%2Fsassoned","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffdorantesm%2Fsassoned/lists"}