dropee v1.0.2

_color.scss

Ease the management of colors in your project. Use $palette and $variants variables to control your palette easily and then use the function color($name, $variant) to get a color value.

Basically, you just define your base colors and variants lighten (positive) or darken (negative) your base colors. This way, you don't have to define variables for that tiny lighten border color.

Additionaly, you can use to-rgb($rgba, $background) to computes a RGB representation given a RGBA one and a background color.

$palette: (
  // Simplest case, variant will be computed by using $variants
  brand: #C0CA33,
  // Or define specific variants by using a list using absolute
  text: ( black, rgba(black, 0.87), rgba(black, 0.54) ),
  // Or relative colors
  accent: (10%, 5%, #0277BD, 5%, 10%),
);

$variants: (
  -2: 20%,
  -1: 10%,
  1: 10%,
  2: 20%,
);

color(brand);       // => #C0CA33
color(brand, 1);    // => lighten(#C0CA33, 10%)
color(brand, -2);   // => darken(#C0CA33, 20%)
color(text);        // => rgba(black, 0.87)
color(text, 1);     // => rgba(black, 0.54)
color(accent, -1);  // => darken(#0277BD, 5%)

example output

_typography.scss

Keep a vertical flow without hassle! Define $types and $baseline variables and then use the mixin type($name) to apply font-size and line-height.

Use the function baseline($ratio) to keep the vertical rhythm for margins and paddings. It will output the value in relative units.

// Represents the height of one "line", it will be * by your html font size
// example:
// html { font-size: 1em; } will give baseline of 16px * 1em * 1.5 = 24px
$baseline: 1.5;

// First element is the font-size
// Second one is how many "lines" does it span
$types: (
  small: (0.889, 1),
  body: (1, 1), // 1rem with a 24px line-height
  h1: (2.027, 2) // 2.027rem with a 48px line-height
  // If you need to break the baseline, break it gracefuly (.5)
  h4: (1.424, 1.5),
);

body {
  @include type(body);
  // => font-size: 1rem;
  // => line-height: 1.5;
}

p {
  margin-bottom: baseline(2); // => 16px * 1em * 1.5 = 48px
}

example output

_grid.scss

I should have said Flex grid! Based on the XY Grid of Foundation for Site, it gives you three mixins to easily define the most common layouts.

Use row($x, $y, $wrap, $gap) and col($x, $y, $wrap, $gap) to define your containers and cell($width, $grow, $shrink, $gap) for your children.

.grid-container {
  @include row($gap: 16px);
  background-color: rgba(color(brand), 0.25);

  .grid-item {
    @include cell(1/5, $grow: 0);
  }
}

example output

.grid-container-spaced {
  @include row($x: space-between);

  .grid-item {
    width: 100px;
  }
}

example output

.grid-container-col {
  @include col($x: flex-end, $y: center);
  height: 200px;

  .grid-item {
    width: 100px;
  }
}

example output

_responsive.scss

Define breakpoints properties by using the $breakpoints variable and use them with the on($name, $media) mixin.

$breakpoints: (
  phone: (
    min-width: 576px,
    // You can add other properties here
  ),
  tablet: (
    min-width: 768px,
  ),
  // Other breakpoints
);

p::after {
  content: 'Default content, on phone';
  
  @include on(tablet) {
    content: 'On tablet';
  }

  @include on(desktop) {
    content: 'On desktop';
  }

  @include on(large-desktop) {
    content: 'On large desktop';
  }
}

example output