hux 0.0.0 → 0.0.1

data/core/utilities/_mixins.scss

@@ -0,0 +1,301 @@
+@mixin arrow($color) {
+  border: 1px solid $color;
+  border-right: 0;
+  border-top: 0;
+  content: " ";
+  display: block;
+  height: 0.5em;
+  pointer-events: none;
+  position: absolute;
+  transform: rotate(-45deg);
+  width: 0.5em;
+}
+
+@mixin block {
+  &:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
+}
+
+@mixin clearfix {
+  &:after {
+    clear: both;
+    content: " ";
+    display: table;
+  }
+}
+
+@mixin center($width, $height: 0) {
+  position: absolute;
+
+  @if $height != 0 {
+    left: calc(50% - (#{$width} / 2));
+    top: calc(50% - (#{$height} / 2));
+  }
+  @else {
+    left: calc(50% - (#{$width} / 2));
+    top: calc(50% - (#{$width} / 2));
+  }
+}
+
+@mixin delete {
+  @include unselectable;
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background-color: rgba($black, 0.2);
+  border: none;
+  border-radius: 290486px;
+  cursor: pointer;
+  display: inline-block;
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-size: $size-normal;
+  height: 20px;
+  max-height: 20px;
+  max-width: 20px;
+  min-height: 20px;
+  min-width: 20px;
+  outline: none;
+  position: relative;
+  vertical-align: top;
+  width: 20px;
+
+  &:before,
+  &:after {
+    background-color: $white;
+    content: "";
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%) rotate(45deg);
+    transform-origin: center center;
+  }
+
+  &:before {
+    height: 2px;
+    width: 50%;
+  }
+
+  &:after {
+    height: 50%;
+    width: 2px;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: rgba($black, 0.3);
+  }
+
+  &:active {
+    background-color: rgba($black, 0.4);
+  }
+
+  // Sizes
+  &.is-small {
+    height: 16px;
+    max-height: 16px;
+    max-width: 16px;
+    min-height: 16px;
+    min-width: 16px;
+    width: 16px;
+  }
+
+  &.is-medium {
+    height: 24px;
+    max-height: 24px;
+    max-width: 24px;
+    min-height: 24px;
+    min-width: 24px;
+    width: 24px;
+  }
+
+  &.is-large {
+    height: 32px;
+    max-height: 32px;
+    max-width: 32px;
+    min-height: 32px;
+    min-width: 32px;
+    width: 32px;
+  }
+}
+
+@mixin fa($size, $dimensions) {
+  display: inline-block;
+  font-size: $size;
+  height: $dimensions;
+  line-height: $dimensions;
+  text-align: center;
+  vertical-align: top;
+  width: $dimensions;
+}
+
+@mixin hamburger($dimensions) {
+  cursor: pointer;
+  display: block;
+  height: $dimensions;
+  position: relative;
+  width: $dimensions;
+
+  span {
+    background-color: currentColor;
+    display: block;
+    height: 1px;
+    left: 50%;
+    margin-left: -7px;
+    position: absolute;
+    top: 50%;
+    transition: none $speed $easing;
+    transition-property: background, left, opacity, transform;
+    width: 15px;
+
+    &:nth-child(1) {
+      margin-top: -6px;
+    }
+
+    &:nth-child(2) {
+      margin-top: -1px;
+    }
+
+    &:nth-child(3) {
+      margin-top: 4px;
+    }
+  }
+
+  &:hover {
+    background-color: rgba(black, 0.05);
+  }
+
+  // Modifers
+  &.is-active {
+    span {
+      &:nth-child(1) {
+        margin-left: -5px;
+        transform: rotate(45deg);
+        transform-origin: left top;
+      }
+
+      &:nth-child(2) {
+        opacity: 0;
+      }
+
+      &:nth-child(3) {
+        margin-left: -5px;
+        transform: rotate(-45deg);
+        transform-origin: left bottom;
+      }
+    }
+  }
+}
+
+@mixin loader {
+  animation: spinAround 500ms infinite linear;
+  border: 2px solid $border;
+  border-radius: 290486px;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  content: "";
+  display: block;
+  height: 1em;
+  position: relative;
+  width: 1em;
+}
+
+@mixin overflow-touch {
+  -webkit-overflow-scrolling: touch;
+}
+
+@mixin overlay($offset: 0) {
+  bottom: $offset;
+  left: $offset;
+  position: absolute;
+  right: $offset;
+  top: $offset;
+}
+
+@mixin placeholder {
+  $placeholders: ":-moz" ":-webkit-input" "-moz" "-ms-input";
+
+  @each $placeholder in $placeholders {
+    &:#{$placeholder}-placeholder {
+      @content;
+    }
+  }
+}
+
+@mixin unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+// Responsiveness
+
+@mixin from($device) {
+  @media screen and (min-width: $device) {
+    @content;
+  }
+}
+
+@mixin until($device) {
+  @media screen and (max-width: $device - 1px) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media screen and (max-width: $tablet - 1px) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media screen and (min-width: $tablet), print {
+    @content;
+  }
+}
+
+@mixin tablet-only {
+  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
+    @content;
+  }
+}
+
+@mixin touch {
+  @media screen and (max-width: $desktop - 1px) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media screen and (min-width: $desktop) {
+    @content;
+  }
+}
+
+@mixin desktop-only {
+  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) {
+    @content;
+  }
+}
+
+@mixin widescreen {
+  @media screen and (min-width: $widescreen) {
+    @content;
+  }
+}
+
+@mixin widescreen-only {
+  @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) {
+    @content;
+  }
+}
+
+@mixin fullhd {
+  @media screen and (min-width: $fullhd) {
+    @content;
+  }
+}

data/core/utilities/_variables.scss

@@ -0,0 +1,153 @@
+////////////////////////////////////////////////
+////////////////////////////////////////////////
+// 1. Initial variables
+
+// Colors
+$black: hsl(0, 0%, 4%) !default;
+$black-bis: hsl(0, 0%, 7%) !default;
+$black-ter: hsl(0, 0%, 14%) !default;
+
+$grey-darker: hsl(0, 0%, 21%) !default;
+$grey-dark: hsl(0, 0%, 29%) !default;
+$grey: hsl(0, 0%, 48%) !default;
+$grey-light: hsl(0, 0%, 71%) !default;
+$grey-lighter: hsl(0, 0%, 86%) !default;
+
+$white-ter: hsl(0, 0%, 96%) !default;
+$white-bis: hsl(0, 0%, 98%) !default;
+$white: hsl(0, 0%, 100%) !default;
+
+$orange: hsl(14, 100%, 53%) !default;
+$yellow: hsl(48, 100%, 67%) !default;
+$green: hsl(141, 71%, 48%) !default;
+$turquoise: hsl(171, 100%, 41%) !default;
+$blue: hsl(217, 71%, 53%) !default;
+$purple: hsl(271, 100%, 71%) !default;
+$red: hsl(348, 100%, 61%) !default;
+
+// Typography
+$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
+$family-monospace: monospace !default;
+$render-mode: optimizeLegibility !default;
+
+$size-1: 3rem !default;
+$size-2: 2.5rem !default;
+$size-3: 2rem !default;
+$size-4: 1.5rem !default;
+$size-5: 1.25rem !default;
+$size-6: 1rem !default;
+$size-7: 0.75rem !default;
+
+$weight-light: 300 !default;
+$weight-normal: 400 !default;
+$weight-semibold: 500 !default;
+$weight-bold: 700 !default;
+
+// Body
+$body-background: #fff !default;
+$body-size: 16px !default;
+
+// Responsiveness
+// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
+$tablet: 769px !default;
+
+// 960px container + 40px
+$desktop: 1000px !default;
+
+// 1152px container + 40
+$widescreen: 1192px !default;
+
+// 1344px container + 40
+$fullhd: 1384px !default;
+
+// Miscellaneous
+$easing: ease-out !default;
+$radius-small: 2px !default;
+$radius: 3px !default;
+$radius-large: 5px !default;
+$speed: 86ms !default;
+
+////////////////////////////////////////////////
+////////////////////////////////////////////////
+// 2. Primary colors
+
+$primary: $turquoise !default;
+
+$info: $blue !default;
+$success: $green !default;
+$warning: $yellow !default;
+$danger: $red !default;
+
+$light: $white-ter !default;
+$dark: $grey-darker !default;
+
+////////////////////////////////////////////////
+////////////////////////////////////////////////
+// 3. Applied variables
+
+// Invert colors
+$orange-invert: findColorInvert($orange) !default;
+$yellow-invert: findColorInvert($yellow) !default;
+$green-invert: findColorInvert($green) !default;
+$turquoise-invert: findColorInvert($turquoise) !default;
+$blue-invert: findColorInvert($blue) !default;
+$purple-invert: findColorInvert($purple) !default;
+$red-invert: findColorInvert($red) !default;
+
+$primary-invert: $turquoise-invert !default;
+$info-invert: $blue-invert !default;
+$success-invert: $green-invert !default;
+$warning-invert: $yellow-invert !default;
+$danger-invert: $red-invert !default;
+$light-invert: $dark !default;
+$dark-invert: $light !default;
+
+// General colors
+$background: $white-ter !default;
+
+$border: $grey-lighter !default;
+$border-hover: $grey-light !default;
+
+// Text colors
+$text: $grey-dark !default;
+$text-invert: findColorInvert($text) !default;
+$text-light: $grey !default;
+$text-strong: $grey-darker !default;
+
+// Code colors
+$code: $red !default;
+$code-background: $background !default;
+
+$pre: $text !default;
+$pre-background: $background !default;
+
+// Link colors
+$link: $primary !default;
+$link-invert: $primary-invert !default;
+$link-visited: $purple !default;
+
+$link-hover: $grey-darker !default;
+$link-hover-border: $grey-light !default;
+
+$link-focus: $grey-darker !default;
+$link-focus-border: $primary !default;
+
+$link-active: $grey-darker !default;
+$link-active-border: $grey-dark !default;
+
+// Typography
+$family-primary: $family-sans-serif !default;
+$family-code: $family-monospace !default;
+
+$size-small: $size-7 !default;
+$size-normal: $size-6 !default;
+$size-medium: $size-5 !default;
+$size-large: $size-4 !default;
+
+////////////////////////////////////////////////
+////////////////////////////////////////////////
+// 4. Lists and maps
+
+$colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)) !default;
+
+$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;

data/hux.gemspec

@@ -0,0 +1,31 @@
+lib = File.expand_path("../lib", __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require "hux/version"
+
+Gem::Specification.new do |s|
+  s.add_development_dependency "bundler", "~> 1.3"
+  s.add_development_dependency "rake"
+  s.add_development_dependency "rspec"
+  s.add_development_dependency "scss_lint", "~> 0.47"
+  s.add_runtime_dependency "bourbon", "~> 5.0.0.beta.7"
+  s.add_runtime_dependency "sass", "~> 3.4"
+  s.add_runtime_dependency "thor", "~> 0.19"
+  s.authors = [
+    "dikaio"
+  ]
+  s.description = <<-DESC
+    Hux
+  DESC
+  s.email = "i@dikaio.com"
+  s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.files = `git ls-files`.split($/)
+  s.homepage = ""
+  s.license = "MIT"
+  s.name = "hux"
+  s.require_paths = ["lib"]
+  s.summary = <<-SUMMARY
+    Scaffold styles, variables and structure for Bourbon projects.
+  SUMMARY
+  s.test_files = s.files.grep(%r{^(test|spec|features)/})
+  s.version = Hux::VERSION
+end

data/lib/hux/generator.rb

@@ -0,0 +1,80 @@
+require 'hux/version'
+require 'fileutils'
+require 'pathname'
+require 'thor'
+
+module Hux
+  class Generator < Thor
+    map ['-v', '--version'] => :version
+    map ['scaffold'] => :install
+    map ['delete'] => :remove
+
+    desc 'install', 'Install Hux into your project'
+    method_options path: :string
+    def install
+      if hux_files_already_exist?
+        puts "Hux files already installed, doing nothing."
+      else
+        install_files
+        puts "Hux files installed to #{install_path}/base"
+      end
+    end
+
+    desc 'reset', 'Reset Hux'
+    def reset
+      if hux_files_already_exist?
+        remove_hux_directory
+        install_files
+        puts "Hux files updated."
+      else
+        puts "No existing Hux installation. Doing nothing."
+      end
+    end
+
+    desc 'remove', 'Remove Hux'
+    def remove
+      if hux_files_already_exist?
+        remove_hux_directory
+        puts "Hux was successfully removed."
+      else
+        puts "No existing Hux installation. Doing nothing."
+      end
+    end
+
+    desc 'version', 'Show Hux version'
+    def version
+      say "Hux #{Hux::VERSION}"
+    end
+
+    private
+
+    def hux_files_already_exist?
+      File.directory?(install_path)
+    end
+
+    def install_path
+      Pathname.new(options[:path].to_s).join('base')
+    end
+
+    def install_files
+      FileUtils.mkdir_p(install_path)
+      FileUtils.cp_r(all_stylesheets, install_path)
+    end
+
+    def remove_hux_directory
+      FileUtils.rm_rf("base")
+    end
+
+    def all_stylesheets
+      Dir["#{stylesheets_directory}/*"]
+    end
+
+    def stylesheets_directory
+      File.join(top_level_directory, "core")
+    end
+
+    def top_level_directory
+      File.dirname(File.dirname(File.dirname(__FILE__)))
+    end
+  end
+end

data/lib/hux/version.rb

@@ -0,0 +1,3 @@
+module Hux
+  VERSION = "0.0.1"
+end

data/lib/hux.rb

@@ -1,2 +1,2 @@
 require "hux/version"
-require "hux/generator"
+require "hux/generator"

data/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "Hux",
+  "version": "0.0.2",
+  "description": "Scaffold styles, variables and structure for Bourbon projects.",
+  "main": "Gulpfile.js",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "keywords": [
+    "bourbon",
+    "css",
+    "sass",
+    "scss",
+    "scaffold"
+  ],
+  "author": {
+    "name": "Dikaio",
+    "url": ""
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": ""
+  },
+  "homepage": "",
+  "devDependencies": {
+    "bourbon": "^5.0.0-beta.7",
+    "gulp": "^3.9",
+    "gulp-autoprefixer": "^3.1",
+    "gulp-connect": "^5.0",
+    "gulp-sass": "^3.1"
+  }
+}

data/spec/bitters_spec.rb

@@ -0,0 +1,17 @@
+require 'spec_helper'
+require 'sass'
+require 'bourbon'
+
+describe Hux do
+  after do
+    `rm -rf spec/fixtures/base`
+  end
+
+  it 'compiles to valid css' do
+    `hux install --path spec/fixtures`
+
+    Sass.compile_file('spec/fixtures/application.scss', '/tmp/output.css')
+
+    expect(Pathname('/tmp/output.css')).to exist
+  end
+end

data/spec/fixtures/application.scss

@@ -0,0 +1,2 @@
+@import "bourbon";
+@import "base/base";

data/spec/spec_helper.rb

@@ -0,0 +1,3 @@
+$LOAD_PATH << File.join('../lib')
+
+require 'hux'