shelldandy/manila-mixins

A bunch of really cool Sass Mixins

Manila Mixins

A bunch of cool Sass Mixins in part made by me and others curated by me from various sources.

To override some settings just change the settings file or make a copy and import BEFORE Manila 😘

Documentation

Documentation is available at https://mike3run.github.io/manila-mixins/

The Mixins

• Align
• Background
• BEM
• Breakpoints
• Clearfix
• Flex Columns
• Float Columns
• Font Face
• Google Font Importer
• Grid Maker
• Medium Underline
• Placeholder
• Size
• Smart Underline
• Standard Background

Testing

Using jest and sass-true run

$ npm test

Inside each mixin folder there is a [name].test.scss and [name].test.js

See Sass-True library docs for more info

Resources

• Jeet.gs
• Medium.com
• Eager.io
• GetBEM.com
• Jest
• Sass-True

manila-mixins's Issues

Add iETarget Mixin

@mixin std-background {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

BEM Mixins

@mixin e($element) {
    &__#{$element} {
        @content;
    }
}

@mixin m($modifier) {
    &--#{$modifier} {
        @content;
    }
}

@mixin is($state) {
  &.is-#{$state} {
    @content;
  }
}

SASS Error when compiling

Everything was going dandy, till a couple days ago our gulp task started throwing errors.

```Message:
    src/assets/styles/1-abstracts/_mixins.scss
Error: File to import not found or unreadable: manila.
       Parent style sheet: /Users/peterberwind/code/_clients/pop-and-suki-new-markup/src/assets/styles/1-abstracts/_mixins.scss
        on line 5 of src/assets/styles/1-abstracts/_mixins.scss
>> @import "manila";
   ^```

Tried rebuilding, updating, changing versions, etc - nothing had any effect.

I see there was some big updated here the other day. Any idea how to fix our situation.

Here is package.json

{
  "name": "pixel2html-0002860-0004469",
  "description": "pixel2html 0002860/0004469",
  "license": "MIT",
  "repository": "http://www.pixel2html.com",
  "version": "1.0.0",
  "scripts": {
    "start": "gulp",
    "code": "NODE_ENV=production gulp",
    "build": "NODE_ENV=production gulp build --prod",
    "preforceupload": "npm run build",
    "forceupload": "gulp theme:upload",
    "makeJS": "NODE_ENV=production gulp scripts"
  },
  "dependencies": {
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.4.0",
    "babelify": "^7.3.0",
    "browser-sync": "^2.18.13",
    "browserify": "^14.3.0",
    "browserify-global-shim": "^1.0.3",
    "circletype.js": "^1.1.2",
    "del": "^2.2.2",
    "emoji-regex": "^6.4.2",
    "gulp": "github:gulpjs/gulp#4.0",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-changed": "^3.1.0",
    "gulp-changed-in-place": "^2.2.0",
    "gulp-concat": "^2.6.0",
    "gulp-csscomb": "^3.0.8",
    "gulp-cssnano": "^2.1.2",
    "gulp-group-css-media-queries": "^1.2.0",
    "gulp-if": "^2.0.2",
    "gulp-load-plugins": "^1.5.0",
    "gulp-pug": "^3.1.0",
    "gulp-purifycss": "^0.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.5.4",
    "gulp-sass": "^3.1.0",
    "gulp-shopify-theme": "^1.0.14",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-svgmin": "^1.2.3",
    "gulp-svgstore": "^6.1.0",
    "gulp-uglify": "^2.1.2",
    "gulp-util": "^3.0.7",
    "gulp-zip": "^4.0.0",
    "jquery": "^3.2.1",
    "jquery.panzoom": "^3.2.2",
    "js-yaml": "^3.8.3",
    "lettering.js": "^0.8.2",
    "manila-mixins": "^2.4.0",
    "modularscale-sass": "^3.0.2",
    "redux": "^3.6.0",
    "require-dir": "^0.3.0",
    "rivets": "^0.9.6",
    "slick-carousel": "^1.6.0",
    "standard": "^10.0.2",
    "sticky-js": "^1.2.0",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "yargs": "^8.0.1"
  },
  "standard": {
    "globals": [
      "jQuery",
      "$",
      "WebFont",
      "Vue"
    ]
  },
  "devDependencies": {}
}

Debug Mode

@mixin debug {
  @at-root {
    * {
      outline: 1px solid red;
    }
  }
}

Reset button

Buttons are stupid here's a solution:

@mixin reset-btn {
  appearance: none;
  border: none;
  border-radius: 0;
  background: none;
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: inherit;
}

Flex grid

@mixin flex-grid($gutter: $column-gutter, $total: $columns--total, $sizes: $breakpoints) {
  // First we create the row that will hold the columns
  .row {
    margin-left: $gutter / 2 * -1;
    margin-right: $gutter / 2 * -1;
    display: flex;
    flex-wrap: wrap;
    &.aic {
      align-items: center;
    }
    &.jcc {
      justify-content: center;
    }
    &.centered {
      align-items: center;
      justify-content: center;
    }
  }

  [class^='col-'] {
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;
    max-width: 100%;
    flex-basis: 100%;
  }

  // We do a simple loop to output the bottom level columns
  @for $i from 1 through $columns--total {
    .col-#{$i} {
      max-width: percentage($i / $total);
      flex-basis: percentage($i / $total);
    }

    .col-offset-#{$i} {
      margin-left: percentage($i / $total);
    }
  }

  // Now we loop each sizes in the list of breakpoint-classes
  @each $name, $breakpoint in $sizes {
    @media (min-width: $breakpoint) {
      @for $i from 1 through $columns--total {
        .col-#{$name}-#{$i} {
          max-width: percentage($i / $total);
          flex-basis: percentage($i / $total);
        }

        .col-#{$name}-offset-#{$i} {
          margin-left: percentage($i / $total);
        }
      }
    }
  }
}