typi_rails 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: c2bb92bfa935d034c9593a1897ffde4ef2b108d7
+  data.tar.gz: 59792b8353472831010756f3783eedbc8c88fd25
+SHA512:
+  metadata.gz: 71241af6eac7067436c56b9c10a277448ad0789ab7a0cebbf3f84525a643b96512c8ec2a6094cdad2de74dad2fab5d4a4cc03b18d436929cd87fbf6b5e7602bb
+  data.tar.gz: 1196f96dcd39903409e21a62b4e717b55015427481bb8751bb3955af0325e056b3512d47a567660216ccf476e3ab91568279ea0f900268a854ba33ffde93cfdc

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2017 Pete Cass
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,40 @@
+# TypiRails
+
+![Codeship](https://codeship.com/projects/000e2420-c497-0134-7204-7e1cf7b64920/status?branch=master)
+
+Typi Rails is a Gemified wrapper for [Typi](https://github.com/zellwk/typi) (A Sass Mixin) for use in you Rails project
+
+## Usage
+For detailed usage please refer to [https://github.com/zellwk/typi](https://github.com/zellwk/typi)
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+# ./Gemfile
+# ...
+gem 'typi_rails'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+You can then incorporate Typi into the asset pipeline.
+
+Import Typi styles in `app/assets/stylesheets/application.scss`
+
+Make sure the file has the `.scss` extension (or `.sass` for the indentation based Sass syntax). If you have just generated a new Rails app it will most likely have a `.css` extension. If this file exists, it will be served instead of Sass, so rename it and delete all the require statements and use the `@import` directive native to sass.
+
+```bash
+$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
+```
+
+```scss
+// app/assets/stylesheets/application.scss
+@import 'typi';
+```
+
+## License
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,11 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+desc 'Updates and copies files from bower'
+task :update do
+  require './tasks/update'
+  Update.new.extract
+end

data/app/assets/stylesheets/_typi.scss

@@ -0,0 +1,8 @@
+$breakpoints: () !default;
+$typi: (null: (16px, 1.5)) !default;
+$typi-ms: false !default;
+$typi-breakpoint: null !default;
+
+@import 'ty/mixins';
+@import 'ty/functions';
+@import 'typi/typi';

data/app/assets/stylesheets/ty/_functions.scss

@@ -0,0 +1,234 @@
+// _ty-font-size
+// =============
+// Calls _ty-calc-font-size or _ty-base-size
+@function _ty-font-size(
+  $font-size,
+  $breakpoint,
+  $typi,
+  $rem,
+  $base: false,
+  $typi-map: false
+) {
+  @if $base == true {
+    @return _ty-base-size($font-size);
+  } @else {
+    @return _ty-calc-font-size($font-size, $breakpoint, $typi, $rem, $typi-map);
+  }
+}
+
+// _ty-calc-font-size
+// =======
+// returns correct rem value depending on
+// breakpoint
+@function _ty-calc-font-size(
+  $font-size,
+  $breakpoint,
+  $typi,
+  $rem,
+  $typi-map: false
+) {
+  @if unitless($font-size) {
+    @if function-exists(ms) {
+      $typi-ms: map-get($typi-map, ms);
+      @if $rem {
+        @return _ty-strip-unit(_ty-ms($font-size, $breakpoint, $typi-ms, $typi-map)) * 1rem;
+      } @else {
+        @return _ty-ms($font-size, $breakpoint, $typi-ms, $typi-map);
+      }
+    } @else {
+      @error "Modular Scale Library required";
+    }
+  }
+
+  // Convert px and em into rem
+  @else if $rem {
+    @if unit($font-size) == 'em' {
+      @return _ty-strip-unit($font-size) * 1rem;
+    }
+
+    @else if unit($font-size) == 'px' {
+      $basemap: map-get($typi, $breakpoint);
+      $basefont: if(type-of($basemap) == 'list', nth($basemap, 1), $basemap);
+
+      @if $basefont == null {
+        $basefont: nth(map-get($typi, null), 1);
+      }
+
+      @return $font-size / $basefont * 1rem;
+    }
+
+    @else {
+      @return $font-size;
+    }
+  }
+
+  // Converts rem and px into em
+  @else {
+    @if unit($font-size) == 'rem' {
+      @return _ty-strip-unit($font-size) * 1em;
+    }
+
+    @else if unit($font-size) == 'px' {
+      $basemap: map-get($typi, $breakpoint);
+      $basefont: if(type-of($basemap) == 'list', nth($basemap, 1), $basemap);
+
+      @if $basefont == null {
+        $basefont: nth(map-get($typi, null), 1);
+      }
+
+      @return _ty-em($font-size, $basefont);
+    }
+
+    @else {
+      @return $font-size;
+    }
+  }
+}
+
+// _ty-base-size
+// =============
+// Converts Typi sizes into percentages
+@function _ty-base-size(
+  $font-size
+) {
+  @if unit($font-size) == 'px' {
+    @return $font-size / 16px * 100%;
+  }
+
+  @else {
+    @error 'Typi font sizes must be written in pixels';
+  }
+}
+
+
+// _ty-strip-unit
+// ==============
+@function _ty-strip-unit($num) {
+  @return $num / ($num * 0 + 1);
+}
+
+// _ty-em
+// ========
+@function _ty-em($font-size, $ref-size: false) {
+  @if ($ref-size) {
+    @return $font-size / $ref-size * 1em;
+  }
+}
+
+// _ty-rem
+// =========
+@function _ty-rem($font-size) {
+  @if unit($font-size) == 'px' {
+    @return strip-unit($font-size) / 16 * 1rem;
+  }
+  @else if unit($font-size) == 'em' {
+    @return strip-unit($font-size) * 1rem;
+  }
+}
+
+// _ty-ms
+// ======
+@function _ty-ms(
+  $multiplier,
+  $breakpoint: null,
+  $typi-ms: $typi-ms,
+  $typi-map: false
+) {
+  $ms-setting: null;
+  @if map-has-key($typi-ms, $breakpoint) {
+    $ms-setting: map-get($typi-ms, $breakpoint);
+  } @else {
+    $last-valid-ms: map-get($typi-map, last-valid-ms);
+    $ms-setting: map-get($typi-ms, $last-valid-ms);
+  }
+
+  $ty-ms-base: null;
+  $ty-ms-ratio: null;
+
+  @for $i from 1 to length($ms-setting) + 1 {
+    $val: nth($ms-setting, $i);
+
+
+    // For combinations of multiple bases + multiple ratios
+    @if type-of($val) == 'list' {
+      @if not unitless(nth($val, 1)) {
+        $ty-ms-base: $val;
+      } @else {
+        $ty-ms-ratio: $val;
+      }
+    }
+    // For combinations of 1 base + multiple ratios
+    @else {
+      @if unitless($val) {
+        @if $ty-ms-ratio == null {
+          $ty-ms-ratio: $val;
+        } @else if type-of($ty-ms-ratio) == "number" {
+          $ty-ms-ratio: $ty-ms-ratio $val;
+        } @else if type-of($ty-ms-ratio) == "list" {
+          $ty-ms-ratio: append($ty-ms-ratio, $val);
+        }
+      }
+
+      @else {
+        @if $ty-ms-base == null {
+          $ty-ms-base: $val;
+        } @else if type-of($ty-ms-base) == 'number' {
+          $ty-ms-base: ($ty-ms-base $val)
+        } @else if type-of($ty-ms-base) == 'list' {
+          $ty-ms-base: append($ty-ms-base, $val);
+        }
+      }
+    }
+  }
+
+  @if $ty-ms-base == null {
+    $ty-ms-base: 1em;
+  }
+
+  @return ms($multiplier, $ty-ms-base, $ty-ms-ratio);
+}
+
+// _ty-get-breakpoints
+// ===================
+@function _ty-get-breakpoints($breakpoints, $typi-ms, $target) {
+  $_return: null;
+
+  @each $breakpoint, $val in $breakpoints {
+    @if type-of($typi-ms) == 'map' and map-has-key($typi-ms, $breakpoint) {
+      @if not index($_return, $breakpoint) {
+        $_return: append($_return, $breakpoint);
+      }
+    }
+
+    @if map-has-key($target, $breakpoint) {
+      @if not index($_return, $breakpoint) {
+        $_return: append($_return, $breakpoint);
+      }
+    }
+  }
+  @return $_return;
+}
+
+// _ty-get-base-font
+@function _ty-get-base-font($typi) {
+  $base-map: map-get($typi, null);
+  @return nth($base-map, 1);
+}
+
+// _ty-get-base-line-height
+@function _ty-get-base-line-height($typi) {
+  $base-map: map-get($typi, null);
+  $base-line-height: null;
+
+  @if length($base-map) > 1 {
+    $base-line-height: nth($base-map, 2);
+  } @else {
+    @error "$typi map should contain a second argument (line-height) in the `null` key";
+  }
+
+  @if not unit($base-line-height) == "" {
+    @error "line-height multiple on the `null` key should be unitless";
+  }
+
+  @return $base-line-height;
+}

data/app/assets/stylesheets/ty/_mixins.scss

@@ -0,0 +1,72 @@
+
+// _ty-breakpoint
+// ==============
+// Allows use of breakpoint-sass and mappy-bp.
+// Falls back to default method otherwise.
+@mixin _ty-breakpoint(
+  $typi-map
+) {
+  $breakpoint: map-get($typi-map, breakpoint);
+  $breakpoints: map-get($typi-map, breakpoints);
+  $bp-val: map-get($breakpoints, $breakpoint);
+
+  @if $typi-breakpoint == breakpoint {
+    @if mixin-exists(breakpoint) {
+      @include breakpoint-set('to ems', true);
+      @include breakpoint(map-get($breakpoints, $breakpoint)) {
+        @include _ty-write-props($typi-map);
+      }
+    } @else {
+      @error 'Breakpoint-sass Library not found'
+    }
+  }
+
+  @else if $typi-breakpoint == mappy-breakpoint or $typi-breakpoint == mappy-breakpoints {
+    @if mixin-exists(mappy-bp) {
+      @include mappy-bp(map-get($breakpoints, $breakpoint)) {
+        @include _ty-write-props($typi-map);
+      }
+    } @else {
+      @error 'Mappy Breakpoints Library not found'
+    }
+  }
+
+  @else {
+    @media all and (min-width: #{map-get($breakpoints, $breakpoint)}) {
+      @include _ty-write-props($typi-map);
+    }
+  }
+}
+
+// _ty-write-props
+// ===============
+// Writes font-size (and line height) properties
+@mixin _ty-write-props (
+  $typi-map
+) {
+  $target: map-get($typi-map, target);
+  $breakpoint: map-get($typi-map, breakpoint);
+  $typi: map-get($typi-map, typi);
+  $base: map-get($typi-map, base);
+  $rem: map-get($typi-map, rem);
+
+  $bp-val: map-get($target, $breakpoint);
+  $font-size: null;
+  $line-height: null;
+
+  @if type-of($bp-val) == 'null' {
+    $last-valid-breakpoint: map-get($typi-map, last-valid-breakpoint);
+    $bp-val: map-get($target, $last-valid-breakpoint);
+  }
+
+  @if type-of($bp-val) == "list" and length($bp-val) > 1 {
+    $font-size: nth($bp-val, 1);
+    $line-height: nth($bp-val, 2);
+    font-size: _ty-font-size($font-size, $breakpoint, $typi, $rem, $base, $typi-map);
+    line-height: $line-height;
+  }
+  @else  {
+    $font-size: $bp-val;
+    font-size: _ty-font-size($font-size, $breakpoint, $typi, $rem, $base, $typi-map);
+  }
+}

data/app/assets/stylesheets/typi/_typi.scss

@@ -0,0 +1,111 @@
+@mixin typi(
+  $target-map,
+  $breakpoints: $breakpoints,
+  $typi: $typi,
+  $typi-ms: $typi-ms,
+  $base: false,
+  $rem: true
+) {
+  $typi-map: (
+    target: $target-map,
+    breakpoints: $breakpoints,
+    typi: $typi,
+    base: $base,
+    rem: $rem,
+    ms: $typi-ms
+  );
+
+  $breakpoints-to-output: _ty-get-breakpoints($breakpoints, $typi-ms, $target-map);
+  @each $breakpoint in $breakpoints-to-output {
+    $target: $target-map;
+    $typi-map: map-merge($typi-map, (breakpoint: $breakpoint));
+
+    @if $breakpoint == null {
+      @include _ty-write-props($typi-map);
+    }
+
+    @else {
+      @if map-has-key($breakpoints, $breakpoint) {
+        @include _ty-breakpoint($typi-map);
+      } @else {
+        @warn "Missing #{$breakpoint} in $breakpoints map";
+      }
+    }
+
+    // Add previous valid breakpoint
+    @if map-has-key($target, $breakpoint) {
+      $typi-map: map-merge($typi-map, (last-valid-breakpoint: $breakpoint))
+    }
+
+    // Add previous valid ms
+    @if type-of($typi-ms) == 'map' and map-has-key($typi-ms, $breakpoint)  {
+      $typi-map: map-merge($typi-map, (last-valid-ms: $breakpoint))
+    }
+  }
+}
+
+@mixin typi-base(
+  $typi: $typi,
+  $breakpoints: $breakpoints,
+  $typi-ms: $typi-ms,
+  $base: true,
+  $rem: true
+) {
+  @include typi(
+    $typi,
+    $breakpoints,
+    $typi: $typi,
+    $typi-ms: $typi-ms,
+    $base: $base,
+    $rem: $rem
+  );
+}
+
+// Vertical rhythm function. Possible to output both EM and REM.
+// Requires line height to be set on $typi map for 'null' breakpoint
+@function vr($vr, $current-font: null, $typi: $typi) {
+  $base-font: _ty-get-base-font($typi);
+  $base-line-height: _ty-get-base-line-height($typi);
+  $rhythm-context: $vr * $base-line-height;
+
+  // Converts into EM if $current-font is provided
+  @if $current-font {
+    @if unit($current-font) == "px" {
+      $rhythm-context: $rhythm-context * $base-font;
+
+      @return $rhythm-context / $current-font * 1em;
+    }
+
+    @if unit($current-font) == "em" {
+      @return $rhythm-context / _ty-strip-unit($current-font) * 1em;
+    }
+
+    @else {
+      @error "Font sizes should either be px or em if $current-font is provided";
+    }
+  }
+
+  @else {
+    @if unit($base-line-height) == 'px' {
+      @return $vr * $base-line-height / $base-font-size * 1rem;
+    } @else {
+      @return $vr * $base-line-height * 1rem;
+    }
+  }
+}
+
+// Responsive Vertical Rhythm
+@mixin rvr($props, $vr, $typi: $typi) {
+  $base-font: _ty-get-base-font($typi);
+  $base-line-height: _ty-get-base-line-height($typi);
+  $unit: unit($base-line-height);
+
+  @each $prop in $props {
+    @if $unit == 'px' {
+      #{$prop}: $base-line-height / $base-font * 1rem * $vr;
+    } @else {
+      #{$prop}: $base-line-height * 1rem * $vr;
+    }
+    #{$prop}: calc(var(--baseline) * #{1rem * $vr});
+  }
+}

data/lib/typi_rails.rb

@@ -0,0 +1,5 @@
+require "typi_rails/engine"
+
+module TypiRails
+  # Your code goes here...
+end

data/lib/typi_rails/engine.rb

@@ -0,0 +1,5 @@
+module TypiRails
+  class Engine < ::Rails::Engine
+    isolate_namespace TypiRails
+  end
+end

data/lib/typi_rails/version.rb

@@ -0,0 +1,3 @@
+module TypiRails
+  VERSION = '0.1.0'
+end

metadata

@@ -0,0 +1,130 @@
+--- !ruby/object:Gem::Specification
+name: typi_rails
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Pete Cass
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2017-01-24 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 5.0.0
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.0.0.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 5.0.0
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.0.0.1
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.2'
+- !ruby/object:Gem::Dependency
+  name: sass-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.2'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.2'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Gemified version of Typi (https://github.com/zellwk/typi)
+email:
+- pete@petecss.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/stylesheets/_typi.scss
+- app/assets/stylesheets/ty/_functions.scss
+- app/assets/stylesheets/ty/_mixins.scss
+- app/assets/stylesheets/typi/_typi.scss
+- lib/typi_rails.rb
+- lib/typi_rails/engine.rb
+- lib/typi_rails/version.rb
+homepage: https://github.com/Petecass/typi_rails
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: Gemified version of Typi
+test_files: []