MinionsRails

This is a Rails wrapper for the minions.css project.

1. Installation
2. Important
3. About minions
4. CSS vs SCSS
5. Usage
6. CSS (development)
7. CSS (production)
8. SCSS (development)
9. SCSS (production)
10. Mixins
11. at
12. before
13. only
14. exclude

Add minions_rails to your Gemfile and bundle:

gem 'minions_rails'

minions.css is a huge library. There's nearly 1MB of CSS. It's not intended to be used segmentally. The development setups are included so you can get started quickly. Please don't use them in production.

For more information about minions.css, go to the library page: https://github.com/chantastic/minions.css

The scss version of minions.css allows you to customize media-query berakpoints. By default, minions.css uses the Bootstrap 4 breakpoints. They look like this:

@xl: 1200px
@lg:  992px
@md:  768px
@sm:  544px
@xs:  320px

This is an easy setup to get you up and running quickly. But it's a lot of CSS to load in production.

Working example

• Require minions_rails/development in your application.css file:

*= require "minions_rails/development"

DO NOT USE THIS IN PRODUCTION.

This is what a production setup might look like. Note that this is a .scss file. You could use sprockets if you like, but it'll result in a bunch of HTTP requests in development. They add up, if you're using a lot of minions.

I still consider it a CSS setup because you're using the raw CSS minions. These files aren't dynamic.

Working example

• Create a custom-minions.scss file
  • Import any and all minions files from minions_rails/css/

/* custom-minions.scss */

@import "minions_rails/css/padding";
@import "minions_rails/css/padding-mn";
@import "minions_rails/css/padding-xs";
@import "minions_rails/css/padding-sm";
@import "minions_rails/css/padding-md";
@import "minions_rails/css/padding-lg";
@import "minions_rails/css/padding-xl";

/* ... so on and so forth. */

This is an easy setup to get you up and running with custom breakpoints. But it's a lot of CSS to load in production.

Working example

• Create a custom-minions.scss file
  • Assign expected breakpoint variables $xl, $lg, $md, $sm, and $xs
  • Assign colors, if using any of the color files.
    • $white, $navy, $blue, $aqua, $teal, $olive, $green, $lime, $yellow, $orange, $red, $maroon, $fuchsia, $purple, $gray, $silver, $black
  • Import any and all minions files from minions_rails/scss/
• Require custom-minions into your application.css file

$xl: 1200;
$lg:  960;
$md:  720;
$sm:  600;
$xs:  480;

$white: #ffffff;
$navy: #001f3f;
$blue: #0074d9;
$aqua: #7fdbff;
$teal: #39cccc;
$olive: #3d9970;
$green: #2ecc40;
$lime: #01ff70;
$yellow: #ffdc00;
$orange: #ff851b;
$red: #ff4136;
$maroon: #85144b;
$fuchsia: #f012be;
$purple: #b10dc9;
$gray: #aaaaaa;
$silver: #dddddd;
$black: #111111;

@import "minions_rails/development-scss";

DO NOT USE THIS IN PRODUCTION.

This is the most customizable setup. You can control both the minions you use and the breakpoints they operate on.

Working example

• Create a custom-minions.scss file
  • Assign expected breakpoint variables $xl, $lg, $md, $sm, and $xs
  • Import any and all minions files from minions_rails/scss/
• Require custom-minions into your application.css file

/* custom-minions.scss */

$xl: 1200;
$lg:  960;
$md:  720;
$sm:  600;
$xs:  480;

$white: #ffffff;
$navy: #001f3f;
$blue: #0074d9;
$aqua: #7fdbff;
$teal: #39cccc;
$olive: #3d9970;
$green: #2ecc40;
$lime: #01ff70;
$yellow: #ffdc00;
$orange: #ff851b;
$red: #ff4136;
$maroon: #85144b;
$fuchsia: #f012be;
$purple: #b10dc9;
$gray: #aaaaaa;
$silver: #dddddd;
$black: #111111;

@import "minions_rails/scss/padding";
@import "minions_rails/scss/padding-mn";
@import "minions_rails/scss/padding-xs";
@import "minions_rails/scss/padding-sm";
@import "minions_rails/scss/padding-md";
@import "minions_rails/scss/padding-lg";
@import "minions_rails/scss/padding-xl";

/* ...and whatever else you need */

Interfaces ships with a bunch of mixins so you can style your classes with the same constraints minions uses.

The code
Example use

The code
Example use

The code
Example use

The code
Example use

<3 chantastic

This project rocks and uses MIT-LICENSE.