diff --git a/README.md b/README.md index 04df12e..af58265 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,42 @@ -# smidge -👌 Smidge is margin & padding classes ✨by Jeff Davis +# Smidge +👌 Smidge is box-model margin & padding classes ✨by Jeff Davis + +Simply download it and import it from your CSS library. + +[![Build Status](https://api.travis-ci.org/brandedux/smidge.svg?branch=master)](https://travis-ci.org/brandedux/smidge) + +## Getting started +Download or clone the code. +```git clone https://github.com/brandedux/smidge.git``` + +**Import Smidge:**
+Import smidge.scss into your app.scss or primary file.
+```@import './smidge';``` + +**Example Class:**
+Include the classes in your markup.
+```class="m-h-base"``` + +#### 1. Classificaiton for margin and padding +* m = margin +* p = padding + +#### 2. Side of box model including horizontal and vertical +* h = horizontal +* v = vertical +* t = top +* b = bottom +* l = left +* r = right + +#### 3. Size Suffixes +* smaller +* small +* base +* big +* bigger + +#### Copyright and License +Copyright (c) 2019, Jeff Davis. + +Smidge source code is licensed under the [MIT License](LICENSE). diff --git a/smidge.scss b/smidge.scss new file mode 100644 index 0000000..440dd80 --- /dev/null +++ b/smidge.scss @@ -0,0 +1,304 @@ +// SMIDGE.SCSS +// v0.1 +// =========== +// SIZES +$smaller: .236em; +$small: .618em; +$base: 1em; +$big: 1.618em; +$bigger: 3.236em; + +// PADDING +.p-smaller { + padding: $smaller; +} + +.p-small { + padding: $small; +} + +.p-base { + padding: $base; +} + +.p-big { + padding: $big; +} + +.p-bigger { + padding: $bigger; +} + +// PADDING HORIZONTAL +.p-h-smaller { + padding: 0 $smaller; +} + +.p-h-small { + padding: 0 $small; +} + +.p-h-base { + padding: 0 $base; +} + +.p-h-big { + padding: 0 $big; +} + +.p-h-bigger { + padding: 0 $bigger; +} + +// PADDING VERTICAL +.p-v-smaller { + padding: $smaller 0; +} + +.p-v-small { + padding: $small 0; +} + +.p-v-base { + padding: $base 0; +} + +.p-v-big { + padding: $big 0; +} + +.p-v-bigger { + padding: $bigger 0; +} + +// PADDING TOP +.p-t-smaller { + padding-top: $smaller; +} + +.p-t-small { + padding-top: $small; +} + +.p-t-base { + padding-top: $base; +} + +.p-t-big { + padding-top: $big; +} + +.p-t-bigger { + padding-top: $bigger; +} + +// PADDING RIGHT +.p-r-smaller { + padding-right: $smaller; +} + +.p-r-small { + padding-right: $small; +} + +.p-r-base { + padding-right: $base; +} + +.p-r-big { + padding-right: $big; +} + +.p-r-bigger { + padding-right: $bigger; +} + +// PADDING BOTTOM +.p-b-smaller { + padding-bottom: $smaller; +} + +.p-b-small { + padding-bottom: $small; +} + +.p-b-base { + padding-bottom: $base; +} + +.p-b-big { + padding-bottom: $big; +} + +.p-b-bigger { + padding-bottom: $bigger; +} + +// PADDING LEFT +.p-l-smaller { + padding-left: $smaller; +} + +.p-l-small { + padding-left: $small; +} + +.p-l-base { + padding-left: $base; +} + +.p-l-big { + padding-left: $big; +} + +.p-l-bigger { + padding-left: $bigger; +} + + +// MARGIN +.m-smaller { + margin: $smaller; +} + +.m-small { + margin: $small; +} + +.m-base { + margin: $base; +} + +.m-big { + margin: $big; +} + +.m-bigger { + margin: $bigger; +} + +// MARGIN HORIZONTAL +.m-h-smaller { + margin: 0 $smaller; +} + +.m-h-small { + margin: 0 $small; +} + +.m-h-base { + margin: 0 $base; +} + +.m-h-big { + margin: 0 $big; +} + +.m-h-bigger { + margin: 0 $bigger; +} + +// MARGIN VERTICAL +.m-v-smaller { + margin: $smaller 0; +} + +.m-v-small { + margin: $small 0; +} + +.m-v-base { + margin: $base 0; +} + +.m-v-big { + margin: $big 0; +} + +.m-v-bigger { + margin: $bigger 0; +} + +// MARGIN TOP +.m-t-smaller { + margin-top: $smaller; +} + +.m-t-small { + margin-top: $small; +} + +.m-t-base { + margin-top: $base; +} + +.m-t-big { + margin-top: $big; +} + +.m-t-bigger { + margin-top: $bigger; +} + +// MARGIN RIGHT +.m-r-smaller { + margin-right: $smaller; +} + +.m-r-small { + margin-right: $small; +} + +.m-r-base { + margin-right: $base; +} + +.m-r-big { + margin-right: $big; +} + +.m-r-bigger { + margin-right: $bigger; +} + +// MARGIN BOTTOM +.m-b-smaller { + margin-bottom: $smaller; +} + +.m-b-small { + margin-bottom: $small; +} + +.m-b-base { + margin-bottom: $base; +} + +.m-b-big { + margin-bottom: $big; +} + +.m-b-bigger { + margin-bottom: $bigger; +} + +// MARGIN LEFT +.m-l-smaller { + margin-left: $smaller; +} + +.m-l-small { + margin-left: $small; +} + +.m-l-base { + margin-left: $base; +} + +.m-l-big { + margin-left: $big; +} + +.m-l-bigger { + margin-left: $bigger; +}