minions_rails 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c2170baeab97086064fa6cc0ca80ae9a1bf2f821
-  data.tar.gz: 008b274ffaf7844bba65cd6f52a3e1e88cd8ad26
+  metadata.gz: d7e8f44892163171e6dfb69feaa87d3d56e2b737
+  data.tar.gz: ec7041904619e3034d8515a7d2d634a1cd78143f
 SHA512:
-  metadata.gz: 6434723a501636ed186da7d25e621abdf65f4b3fc5b6165ac60c7d5f7f2e3d6808e17c609a991fd57b8ada231de53d4798cb10a01abaf1c7440e7323c1432e7d
-  data.tar.gz: 17c546ba25dd10c11b15158559e631aefb9e614c52ddce992bbef213c1e792e3bcdd189028cd4ed4e985eaf5d53512f76837c8dc98ddcd92ea9370c5299c6c4a
+  metadata.gz: 3176681fdb1c99c14db9f1c8acef3fc6d4c2012775600d6e244717cb210db08aa5554cafea7ad619b334485a1d797eb57cca3c7a9e6e39ee02f452544acbfbe7
+  data.tar.gz: bcdc8ed7760a4b2853f0b5f8cb03a6fede099b0defb8566e5d1bf5d4c16ddadafc67a2459b34964c12a537c30ec1af2a4ee719030e321465d321c9446b8ad914

data/app/assets/stylesheets/minions_rails/mixins/at.scss

@@ -0,0 +1,8 @@
+@mixin at($name) {
+  @if $name == 'mn' { @media (min-width: 0px) { @content } }
+  @if $name == 'xs' { @media (min-width: #{$xs}px) { @content } }
+  @if $name == 'sm' { @media (min-width: #{$sm}px) { @content } }
+  @if $name == 'md' { @media (min-width: #{$md}px) { @content } }
+  @if $name == 'lg' { @media (min-width: #{$lg}px) { @content } }
+  @if $name == 'xl' { @media (min-width: #{$xl}px) { @content } }
+}

data/app/assets/stylesheets/minions_rails/mixins/before.scss

@@ -0,0 +1,7 @@
+@mixin before($name) {
+  @if $name == 'xs' { @media (max-width: #{$xs - 1}px) { @content } }
+  @if $name == 'sm' { @media (max-width: #{$sm - 1}px) { @content } }
+  @if $name == 'md' { @media (max-width: #{$md - 1}px) { @content } }
+  @if $name == 'lg' { @media (max-width: #{$lg - 1}px) { @content } }
+  @if $name == 'xl' { @media (max-width: #{$xl - 1}px) { @content } }
+}

data/app/assets/stylesheets/minions_rails/mixins/exclude.scss

@@ -0,0 +1,6 @@
+@mixin exclude($name) {
+  @if $name == 'xs' { @media (max-width: #{$xs - 1}px), (min-width: #{$sm}px) { @content } }
+  @if $name == 'sm' { @media (max-width: #{$sm - 1}px), (min-width: #{$md}px) { @content } }
+  @if $name == 'md' { @media (max-width: #{$md - 1}px), (min-width: #{$lg}px) { @content } }
+  @if $name == 'lg' { @media (max-width: #{$lg - 1}px), (min-width: #{$xl}px) { @content } }
+}

data/app/assets/stylesheets/minions_rails/mixins/only.scss

@@ -0,0 +1,7 @@
+@mixin only($name) {
+  @if $name == 'mn' { @media (min-width: 0)        and (max-width: #{$xs - 1}px) { @content } }
+  @if $name == 'xs' { @media (min-width: #{$xs}px) and (max-width: #{$sm - 1}px) { @content } }
+  @if $name == 'sm' { @media (min-width: #{$sm}px) and (max-width: #{$md - 1}px) { @content } }
+  @if $name == 'md' { @media (min-width: #{$md}px) and (max-width: #{$lg - 1}px) { @content } }
+  @if $name == 'lg' { @media (min-width: #{$lg}px) and (max-width: #{$xl - 1}px) { @content } }
+}

data/lib/minions_rails/version.rb

@@ -1,3 +1,3 @@
 module MinionsRails
-  VERSION = "0.0.3"
+  VERSION = "0.0.4"
 end

data/test/dummy/app/assets/stylesheets/at_mixin.scss

@@ -0,0 +1,16 @@
+$xl: 1200 !default;
+$lg:  960 !default;
+$md:  720 !default;
+$sm:  600 !default;
+$xs:  480 !default;
+
+@import "minions_rails/mixins/at";
+
+body {
+  @include at(mn) { background-color: aqua }
+  @include at(xs) { background-color: red }
+  @include at(sm) { background-color: blue }
+  @include at(md) { background-color: orange }
+  @include at(lg) { background-color: purple }
+  @include at(xl) { background-color: yellow }
+}

data/test/dummy/app/assets/stylesheets/before_mixin.scss

@@ -0,0 +1,15 @@
+$xl: 1200 !default;
+$lg:  960 !default;
+$md:  720 !default;
+$sm:  600 !default;
+$xs:  480 !default;
+
+@import "minions_rails/mixins/before";
+
+body {
+  @include before(xl) { background-color: yellow }
+  @include before(lg) { background-color: purple }
+  @include before(md) { background-color: orange }
+  @include before(sm) { background-color: blue }
+  @include before(xs) { background-color: red }
+}

data/test/dummy/app/assets/stylesheets/exclude_mixin.scss

@@ -0,0 +1,12 @@
+$xl: 1200 !default;
+$lg:  960 !default;
+$md:  720 !default;
+$sm:  600 !default;
+$xs:  480 !default;
+
+@import "minions_rails/mixins/exclude";
+
+.red-except-when-xs { @include exclude(xs) { color: red } }
+.red-except-when-sm { @include exclude(sm) { color: red } }
+.red-except-when-md { @include exclude(md) { color: red } }
+.red-except-when-lg { @include exclude(lg) { color: red } }

data/test/dummy/app/assets/stylesheets/only_mixin.scss

@@ -0,0 +1,16 @@
+$xl: 1200 !default;
+$lg:  960 !default;
+$md:  720 !default;
+$sm:  600 !default;
+$xs:  480 !default;
+
+@import "minions_rails/mixins/at";
+@import "minions_rails/mixins/only";
+
+body {
+  @include only(mn) { background-color: aqua }
+  @include only(xs) { background-color: red }
+  @include only(sm) { background-color: blue }
+  @include only(md) { background-color: orange }
+  @include only(lg) { background-color: purple }
+}

data/test/dummy/app/controllers/pages_controller.rb

@@ -17,4 +17,20 @@ class PagesController < ApplicationController
   def scss_production
     render layout: "scss_production"
   end
+
+  def at_mixin
+    render layout: "at_mixin"
+  end
+
+  def before_mixin
+    render layout: "before_mixin"
+  end
+
+  def only_mixin
+    render layout: "only_mixin"
+  end
+
+  def exclude_mixin
+    render layout: "exclude_mixin"
+  end
 end

data/test/dummy/app/views/layouts/at_mixin.html.erb

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Dummy</title>
+  <%= stylesheet_link_tag    'at_mixin', media: 'all', 'data-turbolinks-track' => true %>
+  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+  <%= csrf_meta_tags %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/test/dummy/app/views/layouts/before_mixin.html.erb

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Dummy</title>
+  <%= stylesheet_link_tag    'before_mixin', media: 'all', 'data-turbolinks-track' => true %>
+  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+  <%= csrf_meta_tags %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/test/dummy/app/views/layouts/exclude_mixin.html.erb

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Dummy</title>
+  <%= stylesheet_link_tag    'exclude_mixin', media: 'all', 'data-turbolinks-track' => true %>
+  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+  <%= csrf_meta_tags %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/test/dummy/app/views/layouts/only_mixin.html.erb

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Dummy</title>
+  <%= stylesheet_link_tag    'only_mixin', media: 'all', 'data-turbolinks-track' => true %>
+  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+  <%= csrf_meta_tags %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/test/dummy/app/views/pages/at_mixin.html.erb

@@ -0,0 +1,31 @@
+Play with the window with to see the following code in action:
+
+<style>
+  pre {
+    background-color: #333;
+    color: #eee;
+    padding-right: 1em;
+    padding-left: 1em;
+  }
+</style>
+
+<pre>
+<code>
+$xl: 1200 !default;
+$lg:  960 !default;
+$md:  720 !default;
+$sm:  600 !default;
+$xs:  480 !default;
+
+@import "minions_rails/mixins/at";
+
+body {
+  @include at(mn) { background-color: aqua }
+  @include at(xs) { background-color: red }
+  @include at(sm) { background-color: blue }
+  @include at(md) { background-color: orange }
+  @include at(lg) { background-color: purple }
+  @include at(xl) { background-color: yellow }
+}
+</code>
+</pre>

data/test/dummy/app/views/pages/before_mixin.html.erb

@@ -0,0 +1,31 @@
+Play with the window with to see the following code in action:
+
+<style>
+  pre {
+    background-color: #333;
+    color: #eee;
+    padding-right: 1em;
+    padding-left: 1em;
+  }
+</style>
+
+<pre>
+<code>
+$xl: 1200 !default;
+$lg:  960 !default;
+$md:  720 !default;
+$sm:  600 !default;
+$xs:  480 !default;
+
+@import "minions_rails/mixins/before";
+
+body {
+  /* ORDER IS IMPORTANT */
+  @include before(xs) { background-color: red }
+  @include before(sm) { background-color: blue }
+  @include before(md) { background-color: orange }
+  @include before(lg) { background-color: purple }
+  @include before(xl) { background-color: yellow }
+}
+</code>
+</pre>

data/test/dummy/app/views/pages/exclude_mixin.html.erb

@@ -0,0 +1,32 @@
+Play with the window with to see the following code in action:
+
+<style>
+  pre {
+    background-color: #333;
+    color: #eee;
+    padding-right: 1em;
+    padding-left: 1em;
+  }
+</style>
+
+<pre>
+<code>
+$xl: 1200 !default;
+$lg:  960 !default;
+$md:  720 !default;
+$sm:  600 !default;
+$xs:  480 !default;
+
+@import "minions_rails/mixins/exclude";
+
+.red-except-when-xs { @include exclude(xs) { color: red } }
+.red-except-when-sm { @include exclude(sm) { color: red } }
+.red-except-when-md { @include exclude(md) { color: red } }
+.red-except-when-lg { @include exclude(lg) { color: red } }
+</code>
+</pre>
+
+<div class="red-except-when-xs">red except when 'xs'</div>
+<div class="red-except-when-sm">red except when 'sm'</div>
+<div class="red-except-when-md">red except when 'md'</div>
+<div class="red-except-when-lg">red except when 'lg'</div>

data/test/dummy/app/views/pages/index.html.erb

@@ -21,3 +21,25 @@
     [ Variable breakpoints ]
   </li>
 </ul>
+
+<p>
+  There are some mixins available to write app-classes with the same breakpoints as your custom minions classes.
+</p>
+
+<ul>
+  <li>
+    <%= link_to pages_at_mixin_path do %><code>at( &lt;breakpoint&gt; )</code><% end %>
+  </li>
+
+  <li>
+    <%= link_to pages_before_mixin_path do %><code>before( &lt;breakpoint&gt; )</code><% end %>
+  </li>
+
+  <li>
+    <%= link_to pages_only_mixin_path do %><code>only( &lt;breakpoint&gt; )</code><% end %>
+  </li>
+
+  <li>
+    <%= link_to pages_exclude_mixin_path do %><code>exclude( &lt;breakpoint&gt; )</code><% end %>
+  </li>
+</ul>

data/test/dummy/app/views/pages/only_mixin.html.erb

@@ -0,0 +1,30 @@
+Play with the window with to see the following code in action:
+
+<style>
+  pre {
+    background-color: #333;
+    color: #eee;
+    padding-right: 1em;
+    padding-left: 1em;
+  }
+</style>
+
+<pre>
+<code>
+$xl: 1200 !default;
+$lg:  960 !default;
+$md:  720 !default;
+$sm:  600 !default;
+$xs:  480 !default;
+
+@import "minions_rails/mixins/only";
+
+body {
+  @include only(mn) { background-color: aqua }
+  @include only(xs) { background-color: red }
+  @include only(sm) { background-color: blue }
+  @include only(md) { background-color: orange }
+  @include only(lg) { background-color: purple }
+}
+</code>
+</pre>

data/test/dummy/config/initializers/assets.rb

@@ -13,4 +13,8 @@ Rails.application.config.assets.precompile += %w(
   css_production.css
   scss_development.css
   scss_production.css
+  at_mixin.css
+  before_mixin.css
+  only_mixin.css
+  exclude_mixin.css
 )

data/test/dummy/config/routes.rb

@@ -5,5 +5,10 @@ Rails.application.routes.draw do
   get "/pages/scss_development", to: "pages#scss_development"
   get "/pages/scss_production", to: "pages#scss_production"
 
+  get "/pages/at_mixin", to: "pages#at_mixin"
+  get "/pages/before_mixin", to: "pages#before_mixin"
+  get "/pages/only_mixin", to: "pages#only_mixin"
+  get "/pages/exclude_mixin", to: "pages#exclude_mixin"
+
   mount MinionsRails::Engine => "/minions_rails"
 end