/marrakech

🔧 Lightweight Sass utility library

Primary LanguageCSSMIT LicenseMIT

Marrakech

Marrakech is a collection of common Sass helper mixins and functions helping you write more maintainable styles ✨

forthebadge forthebadge forthebadge

Why

Writing styles can be repetitive and slow. Marrakech's collection of mixins makes it easy and fast to write more DRY code.

Table of Contents

Requirements

Documentation

Aspect Ratio

Set a aspect ratio for an element

  • @mixin aspect-ratio([width], [height]);
Parameters
Parameter Type Default Optional
width number - No
height number - No
Example
/** Usage */
.youtube-fluid {
  width: 100%;
  @include aspect-ratio(16, 9);
}
/** Output */
.youtube-fluid {
  width: 100%;
  position: relative;
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  padding-bottom: 56.25%;
}

Border Radius

A shorhand syntax for adding border radius to different sides of an element

  • @mixin border-top-radius([radius]);
  • @mixin border-right-radius([radius]);
  • @mixin border-bottom-radius([radius]);
  • @mixin border-left-radius([radius]);
Parameters
Parameter Type Default Optional
radius Border radius size - No
Example
/** Usage */
.box-1 {
  @include border-top-radius(1px);
}

.box-2 {
  @include border-right-radius(1px);
}

.box-3 {
  @include border-bottom-radius(3px);
}

.box-4 {
  @include border-left-radius(4px);
}
/** Output */
.box-1 {
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
}

.box-2 {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.box-3 {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.box-4 {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

Border Width

A shorthand syntax for setting different border widths on each side of an element

  • @mixin border-width([widths]);
Parameters
Parameter Type Default Optional
widths List of border width sizes - No
Example
/** Usage */
.box {
  @include border-width(2px null 3px 1px);
}
/** Output */
.box {
  border-top-width: 2px;
  border-bottom-width: 3px;
  border-left-width: 1px;
}

Center

Center an element vertically and horizontally relative to closest positioned parent

  • @mixin center;
Example
/** Usage */
.box {
  @include center;
}
/** Output */
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Center Block

Center a block element with a display horizontally

  • @mixin center-block;
Example
/** Usage */
.box {
  width: 250px;
  @include center-block;
}
/** Output */
.box {
  width: 250px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Circle

Create a circle shape

  • @mixin circle([diameter], [color]);
Parameters
Parameter Type Default Optional
diameter size - No
color color #000 Yes
Example
/** Usage */
.circle {
  @include circle(200px, darkred);
}
/** Output */
.circle {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: darkred;
}

Clearfix

Clearfix hack clears floated child elements without extra markup

  • @mixin clearfix;
Example
/** Usage */
.clearfix {
  @include clearfix;
}
/** Output */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Hide Visually

Hides element and makes the content only visible to screen readers

  • @mixin hide-visually;
Example
/** Usage */
.sr-only {
  @include hide-visually;
}
/** Ouput */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

Hide Text

  • @mixin hide-text;
Example
/** Usage */
.logo {
  @include hide-text;
}
/** Ouput */
.logo {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

Margin

A shorthand way of adding individual margins

  • @mixin margin([margins]);
Parameters
Parameter Type Default Optional
margins List of sizes (4) - No

Example

/** Usage */
.box {
  @include margin(5px 10px null 5%);
}
/** Ouput */
.box {
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 5%;
}

Modular Scale

Modular scale calculator for consistent typographical scale http://www.modularscale.com/

  • @function modular-scale([increment], [ratio], [value]);
Parameters
Parameter Type Default Optional
increment integer - No
ratio number 1.25 (4:5) Yes
value size 1rem Yes
Example
/** Usage */
h1 {
  font-size: modular-scale(5);
}

h2 {
  font-size: modular-scale(4);
}

h3 {
  font-size: modular-scale(3);
}

h4 {
  font-size: modular-scale(2);
}

h5 {
  font-size: modular-scale(1);
}

h6 {
  font-size: modular-scale(0);
}
/** Ouput */
h1 {
  font-size: 3.05176rem;
}

h2 {
  font-size: 2.44141rem;
}

h3 {
  font-size: 1.95312rem;
}

h4 {
  font-size: 1.5625rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

Padding

A shorthand way of adding individual paddings

  • @mixin padding([paddings]);
Parameters
Parameter Type Default Optional
paddings List of sizes (4) - No

Example

/** Usage */
.box {
  @include padding(5px 10px null 5%);
}
/** Ouput */
.box {
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 5%;
}

Position

A shorthand syntax for defining an elements position and its lenghts

  • @mixin position([position], [lengths]);
Parameters
Parameter Type Default Optional
position CSS position value - No
lengths map of lengths - No
Example
/** Usage */
.box {
  @include position(absolute, (top: 10%, right: 250px));
}
/** Ouput */
.box {
  position: absolute;
  top: 10%;
  right: 250px;
}

Size

Set the height and width of an element in one line

  • @mixin size([width], [height]);
Parameters
Parameter Type Default Optional
width unit size - No
height unit size width Yes
Example
/** Usage */
.square {
  @include size(200px);
}

.rectangle {
  @include size(500px, 300px);
}
/** Ouput */
.square {
  width: 200px;
  height: 200px;
}

.rectangle {
  width: 500px;
  height: 300px;
}

System UI Font

Get a list of font list to enable system UI font

  • @function system-ui-font;
Example
/** Usage */
body {
  font-family: system-ui-font();
}
/** Ouput */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
}

Timing

Extra cubic-bezier timing functions for animations and transitions

  • @function timing([timing-function]);
Parameters
Parameter Type Default Optional
timing-function timing function name - No
Timing functions
  • ease-in-quad
  • ease-in-cubic
  • ease-in-quart
  • ease-in-quint
  • ease-in-sine
  • ease-in-expo
  • ease-in-circ
  • ease-in-back
  • ease-out-quad
  • ease-out-cubic
  • ease-out-quart
  • ease-out-quint
  • ease-out-sine
  • ease-out-expo
  • ease-out-circ
  • ease-out-back
  • ease-in-out-quad
  • ease-in-out-cubic
  • ease-in-out-quart
  • ease-in-out-quint
  • ease-in-out-sine
  • ease-in-out-expo
  • ease-in-out-circ
  • ease-in-out-back
Example
/** Usage */
.box {
  transition: transform 250ms timing(ease-in-sine);
}
/** Ouput */
.box {
  transition: transform 250ms cubic-bezier(0.47, 0, 0.745, 0.715);
}

Triangle

Create a triangle facing up, down, right, left, up-right, up-left, down-right or down-left

  • @mixin triangle([size], [color], [direction]);
Parameters
Parameter Type Default Optional
size size - No
color color - No
direction up, down, right, left, up-right, up-left, down-right or down-left - No
Example
/** Usage */
.triangle {
  @include triangle(30px, #000, right);
}
/** Ouput */
.triangle {
  height: 0;
  width: 0;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #000;
  border-top: 15px solid transparent;
}

Truncate

Truncate overflowing text and add a ellipsis

  • @mixin truncate;
Example
/** Usage */
.foo {
  @include truncate;
}
/** Ouput */
.foo {
  word-wrap: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

UI Color

Get a UI color from the Open Color scheme https://yeun.github.io/open-color/

  • @function ui-color([color], [shade], [opacity]);
Parameters
Parameter Type Default Optional
color gray, red, pink, grape, violet, indigo, blue, cyan, teal, green, lime, yellow or orange - No
shade 0-9 5 Yes
opacity 0-1 1 Yes
Example
/** Usage */
.box {
  color: ui-color(gray, 9);
  background: ui-color(yellow, 3);
}
/** Ouput */
.box {
  color: #212529;
  background: #FFE066;
}

Word wrap

A shorhand way of changing the word-wrap property

  • @mixin word-wrap([wrap]);
Parameters
Parameter Type Default Optional
wrap normal, break-word, initial or inherit break-word Yes
Example
/** Usage */
.foo {
  @include word-wrap;
}
/** Ouput */
.foo {
  overflow-wrap: break-word;
  word-break: break-all;
  word-wrap: break-word;
}

Contributors

Tahseen Malik

License

MIT