{"id":15041347,"url":"https://github.com/chrishumboldt/rocket-propel","last_synced_at":"2025-04-14T20:17:07.708Z","repository":{"id":49669838,"uuid":"13611880","full_name":"chrishumboldt/rocket-propel","owner":"chrishumboldt","description":"A lightweight SASS mixin library and responsive CSS layout engine.","archived":true,"fork":false,"pushed_at":"2024-05-27T04:47:41.000Z","size":1635,"stargazers_count":44,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T20:17:01.814Z","etag":null,"topics":["css","responsive","sass","sass-mixins"],"latest_commit_sha":null,"homepage":"","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/chrishumboldt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-16T06:56:39.000Z","updated_at":"2024-05-27T04:47:52.000Z","dependencies_parsed_at":"2022-08-31T00:31:31.872Z","dependency_job_id":null,"html_url":"https://github.com/chrishumboldt/rocket-propel","commit_stats":null,"previous_names":["chrishumboldt/blueplate"],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrishumboldt%2Frocket-propel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrishumboldt%2Frocket-propel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrishumboldt%2Frocket-propel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrishumboldt%2Frocket-propel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrishumboldt","download_url":"https://codeload.github.com/chrishumboldt/rocket-propel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248952358,"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":["css","responsive","sass","sass-mixins"],"created_at":"2024-09-24T20:45:59.572Z","updated_at":"2025-04-14T20:17:07.690Z","avatar_url":"https://github.com/chrishumboldt.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NO LONGER SUPPORTED\n\n# Propel\nA lightweight SASS mixin library and responsive CSS layout engine.\n\n## Table of Contents\n\n* [Getting Started](#getting-started)\n* [SASS Implementation](#sass-implementation)\n   * [Variables](#variables)\n   * [Animation](#animation)\n   * [Arrow](#arrow)\n   * [Background](#background)\n   * [Background Images](#background-images)\n   * [Borders](#borders)\n   * [Border Radius](#border-radius)\n   * [Border Shades](#border-shades)\n   * [Display](#display)\n   * [Drop Shadow](#drop-shadow)\n   * [Global Setup](#global-setup)\n   * [Gradient](#gradient)\n   * [Interaction](#interaction)\n   * [iOS](#ios)\n   * [Layout](#layout)\n\t* [Layout Flex](#layout-flex)\n   * [Layout Floats](#layout-floats)\n   * [Layout Responsive](#layout-responsive)\n   * [List](#list)\n   * [Position](#position)\n   * [Size](#size)\n   * [Spacing Margins](#spacing-margins)\n   * [Spacing Padding](#spacing-padding)\n   * [Spacing Remove](#spacing-remove)\n   * [Text](#text-1)\n   * [Transform](#transform)\n* [CSS Implementation](#css-implementation)\n   * [Background](#background-1)\n   * [Display](#display-1)\n   * [Layout](#layout-1)\n\t* [Layout Responsive](#layout-responsive-1)\n   * [Position](#position-1)\n   * [Sizing](#sizing)\n   * [Spacing](#spacing)\n   * [Text](#text-2)\n* [Blueplate Deprecated](#blueplate-deprecated)\n\n## Getting Started\nYou can either download a copy of the [source files](https://github.com/chrishumboldt/Rocket-Propel/archive/master.zip) or install via NPM.\n\n```\nnpm install rocket-propel\n```\n\n## SASS Implementation\nStart by importing the necessary file into your own SASS file and include the required mixins.\n\n**SASS**\n```scss\n@import \"rocket-propel/build/sass/import\";\n\n.example {\n   @include row();\n\n   .left, .middle, .right {\n      @include span(12); // 100% width\n   }\n   @include breakpoint($bpLarge) {\n      .left {\n         @include span-new(6); // 50% width\n      }\n      .middle {\n         @include span-new(4); // 33.33% width\n      }\n      .right {\n         @include span-new(2); // 16.66% width\n      }\n   }\n}\n```\n\n**HTML**\n```html\n\u003cdiv class=\"example\"\u003e\n   \u003cdiv class=\"left\"\u003e\u003c/div\u003e\n   \u003cdiv class=\"middle\"\u003e\u003c/div\u003e\n   \u003cdiv class=\"right\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Browser Prefixes\nPropel will apply all the necessary browser prefixes where needed but no longer supports the **-o-** prefix for older versions of Opera. Opera now uses the Blink engine from Chromium (\u003ca href=\"http://www.opera.com/blogs/desktop/2015/10/opera-33-our-contribution-to-chromium/\"\u003eRead More\u003c/a\u003e).\n\nFind the other available mixins below:\n\n#### Variables\nPropel comes pre-packaged with a host of SASS variables. They are all listed below.\n\nVariable | Default\n---- | ----\n`$columnLimit` | 12\n`$fontFamily` | 'Open Sans', Helvetica, Arial, sans-serif\n`$limitWidth` | 68.750em\n\n##### Breakpoints\nVariable | Value | Evaluates To\n---- | ---- | ----\n`$bpSmall` | 21.875em | 350px\n`$bpMedium` | 46.875em | 700px\n`$bpLarge` | 68.750em | 1100px\n\n##### Colours\nType | Variables\n---- | ----\nMono | `$black` `$blackBase` `$greyX2Light` `$greyXLight` `$greyLight` `$grey` `$greyDark` `$greyXDark` `$greyX2Dark`\nPrimary | `$aqua` `$blue` `$green` `$orange` `$pink` `$purple` `$red` `$yellow`\nSecondary | `$asbestos` `$asphalt` `$bondiBlue` `$cloud` `$concrete` `$greyBlueXLight` `$greyBlueLight` `$greyBlue` `$greyBlueDark` `$greyBlueXDark` `$midnight` `$offWhite` `$offWhiteDark` `$riverBed` `$silver`\n\n##### Spacing\nVariable | Value\n---- | ----\n`$spaceBase` | 24px\n`$spaceSmall` | 12px\n`$spaceMedium` | 48px\n`$spaceLarge` | 72px\n\n##### Text\nVariable | Value\n---- | ----\n`$georgia` | Georgia, Cambria, \"Times New Roman\", Times, serif\n`$helvetica` | \"Helvetica Neue\", Helvetica, Arial, sans-serif\n`$impact` | Impact, Charcoal, sans-serif\n`$lato` | 'Lato', sans-serif\n`$lucindaGrande` | \"Lucida Grande\", Tahoma, Verdana, Arial, sans-serif\n`$monospace` | Menlo, \"Bitstream Vera Sans Mono\", \"DejaVu Sans Mono\", Monaco, Consolas, monospace\n`$openSans` | 'Open Sans', Helvetica, Arial, sans-serif\n`$roboto` | 'Roboto', 'Helvetic Neue', Helvetica, Arial\n`$tahoma` | Tahoma, Geneva, sans-serif\n`$timesNewRoman` | \"Times New Roman\", Times, serif\n`$trebuchet` | \"Trebuchet MS\", Helvetica, sans-serif\n`$verdana` | Verdana, Geneva, sans-serif\n\n##### Text Size\nThe size evaluates to an em value and then down to a pixel value.\n\nVariable | Evaluates To\n---- | ----\n`$sizeSmall` | 14px\n`$sizeBase` | 16px\n`$sizeMedium` | 18px\n`$sizeLarge` | 24px\n\n##### Text Weight\nVariable | Value\n---- | ----\n`$weightThin` | 100\n`$weightLight` | 300\n`$weightBase` | 400\n`$weightBold` | 700\n`$weightHeavy` | 900\n\n#### Animation\nMixin | Defaults | Description\n---- | ---- | ----\n`animate(attr, speed)` | `speed`: `0.2s` | Set the transition style of attribute `attr`.\n`animate-none()` | | Remove all transition styles for an element.\n`animate-timing-function(timing)` | | Set the transition `timing` function for an element.\n`animation(n, dur, i, dir, f)` | `dur`: `0.4s`\u003cbr\u003e`i`: `false`\u003cbr\u003e`dir`: `false`\u003cbr\u003e`f`: `false` | Set all the animation properties.\u003cbr\u003e`n` = name\u003cbr\u003e`dur` = duration\u003cbr\u003e`i` = iteration\u003cbr\u003e`dir` = direction\u003cbr\u003e`f` = fill mode\n`animation-delay(x)` | | Set the animation delay property to `x`.\n`animation-direction(x)` | `x`: `normal` | Set the animation direction property.\n`animation-duration(x)` | | Set the animation duration property to `x`.\n`animation-fill-mode(x)` | `x`: `forwards` | Set the animation fill mode property.\n`animation-iteration(x)` | | Set the animation iteration `x` property.\n`animation-name(x)` | | Set the animation name property.\n`animation-timing-function(x)` | `x`: `ease-out` | Set the animation timing function property.\n`keyframes(x)` | | Generate the animation keyframes with name `x`.\n\n```scss\n// Animate block on hover\n.block {\n   @include position(absolute, top 10px left 10px);\n   @include height(50px);\n   @include width(50px);\n   @include background-colour($red);\n   @include animate('all', 1s); // Here we attach the animation styles\n\n   \u0026:hover {\n      @include position-set(top 20px left 20px);\n   }\n}\n```\n\n#### Arrow\nMixin | Defaults | Description\n---- | ---- | ----\n`arrow(pos, clr, size)` | `pos`: `bottom`\u003cbr\u003e`clr`: `$white`\u003cbr\u003e`size`: `20px` | Attach a CSS arrow to an element.\n`arrow-colour(pos, clr)` | `pos`: `bottom`\u003cbr\u003e`clr`: `$white` | Change the colour of an elements CSS arrow.\n`arrow-none(clr)` | `clr`: `$white` | Remove an elements CSS arrow\u003cbr\u003eReset the background colour.\n\n#### Background\nMixin | Defaults | Description\n---- | ---- | ----\n`background-attachment(x)` | `x`: `scroll` | Set the background attachment property to `x`.\n`background-clip(x)` | `x`: `border-box` | Set the background clip property to `x`.\n`background-colour(x)` | | Set the background colour to `x`.\n`background-contain()` | | Set the background size to contain and center position.\n`background-cover()` | | Set the background size to cover and center position.\n`background-origin(x)` | `x`: `padding-box` | Set the background origin property to `x`.\n`background-position(x)` | `x`: `center` | Set the background position property to `x`.\n`background-repeat(x)` | `x`: `repeat` | Set the background repeat property to `x`.\n`background-size(x)` | `x`: `auto` | Set the background size property to `x`.\n`background-single()` | | Set the background position to center\u003cbr\u003eStop the background from repeating.\n\n#### Background Images\nMixin | Defaults | Description\n---- | ---- | ----\n`background-image(url, pos)` | `pos`: `top left` | Set the background image on an element.\n`background-image-contain(url, pos)` | `pos`: `center` | Set a contained background image on an element.\n`background-image-cover(url, pos)` | `pos`: `center` | Set a covered background image on an element.\n`background-image-parallax(url)` | | Set a parallax style background image on an element.\n`background-image-single(url, pos)` | `pos`: `center` | Set a single background image on an element.\n\n```scss\n// Set the background\n.my-element {\n   @include background-image-cover(\"global/background.png\");\n}\n```\n\n#### Borders\nSet the border property of an element.\n\nMixin | Defaults\n---- | ----\n`border(clr, size, type)` | `clr`: `$grey`\u003cbr\u003e`size`: `1px`\u003cbr\u003e`type`: `solid`\n`border-[s](clr, size, type)` | `[s]`: `t` `r` `b` `l`\u003cbr\u003e`clr`: `$grey`\u003cbr\u003e`size`: `1px`\u003cbr\u003e`type`: `solid`\n`border-horizontal(clr, size, type)` | `clr`: `$grey`\u003cbr\u003e`size`: `1px`\u003cbr\u003e`type`: `solid`\n`border-vertical(clr, size, type)` | `clr`: `$grey`\u003cbr\u003e`size`: `1px`\u003cbr\u003e`type`: `solid`\n`border-none()` |\n\n```scss\n.my-element {\n   @include border-left($red, 2px);\n}\n```\n\n#### Border Radius\nSet the border radius property on an element.\n\nMixin | Options \u0026 Defaults |\n---- | ---- |\n`border-radius(x)` | `x`: `2px` |\n`border-radius-[s](x)` | `[s]`: `t` `r` `b` `l` `tl` `tr` `bl` `br`\u003cbr\u003e`x`: `2px` |\n`border-radius-none()` | |\n\n```scss\n.my-element {\n   @include border-radius-tr(4px); // This add a border radius to the top right corner.\n}\n```\n\n#### Display\nMixin | Defaults | Description\n---- | ---- | ----\n`hide()` | | Hide an element.\n`hide-visually()` | | Hide an element but still make it accessible to the DOM.\u003cbr\u003eUsed for instances where accessibility is needed.\n`show(x)` | `x`: `block` | Show an element with display type of `x`.\n`opacity(int)` | `int`: `0.60` | Set the opacity of an element.\n`overflow(x, direction)` | `x`: `visible`\u003cbr\u003e`direction`: `false` | Set the overflow of an element.\u003cbr\u003e`direction` is optional and can be `vertical` or `horizontal`.\n`perspective(x)` | `x`: `0px` | Set the perspective of an element.\n`transparency(int)` | `int`: `0.60` | Set the transparency of an element.\u003cbr\u003eYou can also use the **opacity** mixin as an alternative.\n`visibility(x)` | `x`: `visible` | Set the visibility property of an element.\n\n#### Drop Shadow\nMixin | Defaults | Description\n---- | ---- | ----\n`drop-shadow(clr, size, v, h)` | `clr`: `fade-out(#000, 0.6)`\u003cbr\u003e`size`: `3px`\u003cbr\u003e`v`: `0px`\u003cbr\u003e`h`: `0px` | Set the drop shadow of an element.\u003cbr\u003e`v` is the vertical offset.\u003cbr\u003e`h` is the horizontal offset.\n`drop-shadow-inset(clr, size, v, h)` | `clr`: `fade-out(#000, 0.6)`\u003cbr\u003e`size`: `3px`\u003cbr\u003e`v`: `0px`\u003cbr\u003e`h`: `0px` | Set an inset drop shadow of an element.\u003cbr\u003e`v` is the vertical offset.\u003cbr\u003e`h` is the horizontal offset.\n`drop-shadow-none()` | | Remove any drop shadow.\n\n```scss\n.my-element {\n   @include drop-shadow($green);\n}\n```\n\n#### Global Setup\nMixin | Description\n---- | ----\n`global-setup()` | Apply the border-box property to all elements to contain dimensions. Set the default colour to a lighter, more readable black, the background colour to white and the default font to Open Sans with an Arial and Helvetica fallback. Note that this setup is automatically called by Rocket already.\n\n#### Gradient\n**Note** that the arguments `x` and `y` are the starting and ending gradient colours.\n\nMixin | Defaults | Description\n---- | ---- | ----\n`gradient-animate(x, y, angle)` | `angle`: `135deg` | Apply animated background gradient.\n`gradient-animate-horizontal(x, y)` | | Apply animated background gradient from left to right.\n`gradient-animate-vertical(x, y)` | | Apply animated background gradient from top to bottom.\n`gradient-animate-none()` | | Remove any animated background gradient.\n`gradient-angle(x, y, angle)` | `angle`: `-45deg` | Apply background gradient.\n`gradient-horizontal(x, y)` | | Apply background gradient from left to right.\n`gradient-vertical(x, y)` | | Apply background gradient from top to bottom.\n`gradient-none()` | | Remove any background gradient.\n\n#### Interaction\nMixin | Defaults | Description\n---- | ---- | ----\n`cursor(x)` | `x`: `auto` | Set the cursor to `x`.\n\n#### iOS\nMixin | Description\n---- | ----\n`ios-render()` | Set some special properties like Webkit's backface visibility and perspective property to help with rendering elements like images.\n\n#### Layout\nMixin | Defaults | Description\n---- | ---- | ----\n`box-sizing(x)` | `x`: `content-box` | Set the box sizing style of an element.\n`center()` | | Center an element within its container.\n`center-vertical()` | | Center an element vertically within its container.\n`clearfix()` | | Clear the zoom and set the clear style to both for the element.\n`level(int)` | `int`: `1` | Set the z-index of an element to `int`.\u003cbr\u003eYou can also use the z-index mixin as an alternative.\n`vertical-align(x)` | | Set the vertical alignment of an element to `x`.\n`z-index(int)` | `x`: `1` | Set the z-index of an element to `x`.\n\n#### Layout Flex\nFor information on flex visit \u003ca href=\"https://css-tricks.com/snippets/css/a-guide-to-flexbox/\"\u003eCSS-Tricks: A Guide to Flexbox\u003c/a\u003e\n\nMixin | Defaults | Description\n---- | ---- | ----\n`align-content(x)` | `x`: `flex-start` | Set the align content property of a flex element.\u003cbr\u003e `x` can be `flex-start`, `flex-end`, `center`,\u003cbr\u003e`space-between`, `space-around` or `stretch`.\n`align-items(x)` | `x`: `flex-start` | Set the align items property of a flex element.\u003cbr\u003e `x` can be `flex-start`, `flex-end`, `center`,\u003cbr\u003e`space-between`, `space-around` or `stretch`.\n`align-self(x)` | `x`: `auto` | Set the align self property of a flex element.\u003cbr\u003e `x` can be `flex-start`, `flex-end`, `center`,\u003cbr\u003e`space-between`, `space-around` or `stretch`.\n`flex(grow, shrink, basis)` | `grow`: `0`\u003cbr\u003e`shrink`: `1`\u003cbr\u003e`basis`: `auto` | Set the all the flex properties for a flex item.\n`flex-basis(x)` | `basis`: `auto` | Set the flex basis property for a flex item.\n`flex-direction(x)` | `x`: `row` | Set the flex direction property of a flex element.\u003cbr\u003e`x` can be `row`, `row-reverse`, `column` or `column-reverse`.\n`flex-display(x)` | `x`: `normal` | Set the flex display property of a flex element.\n`flex-flow(x, y)` | | Set the flex direction and wrap properties of a flex element.\u003cbr\u003e`x` is direction.\u003cbr\u003e`y` is wrap.\n`flex-grow(x)` | `x`: `0` | Set the flex grow property of a flex element.\n`flex-shrink(x)` | `x`: `1` | Set the flex shrink property of a flex element.\n`flex-wrap(x)` | `x`: `nowrap` | Set the flex wrap property of a flex element.\u003cbr\u003e`x` can be `nowrap`, `wrap` or `wrap-reverse`.\n`justify-content(x)` | `x`: `flex-start` | Set the justify content property of a flex element.\u003cbr\u003e`x` can be `flex-start`, `flex-end`, `center`,\u003cbr\u003e`space-between` or `space-around`.\n`order(int)` | `int`: `0` | Set the flex order property for a flex item.\n\n#### Layout Floats\nMixin | Description\n---- | ----\n`float(x)` | Set the float of an element to `x`.\n`float-clear()` | Clear the float of an element.\n`float-none()` | Set the float of an element to none.\n\n#### Layout Responsive\nMixin | Defaults | Description\n---- | ---- | ----\n`breakpoint(x, y, z)` | `y`: `false`\u003cbr\u003e`z`: `false` | Generate a media query based on a Rocket preset or a value.\u003cbr\u003e`x`: `large`, `small` or an `em/px` value.\u003cbr\u003e`y`: Breakpoint type of `min` or `max`\u003cbr\u003e`z`: breakpoint orientation.\n`breakpoint-vertical(x, y, z)` | `y`: `false`\u003cbr\u003e`z`: `false` | The same as breakpoint except it activates vertically.\n`limit(x)` | `x`: `$limitWidth` | Assigns a maximum width to an element and centers it.\u003cbr\u003eAnything below the limit will become fluid.\u003cbr\u003eUsed mainly to contain row elements.\n`offset(x, y)` | `y`: `$columnLimit` | Push an element out `x` amount of columns from the left.\n`offset-right(x, y)` | `y`: `$columnLimit` | Push an element `x` amount of columns from the right.\n`row()` | | Turns an element into a row.\u003cbr\u003eRow is needed to wrap any **span** elements.\u003cbr\u003eA row element will default to a 100% width of its container.\n`span(x, y)` | `y`: `$columnLimit` | Span an element `x` amount of columns within the `z` total.\u003cbr\u003eSee and example below.\n`span-new(x, y)` | `y`: `$columnLimit` | Apply a new span amount of `x` to an element.\n\n```html\n\u003cdiv class=\"container\"\u003e\n   \u003cdiv class=\"left\"\u003eLeft Column\u003c/div\u003e\n   \u003cdiv class=\"right\"\u003eRight Column\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```scss\n.container {\n   @include row();\n\n   .left,\n   .right {\n      @include span(12); // Span of 12 is a width of 100% (12/12).\n   }\n\n   // Change the layout at the large breakpoint\n   @include breakpoint ($bpLarge) {\n      .left {\n         @include span-new(3); // Span of 3 is a width of 25% (3/12).\n      }\n      .right {\n         @include span-new(9); // Span of 9 is a width of 75% (9/12).\n      }\n   }\n}\n```\n\n#### List\nMixin | Defaults | Description\n---- | ---- | ----\n`list-style(x)` | `x`: `disc outside none` | Set the list style.\n`list-style-image(url)` | | Set the list style image.\n`list-style-position(x)` | `x`: `outside` | Set the list style position.\n`list-style-type(x)` | `x`: `disc` | Set the list style type.\n\n#### Position\nMixin | Defaults | Description\n---- | ---- | ----\n`position(x, opt)` | `x`: `relative` | Set the position of an element to `x`.\u003cbr\u003e`opt` is optional.\u003cbr\u003e`opt` can include `top`, `right`, `bottom`, `left`,\u003cbr\u003e`margin-top`, `margin-right`, `margin-bottom` and `margin-left`.\n`position-set(opt)` | | `opt` can include `top`, `right`, `bottom`, `left`,\u003cbr\u003e`margin-top`, `margin-right`, `margin-bottom` and `margin-left`.\n\n```scss\n.my-element {\n   @include position(relative, left 10px margin-top 10px)\n}\n```\n\n#### Size\nMixin | Defaults | Description\n---- | ---- | ----\n`height(x, y, z)` | `x`: `0px`\u003cbr\u003e`y`: `false`\u003cbr\u003e`z`: `false` | Set the height of an element.\u003cbr\u003e`y` is the height max.\u003cbr\u003e`z` is the height min.\n`height-max(x)` | `x`: `0px` | Set the maximum height of an element.\n`height-min(x)` | `x`: `0px` | Set the minimum height of an element.\n`size(x, y)` | `x`: `0px`\u003cbr\u003e`y`: `0px` | Set the width `x` and height `y` of an element.\n`square(x)` | | Set the width, height and line-height of an element to `x`.\u003cbr\u003eCenter the text.\n`width(x, y, z)` | `x`: `0px`\u003cbr\u003e`y`: `false`\u003cbr\u003e`z`: `false` | Set the width of an element.\u003cbr\u003e`y` is the width max.\u003cbr\u003e`z` is the width min.\n`width-max(x)` | `x`: `0px` | Set the maximum width of an element.\n`width-min(x)` | `x`: `0px` | Set the minimum width of an element.\n\n#### Spacing Margins\nMixin | Defaults | Description\n---- | ---- | ----\n`margin(x)` | `x`: `24px` | Set all the margins of an element.\n`margin-[s](x)` | \u003cbr\u003e`x`: `24px` | Set the margin side of `s` of an element.\u003cbr\u003e`s` can be `top`, `right`, `bottom`, `left`, `horizontal`, `vertical`.\n`margin-none()` | | Set the margin of an element to 0.\n\n```scss\n.my-element {\n   @include margin-b(12px);\n}\n```\n\n#### Spacing Padding\nMixin | Defaults | Description\n---- | ---- | ----\n`padding(x)` | `x`: `24px` | Set all the padding of an element.\n`padding-[s](x)` | `x`: `24px` | Set the padding side of `s` of an element.\u003cbr\u003e`s` can be `top`, `right`, `bottom`, `left`, `horizontal`, `vertical`.\n`padding-none()` | | Set the padding of an element to 0.\n\n```scss\n.my-element {\n   @include padding-right(20px);\n}\n```\n\n#### Spacing Remove\nMixin | Description\n---- | ----\n`spacing-none()` | Remove all margins and padding from an element.\n\n#### Text\nMixin | Defaults | Description\n---- | ---- | ----\n`text-align(x)` | `x`: `left` | Set the text alignment of an element.\n`text-colour(x)` | `x`: `$white` | Set the text colour of an element.\n`text-decoration(x)` | `x`: `none` | Set the text decoration of an element.\n`text-ellipsis()` | | Set text overflow to ellipsis and prevent word wrapping.\n`text-font(x)` | `x`: `$helvetica` | Set the text font family of an element.\n`text-hide()` | | Hide the text within an element.\n`text-letter-spacing(x)` | `x`: `normal` | Set the text letter spacing of an element.\n`text-line-height(x)` | `x`: `16px` |  Set the line height of an element in pixels.\u003cbr\u003eCalculates an additional rem overwrite.\n`text-size(x)` | `x`: `16px` | Set the font size of an element in pixels.\u003cbr\u003eCalculates an additional rem overwrite.\n`text-style()` | `x`: `normal` | Set the text style of an element to $style.\n`text-transform(x)` | `x`: `none` | Set the text transform property of an element to `x`.\u003cbr\u003e`x` can be `none`, `capitalize`, `uppercase`,\u003cbr\u003e`lowercase` or `initial`.\n`text-weight(x)` | `x`: `normal` | Set the text weight of an element to `x`.\n\n#### Transform\nMixin | Defaults | Description\n---- | ---- | ----\n`transform(x)` | | Set the transform of property `x` for an element.\n`transform-origin(x, y, z)` | `x`: `50%`\u003cbr\u003e`y`: `50%`\u003cbr\u003e`z`: `0` | Set the transform origin of an element.\n`transform-rotate(x)` | `x`: `0deg` | Set the transform rotate style of an element.\n`transform-rotate-x(x)` | `x`: `0deg` | Set the transform rotate `X` style of an element.\n`transform-rotate-y(x)` | `x`: `0deg` | Set the transform rotate `Y` style of an element.\n`transform-rotate-z(x)` | `x`: `0deg` | Set the transform rotate `Z` style of an element.\n`transform-scale(x, y)` | `x`: `1`\u003cbr\u003e`y`: `1` | Set the transform scale style of an element.\n`transform-scale-3d(x, y, z)` | `x`: `1`\u003cbr\u003e`y`: `1`\u003cbr\u003e`z`: `1` | Set the transform scale3D style of an element.\n`transform-translate-3d(x, y, z)` | `x`: `0px`\u003cbr\u003e`y`: `0px`\u003cbr\u003e`z`: `0px` | Set the transform translate3d style of an element.\n`transform-translate-x(x)` | `x`: `1` | Set the transform translateX style of an element.\n`transform-translate-y(x)` | `x`: `1` | Set the transform translateY style of an element.\n`transform-translate-z(x)` | `x`: `1` | Set the transform translateZ style of an element.\n`transform-easing(x, y, z, s)` | `x`: `0px`\u003cbr\u003e`y`: `0px`\u003cbr\u003e`z`: `0px`\u003cbr\u003e`s`: `0.2s` | Animate the translate3d transform style (ease-out).\n\n## CSS Implementation\nStart by including the necessary files.\n\n```html\n\u003chead\u003e\n   \u003clink href=\"rocket-propel/css/propel.min.css\" rel=\"stylesheet\" type=\"text/css\"\u003e\n\u003c/head\u003e\n```\n\nAlternatively you can also build the SASS out if you wish to include all your CSS in one production file. See an example below.\n\n```scss\n@import \"rocket-propel/build/sass/import\";\n@include rocket-propel-css;\n```\n\nNow class your HTML to manage your layout. For example:\n\n```html\n\u003cdiv class=\"_row\"\u003e\n   \u003cdiv class=\"_span-2\"\u003eSpan 2\u003c/div\u003e\n   \u003cdiv class=\"_span-2\"\u003eSpan 2\u003c/div\u003e\n   \u003cdiv class=\"_span-2\"\u003eSpan 2\u003c/div\u003e\n   \u003cdiv class=\"_span-2\"\u003eSpan 2\u003c/div\u003e\n   \u003cdiv class=\"_span-2\"\u003eSpan 2\u003c/div\u003e\n   \u003cdiv class=\"_span-2\"\u003eSpan 2\u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Classes as Modifiers\nBecause all classes are declared on the DOM elements themselves, Propel sees them as global modifiers and such uses the `_` prefix to reflect this. In the case of modules the module name would prefix the modifier but that only happens with extensions to Rocket Propel.\n\nFind the other available classes below:\n\n#### Background\nClass | Options | Description\n---- | ---- | ----\n`._back-pos-[x]` | `[x]`: `top`, `right`, `bottom`, `left`, `center` | Set the background position of an element.\u003cbr\u003e`[x]` is for `top`, `right`, `bottom`, `left` or `center`.\n`._back-repeat-[x]` | `[x]`: `no` `y` `x` | Set the background repeat of an element.\u003cbr\u003e`[x]` is for repeat no, along the Y axis or along the X axis.\n`._back-single` | | Set the background of element to no repeat and centered.\n`._back-contain` | | Set the background of element to no repeat and contain.\n`._back-cover` | | Set the background of element to no repeat and cover.\n`._back-black` | | Set the background colour to black.\n`._back-grey` | | Set the background colour to medium grey.\n`._back-grey-light` | | Set the background colour to light grey.\n`._back-white` | | Set the background colour to white.\n\n#### Display\nClass | Options | Description\n---- | ---- | ----\n`._hide` | | Hide an element.\n`._hide-visually` | | Hide an element visually.\u003cbr\u003eIt will still register as on the page.\n`._hide-large` | | Hide an element in large view only.\n`._hide-small` | | Hide an element in small view only.\n`._show` | | Show an element.\n`._show-large` | | Show an element in large view only.\n`._show-small` | | Show an element in small view only.\n`._transparency-[x]` | `[x]`: `100` `75` `50` `25` `0` | Set the opacity of an element.\u003cbr\u003e`[x]` is for `100%`, `75%`, `50%`, `25%` or `0%`.\n\n#### Global\nClass | Options\n---- | ----\n`._propel` | Apply some global styles to the HTML element of your page.\n\n#### Layout\nClass | Options | Description\n---- | ---- | ----\n`._center` | | Center an element.\n`._float-[x]` | `[x]`: `l` `r` | Set the float property of an element to `left` or `right`.\n`._float-none` | | Remove the float property from an element.\n`._float-clear` | | Stop all floating elements from affecting any element following.\n`._valign-[x]` | `[x]`: `t` `m` `b` | Set the vertical alignment of an element to `top`, `middle` or `bottom`.\n\n```html\n\u003cdiv class=\"_center\"\u003e\n   \u003cdiv class=\"_float-r\"\u003eOne\u003c/div\u003e\n   \u003cdiv class=\"_float-r\"\u003eTwo\u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Layout Responsive\nClass | Options | Description\n---- | ---- | ----\n`._row` | | Set the element to a row. Used on responsive containers\n`._span-[i]` | `[i]`: `1` to `12` | Set width of an element within a row. The spans are base 12.\n`._span-large-[i]` | `[i]`: `1` to `12` | Set width of an element within a row at the large breakpoint.\n`._span-small-[i]` | `[i]`: `1` to `12` | Set width of an element within a row at the small breakpoint.\n`._limit` | | Limit an elements width to 68.750em (default) and center.\n`._offset-[i]` | `[i]`: `1` to `12` | Offset from the left by span `[i]`. The spans are base 12.\n`._offset-right-[i]` | `[i]`: `1` to `12` | Offset from the right by span `[i]`.\n`._offset-large-[i]` | `[i]`: `1` to `12` | Offset from the left by span `[i]` at the large breakpoint.\n`._offset-large-right-[i]` | `[i]`: `1` to `12` | Offset from the right by span `[i]` at the large breakpoint.\n`._offset-small-[i]` | `[i]`: `1` to `12` | Offset from the left by span of `[i]` at the small breakpoint.\n`._offset-small-right-[i]` | `[i]`: `1` to `12` | Offset from the right by span of `[i]` at the small breakpoint.\n\n```html\n\u003cdiv class=\"_row\"\u003e\n\u003cdiv class=\"_span-12 _span-large-3\"\u003eLeft Column\u003c/div\u003e\n\u003cdiv class=\"_span-12 _span-large-9\"\u003eRight Column\u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Position\nClass | Description\n---- | ----\n`._pos-absolute` | Set the position of an element to absolute.\n`._pos-relative` | Set the position of an element to relative.\n`._pos-static` | Set the position of an element to static.\n`._pos-fixed` | Set the position of an element to fixed.\n\n#### Sizing\nClass | Options | Description\n---- | ---- | ----\n`._block-height-[x]` | `[x]`: `10` `20` `50` `100` `200` `500` `1000` | Set the height of an element.\u003cbr\u003e`[x]` results in px value.\n`._block-width-[x]` | `[x]`: `10` `20` `50` `100` `200` `500` `1000` | Set the width of an element.\u003cbr\u003e`[x]` results in px value.\n\n```html\n\u003cdiv class=\"_block-width-10 _block-height-20\"\u003eBlock\u003c/div\u003e\n```\n\n#### Spacing\nClass | Options | Description\n---- | ---- | ----\n`._mgn-[x]` | `[x]`: `1` to `10` | Add `[x]` amount of margin all around.\n`._mgn-[s]-[x]` | `[s]`: `t` `r` `b` `l`\u003cbr\u003e`[x]`: `1` to `10` | Add `[x]` amount of margin to the `[s]` side of an element.\n`._mgn-none` | | Remove all margins from an element.\n`._pad-[x]` | `[x]`: `1` to `10` | Add `[x]` amount of padding all around.\n`._pad-[s]-[x]` | `[s]`: `t` `r` `b` `l`\u003cbr\u003e`[x]`: `1` to `10` | Add `[x]` amount of padding to the `[s]` side of an element.\n`._pad-none` | | Remove all padding from an element.\n`._spacing-none` | | Remove all padding and margins from an element.\n\n```html\n\u003cdiv class=\"_pad-t-10\"\u003ePadding top of 10 pixels\u003c/div\u003e\n\u003cdiv class=\"_mgn-right-10\"\u003eMargin right of 8 pixels\u003c/div\u003e\n```\n\n#### Text\nClass | Options | Description\n---- | ---- | ----\n`._txt-hide` | | Hide the text within an element.\n`._txt-[x]` | `[x]`: `l` `c` `r` | Set the text alignment to `[x]`.\u003cbr\u003e`[x]` is for `left`, `center`, `right`.\n`._txt-size-[x]` | `[x]`: `s` `m` `n` `l` | Set the font size to `[x]`.\n`._txt-weight-[x]` | `[x]`: `xl` `l` `n` `b` `xb` | Set the font weight to `[x]`.\n`._txt-light` | | Set the font weight to light.\n`._txt-bold` | | Set the font weight to bold.\n`._txt-normal` | | Set the font weight and style to normal.\n`._txt-italics` | | Set the font style to italics.\n`._txt-oblique` | | Set the font style to oblique.\n`._txt-white` | | Set the font colour to white.\n`._txt-grey` | | Set the font colour to medium grey.\n\n```html\n\u003cdiv class=\"_txt-weight-xl\"\u003eVery light text.\u003c/div\u003e\n\u003cdiv class=\"_txt-r\"\u003eText aligned right.\u003c/div\u003e\n```\n\n## Author\nCreated and maintained by Chris Humboldt\u003cbr\u003e\nWebsite: \u003ca href=\"http://chrishumboldt.com/\"\u003echrishumboldt.com\u003c/a\u003e\u003cbr\u003e\nGitHub \u003ca href=\"https://github.com/chrishumboldt\"\u003egithub.com/chrishumboldt\u003c/a\u003e\u003cbr\u003e\n\n## Copyright and License\nCopyright 2019 Rocket Project\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrishumboldt%2Frocket-propel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrishumboldt%2Frocket-propel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrishumboldt%2Frocket-propel/lists"}