basscss.scss

/*

  BASSCSS

  Part reset, part boilerplate, part framework, all minimal.

  BASSCSS is a small reset and collection of simple type and layout
  classes that can be used as the basis for any web project.
  Use it out of the box or as a base for a larger SASS project.


  Contents:
  1. Reset
  2. Typography
     a. Default Font Stack
     b. Base Type Scale
     c. Responsive Type Scale
     d. Utilities
  3. Layout
     a. Margins
     b. Padding
     c. Display
     d. Utilities


  Made with love by Jxnblk

*/




// Settings

// Defines whether or not to reset margins to 0
// $reset-margins: true;
// Default font stack
// $font-primary: 'Helvetica Neue', Helvetica, sans-serif;
// Base spacing unit
// $space: 1rem;




// Reset

$reset-margins: true !default;
@if ($reset-margins == true) {
  body, h1, h2, h3, h4, h5, h6, dl, ol, ul, p,
  button, input, select, textarea { margin: 0; }
}

button, input, select, textarea { font-family: inherit; font-size: 100%; }
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary { display: block; }




// Typography

// Default Font Stack
$font-primary: 'Helvetica Neue', Helvetica, sans-serif !default;

// Base spacing unit
$space: 1rem !default;

body {
  font-family: $font-primary;
  line-height: 1.5;
  font-weight: 400;
}

// Base Type Scale
h1, .h1 {
  font-size: 2rem;
  line-height: 1.25;
}

h2, .h2 {
  font-size: 1.5rem;
  line-height: 1.25;
}

h3, h4, h5, h6, dl, ol, ul, p, .p {
  font-size: 1.125rem;
}

small, .small {
  font-size: .875rem;
}

// Responsive Type Scale
// Apply the .responsive class directly to elements or their parents
.responsive {
  @media (min-width: 768px) {
    .h1, &.h1 { font-size: 4rem; }
    .h2, &.h2 { font-size: 2rem; }
    .p, &.p { font-size: 1.25rem; }
    .small, &.small { font-size: 1rem; }
  }
  @media (min-width: 1024px) {
    .h1, &.h1 { font-size: 6rem; }
    .h2, &.h2 { font-size: 3rem; }
  }
}

// Utilities
strong, .bold { font-weight: bold; }
.regular { font-weight: normal; }
.caps { text-transform: uppercase; letter-spacing: .2em; }
.center { text-align: center; }
.right-align  { text-align: right; }

// Type Spacing
// Apply the .type-margins class to parent elements for default type spacing
.type-margins {
  h1, .h1 { margin-bottom: $space; }
  h2, .h2 { margin-bottom: $space; }
  h3, h4, h5, h6, p, dl, ol, ul { margin-bottom: $space; }
}



// Layout

// Margins
.m1  { margin: $space; }
.mt1 { margin-top: $space; }
.mr1 { margin-right: $space; }
.mb1 { margin-bottom: $space; }
.ml1 { margin-left: $space; }

.m2  { margin: 2 * $space; }
.mt2 { margin-top: 2 * $space; }
.mr2 { margin-right: 2 * $space; }
.mb2 { margin-bottom: 2 * $space; }
.ml2 { margin-left: 2 * $space; }

.m3  { margin: 3 * $space; }
.mt3 { margin-top: 3 * $space; }
.mr3 { margin-right: 3 * $space; }
.mb3 { margin-bottom: 3 * $space; }
.ml3 { margin-left: 3 * $space; }

.m4  { margin: 4 * $space; }
.mt4 { margin-top: 4 * $space; }
.mr4 { margin-right: 4 * $space; }
.mb4 { margin-bottom: 4 * $space; }
.ml4 { margin-left: 4 * $space; }

// Useful for horizontally center elements with a fixed width
.mxa { margin-right: auto; margin-left: auto; }

// Padding
.p1  { padding: $space; }
.px1 { padding-right: $space; padding-left: $space; }
.py1 { padding-top: $space; padding-bottom: $space; }

.p2  { padding: 2 * $space; }
.px2 { padding-right: 2 * $space; padding-left: 2 * $space; }
.py2 { padding-top: 2 * $space; padding-bottom: 2 * $space; }

.p3  { padding: 3 * $space; }
.px3 { padding-right: 3 * $space; padding-left: 3 * $space; }
.py3 { padding-top: 3 * $space; padding-bottom: 3 * $space; }

.p4  { padding: 4 * $space; }
.px4 { padding-right: 4 * $space; padding-left: 4 * $space; }
.py4 { padding-top: 4 * $space; padding-bottom: 4 * $space; }

// Display
.inline       { display: inline;}
.block        { display: block; }
.inline-block { display: inline-block; }

// Utilities
.clearfix { overflow: hidden; }
.left { float: left; }
.right { float: right; }

.fit { max-width: 100%; }