ad_particles 0.1.0

data/atomic/particles/mixins/_helper.scss

@@ -0,0 +1,32 @@
+@import "../props/color";
+@import "../props/box";
+
+@mixin helper-divide_children() {
+
+  > *:after {
+    content: "|";
+    margin: 0 $box-spacing;
+  }
+
+  > *:last-child:after {
+    content: none;
+  }
+
+}
+
+@mixin helper-colorize_button($bkgcolor : $color-brand--primary, $textcolor : $color-white) {
+  background-color: $bkgcolor;
+  color: $textcolor;
+
+  &:hover {
+    background-color: lighten($bkgcolor, 10%);
+  }
+
+}
+
+@mixin helper-container_fluid() {
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: $box-spacing--wide;
+  padding-right: $box-spacing--wide;
+}

data/atomic/particles/mixins/_layout.scss

@@ -0,0 +1,155 @@
+@mixin layout-flex-flexbox($fallback: false) {
+
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+
+}
+
+@mixin layout-flex-direction($value: row, $fallback: false) {
+
+  @if $value == row-reverse {
+		-webkit-box-direction: reverse;
+		-webkit-box-orient: horizontal;
+  } @else if $value == column {
+		-webkit-box-direction: normal;
+		-webkit-box-orient: vertical;
+  } @else if $value == column-reverse {
+		-webkit-box-direction: reverse;
+		-webkit-box-orient: vertical;
+  } @else {
+		-webkit-box-direction: normal;
+		-webkit-box-orient: horizontal;
+	}
+  -webkit-flex-direction: $value;
+  -moz-flex-direction: $value;
+  -ms-flex-direction: $value;
+  flex-direction: $value;
+
+}
+
+@mixin layout-flex-wrap($value: nowrap) {
+
+  -webkit-flex-wrap: $value;
+  -moz-flex-wrap: $value;
+  @if $value == nowrap {
+		-ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+
+}
+
+@mixin layout-flex-flow($values: (row nowrap)) {
+
+  -webkit-flex-flow: $values;
+  -moz-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+
+}
+
+@mixin layout-flex-order($int: 0) {
+
+  -webkit-box-ordinal-group: $int + 1;
+  -webkit-order: $int;
+  -moz-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+
+}
+
+@mixin layout-flex-grow($int: 0) {
+
+  -webkit-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -moz-flex-grow: $int;
+  -ms-flex-positive: $int;
+  flex-grow: $int;
+
+}
+
+@mixin layout-flex-shrink($int: 1) {
+
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex-negative: $int;
+  flex-shrink: $int;
+
+}
+
+@mixin layout-flex-basis($value: auto) {
+
+  -webkit-flex-basis: $value;
+  -moz-flex-basis: $value;
+  -ms-flex-preferred-size: $value;
+  flex-basis: $value;
+
+}
+
+@mixin layout-flex($flex-grow: 1, $flex-shrink: null, $flex-basis: null) {
+
+  $boxflex: $flex-grow;
+
+  @if type-of($flex-grow) == "list" {
+		$boxflex: nth($flex-grow, 1);
+	}
+
+  -webkit-box-flex: $boxflex;
+  -webkit-flex: $flex-grow $flex-shrink $flex-basis;
+  -moz-box-flex: $boxflex;
+  -moz-flex: $flex-grow $flex-shrink $flex-basis;
+  -ms-flex: $flex-grow $flex-shrink $flex-basis;
+  flex: $flex-grow $flex-shrink $flex-basis;
+}
+
+@mixin layout-flex-align_items($value: stretch) {
+
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -ms-flex-align: $value;
+	}
+  -webkit-align-items: $value;
+  -moz-align-items: $value;
+  align-items: $value;
+
+}
+
+@mixin layout-flex-align-self($value: auto) {
+
+  -webkit-align-self: $value;
+  -moz-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+
+}
+
+@mixin layout-flex-align-content($value: stretch) {
+
+  -webkit-align-content: $value;
+  -moz-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+
+}

data/atomic/particles/mixins/_rwd.scss

@@ -0,0 +1,29 @@
+@import "../props/rwd";
+@import "../modifiers/rwd";
+
+@mixin rwd-scope--phone() {
+  $condition: query($max: $rwd-breakpoint--phone);
+
+  @media #{$condition} {
+    @content;
+  }
+
+}
+
+@mixin rwd-scope--tablet() {
+  $condition: query($rwd-breakpoint--tablet);
+
+  @media #{$condition} {
+    @content;
+  }
+
+}
+
+@mixin desktop() {
+  $condition: query($rwd-breakpoint--desktop);
+
+  @media#{$condition} {
+    @content;
+  }
+
+}

data/atomic/particles/mixins/_type.scss

@@ -0,0 +1,15 @@
+@import "../props/config";
+@import "../props/type";
+@import "../modifiers/string";
+
+@mixin type-baseline($fontfam: $fontface-copy--regular) {
+  font: normal $type-weight #{$type-size--baseline}/#{$type-leading} #{$fontfam};
+};
+
+@mixin type-src($font: $fontface-copy) {
+  $font_url: "#{$config-path--fonts}#{capitalize($font)}/#{$font}-webfont.";
+  src: url("#{$font-url}eot");
+  src: url("#{$font-url}eot#iefix") format("embedded-opentype"),
+       url("#{$font-url}woff2") format("woff2"),
+       url("#{$font-url}woff") format("woff");
+};

data/atomic/particles/modifiers/_rwd.scss

@@ -0,0 +1,18 @@
+
+@function query($min: false, $max: false) {
+  $condition: "only screen and ";
+
+  @if $min {
+    $condition: $condition + "(min-width: #{$min})";// % $min;
+  }
+  @if $min {
+    @if $max {
+      $condition: $condition + " and ";
+    }
+  }
+  @if $max {
+    $condition: $condition + "(max-width: " + ($max - 1) + ")";// % ($max - 1);
+  }
+
+  @return $condition;
+}

data/atomic/particles/modifiers/_string.scss

@@ -0,0 +1,3 @@
+@function capitalize($string) {
+  @return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
+};

data/atomic/particles/props/_box.scss

@@ -0,0 +1,6 @@
+$box-border_radius: 3px;
+$box-spacing--thinner: 2px;
+$box-spacing--thin: 5px;
+$box-spacing: 10px;
+$box-spacing--wide: 15px;
+$box-spacing--wider: 20px;

data/atomic/particles/props/_color.scss

@@ -0,0 +1,27 @@
+@charset "UTF-8";
+
+$color-black--alpha:      rgba(0, 0, 0, 0);
+$color-black:             rgba(0, 0, 0, 1);
+$color-gray--alpha_dark:  rgba(184, 184, 184, 0);
+$color-gray--darker:      lighten($color-black, 13.5%);
+$color-gray--dark:        lighten($color-black, 20%);
+$color-gray:              lighten($color-black, 33.5%);
+$color-gray--light:       lighten($color-black, 60%);
+$color-gray--lighter:     lighten($color-black, 93.5%);
+$color-gray--alpha_light: rgba(204, 204, 204, 0.65);
+$color-white:             rgba(255, 255, 255, 1);
+$color-white--alpha:      rgba(255, 255, 255, 0);
+
+$color-shadow: #818181;
+
+$color-brand--primary:      #007fb2;
+$color-brand--secondary:    #e6b319;
+$color-brand--accent:       #c9eefd;
+$color-brand--primary_dark: #274982;
+
+$color-action--success: #60ab2a;
+$color-action--info:    #5bc0de;
+$color-action--warning: #f0ad4e;
+$color-action--danger:  #ffdede;
+
+$color-table_text: $color-gray;

data/atomic/particles/props/_config.scss

@@ -0,0 +1,4 @@
+$config-path: "/";
+$config-path--asset_prefix: "..";
+$config-path--images: "/images/";
+$config-path--fonts: "https://cdnjs.cloudflare.com/ajax/libs/ink/3.1.10/fonts/";

data/atomic/particles/props/_icon.scss

@@ -0,0 +1 @@
+$icon-input--checkbox: '"\2713"';

data/atomic/particles/props/_image.scss

@@ -0,0 +1,4 @@
+@import "config";
+
+$image-car--small:    "#{config-path--asset_prefix}#{$config-path--images}images/pages/car.png";
+$image-carfox--large: "#{config-path--asset_prefix}#{$config-path--images}images/pages/large-fox.png";

data/atomic/particles/props/_motion.scss

@@ -0,0 +1,4 @@
+$motion-duration:  1s;
+$motion-fill_mode: both;
+$motion-backface_visibility: visible;
+$motion-timing_function: ease-in;

data/atomic/particles/props/_rwd.scss

@@ -0,0 +1,3 @@
+$rwd-breakpoint--phone:   326px;
+$rwd-breakpoint--tablet:  768px;
+$rwd-breakpoint--desktop: 1200px;

data/atomic/particles/props/_type.scss

@@ -0,0 +1,51 @@
+$type-size--baseline: 14px;
+
+$type-size--h1: 2.143rem;
+$type-size--h2: 1.714rem;
+$type-size--h3: 1.143rem;
+$type-size--h4: 1rem;
+$type-size--h5: 0.857rem;
+$type-size--h6: 0.714rem;
+
+$type-size--table: 0.786rem;
+
+$type-weight--light: 300;
+$type-weight:        500;
+$type-weight--heavy: 700;
+
+$type-font_style: italic;
+
+$type-button_text_transform: uppercase;
+
+$type-leading: 1;
+$type-kerning: normal;
+
+$fontface-copy: "roboto";
+$fontface-copy--thin:    "#{$fontface-copy}-thin";
+$fontface-copy--regular: "#{$fontface-copy}-regular";
+$fontface-copy--light:   "#{$fontface-copy}-light";
+$fontface-copy--medium:  "#{$fontface-copy}-medium";
+$fontface-copy--bold:    "#{$fontface-copy}-bold";
+$fontface-copy--black:   "#{$fontface-copy}-black";
+
+$fontface-copy--thin_italic:    "#{$fontface-copy--thin}italic";
+$fontface-copy--light_italic:   "#{$fontface-copy--light}italic";
+$fontface-copy--medium_italic:  "#{$fontface-copy--medium}italic";
+$fontface-copy--regular_italic: "#{$fontface-copy--regular}italic";
+$fontface-copy--bold_italic:    "#{$fontface-copy--bold}italic";
+$fontface-copy--black_italic:   "#{$fontface-copy--black}italic";
+
+$font_faces: (
+    $fontface-copy--thin,
+    $fontface-copy--light,
+    $fontface-copy--regular,
+    $fontface-copy--medium,
+    $fontface-copy--bold,
+    $fontface-copy--black,
+    $fontface-copy--thin_italic,
+    $fontface-copy--light_italic,
+    $fontface-copy--regular_italic,
+    $fontface-copy--medium_italic,
+    $fontface-copy--bold_italic,
+    $fontface-copy--black_italic
+);

data/eyeglass-exports.js

@@ -0,0 +1,7 @@
+var atomicDesignParticles = require("./index");
+
+module.exports = function(eyeglass, sass) {
+  return {
+    sassDir: atomicDesignParticles.includePaths[0]
+  };
+};

data/index.js

@@ -0,0 +1,7 @@
+var path = require("path");
+
+module.exports = {
+  includePaths: [
+    path.join(__dirname, "atomic")
+  ]
+};

data/lib/ad_particles.rb

@@ -0,0 +1,8 @@
+require "ad_particles/generator"
+
+atomic_path = File.expand_path("../../atomic", __FILE__)
+
+ENV["SASS_PATH"] = [
+  ENV["SASS_PATH"],
+  atomic_path,
+].compact.join(File::PATH_SEPARATOR)

data/lib/ad_particles/generator.rb

@@ -0,0 +1,81 @@
+require "ad_particles/version"
+require "fileutils"
+require "thor"
+require "pathname"
+
+module AtomicDesignParticles
+  class Generator < Thor
+    map ["-v", "--version"] => :version
+
+    desc "install", "Install Atomic Particles into your project"
+    method_options :path => :string, :force => :boolean
+    def install
+      if atomic_files_already_exist? && !options[:force]
+        puts "Atomic Particles files are already installed. You are good to go!"
+      else
+        install_files
+        puts "Atomic Particles files installed to #{install_path}/"
+      end
+    end
+
+    desc "update", "Update Atomic Particles"
+    method_options :path => :string
+    def update
+      if atomic_files_already_exist?
+        remove_atomic_directory
+        install_files
+        puts "Atomic Particles files have been updated."
+      else
+        puts "No existing Atomic Particles installation exists."
+      end
+    end
+
+    desc "version", "Show Atomic Particles version"
+    def version
+      say "Atomic Design Particles #{AtomicDesignParticles::VERSION}"
+    end
+
+    private
+
+    def atomic_files_already_exist?
+      install_path.exist?
+    end
+
+    def install_path
+      @install_path ||= if options[:path]
+          Pathname.new(File.join(options[:path], "particles"))
+        else
+          Pathname.new("particles")
+        end
+    end
+
+    def install_files
+      make_install_directory
+      copy_in_scss_files
+    end
+
+    def remove_atomic_directory
+      FileUtils.rm_rf("particles")
+    end
+
+    def make_install_directory
+      FileUtils.mkdir_p(install_path)
+    end
+
+    def copy_in_scss_files
+      FileUtils.cp_r(all_stylesheets, install_path)
+    end
+
+    def all_stylesheets
+      Dir["#{stylesheets_directory}/*"]
+    end
+
+    def stylesheets_directory
+      File.join(top_level_directory, "atomic")
+    end
+
+    def top_level_directory
+      File.dirname(File.dirname(File.dirname(__FILE__)))
+    end
+  end
+end