shevy 1.0.1 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c1403531d39fd4e06573670a1e2170aa4dd38b9b
-  data.tar.gz: 74ab9b7eb3cecad08c93ac294e5351c4d3337021
+  metadata.gz: cb629656009b4fd3f0f015048e0c19afbd06c51c
+  data.tar.gz: 7a08763f3b5dc323c143a50876e45692a8fc5683
 SHA512:
-  metadata.gz: 4cede17f06f3c6aca56697caec4164c3f27a1af7e714aa240e377c1b258aa42d40fb843a17c060f3e62aa99489cfa7c3b45f754daba052aac34e1952f16390de
-  data.tar.gz: 9c7121c4d0f742fcfeb2331d3170de1ebadab101e512905a6fc63ca4fb6e5b3056609826396ac11b897fc415974589331d72c2a88a63b8f8acc5b6679c49da21
+  metadata.gz: d23197041b58c0b2fc94d29c04f94d16f797718500f0a67d570d9ef31ff9d98c1e957fcde9eff4a3eabd1b0638fe64be197ad5b1543ffd299976f96982783b0f
+  data.tar.gz: 3eb75e51c30f126ebb640199e6d7e1d649de08ad4f83ada7d55f0c6f28760568a9d39887bd1f6d566cd5f92ea982fe300e0a4877620d475a1dc0e1add0668a29

data/.gitignore

@@ -1,9 +1,4 @@
-/.bundle/
-/.yardoc
-/Gemfile.lock
-/_yardoc/
-/coverage/
-/doc/
-/pkg/
-/spec/reports/
-/tmp/
+node_modules/
+.sass-cache/
+demo/css/style.css.map
+*.gem

data/Gruntfile.js

@@ -0,0 +1,59 @@
+module.exports = function(grunt) {
+  // Requires
+  require('load-grunt-tasks')(grunt);
+
+  // Empty init allows us to merge by feature, not by function
+  grunt.config.init({
+    pkg: grunt.file.readJSON('package.json')
+  });
+
+  // Local Server
+  grunt.config.merge({
+    connect: {
+      server: {
+        options: {
+          base      : 'demo',
+          keepalive : true
+        }
+      }
+    }
+  });
+
+  // Style config
+  grunt.config.merge({
+    autoprefixer: {
+      dist: {
+        files: {
+          'demo/dist/style.css': 'demo/css/style.css'
+        }
+      }
+    },
+
+    sass: {
+      dist: {
+        options: {
+          style: 'expanded'
+        },
+        files: {
+          'demo/css/style.css': 'demo/scss/style.scss'
+        }
+      }
+    },
+
+    watch: {
+      options: {
+        livereload: true
+      },
+      css: {
+        files: '**/*.scss',
+        tasks: ['sass', 'autoprefixer'],
+        options: {
+          spawn: false
+        }
+      }
+    }
+  });
+
+  // Register Tasks
+  grunt.registerTask('default', ['sass', 'autoprefixer', 'watch']);
+};

data/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Kyle Shevlin
+
+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

@@ -1,46 +1,200 @@
 # Shevy
 
-Shevy is a small Sass library for simple, configurable typography with perfect vertical rhythm.
-
-This is Shevy in gem form. If you are looking for the original repo, go to [https://github.com/kyleshevlin/shevy](https://github.com/kyleshevlin/shevy).
+A simple, configurable Sass library for typography with perfect vertical rhythm.
 
 ## Installation
 
-Add this line to your application's Gemfile:
+If you want to add this to a project, copy the `lib/` directory into the appropriate location in your app.
 
-```ruby
-gem 'shevy'
+```
+$ cp -R lib/ path/to/your/project
 ```
 
-And then execute:
+Then `@import` the `_shevy.scss` file into your project.
 
-    $ bundle
+```scss
+@import 'lib/shevy';
+```
 
-Or install it yourself as:
+Be sure to place this _before_ any call to Shevy mixins and functions so that the Sass compiles without error.
 
-    $ gem install shevy
+#### Ruby on Rails
 
-### Important
+If you are using Ruby on Rails and would like to add Shevy to your project, you're in luck. Shevy is also a [Ruby Gem](https://rubygems.org/gems/shevy) and the repo can be found [here](https://github.com/kyleshevlin/shevy-gem). In your `Gemfile` add:
+
+```ruby
+gem 'shevy'
+```
 
-After the gem is installed, you will need to add Shevy to your `application.css` file.
+Then run:
+
+```
+$ bundle install
+```
+
+Once the gem is installed, add Shevy to your `application.css` file.
 
 ```
 *= require shevy
 ```
 
-Add this _before_ your other styles so that the mixins are available.
+And _then_ `@import` the `_shevy.scss` file into your project with:
+
+```scss
+@import 'shevy';
+```
+
+Once again, be sure to place this _before_ any call to Shevy mixins or functions so that the Sass compiles without error.
 
 ## Usage
 
-Usage can be found at [https://github.com/kyleshevlin/shevy](https://github.com/kyleshevlin/shevy).
+Shevy comes packaged with default settings. So the simplest usage of Shevy is to call a few mixins.
+
+```scss
+@include headings;
+@include body;
+@include content;
+```
+
+This will output styles for all headings (`h1` to `h6`), several content tags (`p`, `ol`, `ul`, and `pre`), and set font-size and line-height for the `body` tag.. However, you may find that the default settings don't suit your project. Shevy allows you to configure settings globally and/or at the component level. Here's how:
+
+### Global
+
+Shevy mixins take a Sass map as one of the arguments. The default map is the `$shevy` map (`$shevy` is always defined, even if you don't define your own). Thus, to make global changes to your configuration, simply define your own `$shevy` map to override the default settings. Like so:
+
+```scss
+$shevy: (
+    base-font-size: 14px,
+    base-line-height: 1.5,
+    base-font-scale: (2.5, 2.1, 1.8, 1.5, 1.25, 1),
+    margin-bottom: true
+);
+```
+
+Then, `@include` the `headings`, `body`, and `content` mixins in your code
+
+```scss
+@include headings;
+@include body;
+@include content;
+```
+
+Now marvel at your beautiful typography. Assuming you've put something on the page. You have put something on the page, haven't you?
+
+### Component Level
+
+You can also pass a custom map into the `headings` and `paragraph` mixin. This should enable you to make custom typography per module or responsive typography per breakpoint.
+
+Define a new Shevy map:
+
+```scss
+$shevy-small: (
+  base-font-size: 12px,
+  base-line-height: 1.3,
+  base-font-scale: (2, 1.8, 1.6, 1.4, 1.2, 1)
+);
+```
+
+Then call the any of the mixins, passing your new settings map as an argument:
+
+```scss
+.my_component {
+  @include headings($shevy-small);
+  @include content($shevy-small);
+}
+```
+
+## Defaults
+
+```scss
+$shevy: (
+    base-font-size: 1em,
+    base-line-height: 1.5,
+    base-font-scale: (3, 2.5, 2, 1.5, 1.25, 1),
+    margin-bottom: true
+);
+```
+
+### base-font-size
+
+The `base-font-size` key is intended to be the standard font-size for the project. `font-scale` multiplies its value against the `base-font-size`.
+
+### base-line-height
+
+The `base-line-height` is the standard line-height. If this is set in pixels, this will be the base-spacing value for Shevy. If it is provided as a factor, such as `1.5`, it will be multiplied by the `base-font-size` to generate the base-spacing value.
+
+### base-font-scale
+
+This is a Sass list of factors to multiply by the `base-font-size` to generate the font-sizes for headings and paragraphs (if a `paragraph-scale` is not provided).
+
+### margin-bottom
+
+By default, margin bottoms are added to all typography to maintain the vertical rhythm. However, you may wish to remove these. In that case, setting `margin-bottom: false` in your map will set the `margin-bottom` property to `0` for each element.
+
+## Functions
+
+There are several public functions available to the developer to use as they please. Here is a list of them:
+
+* `base-font-size()`, with alias `bsf()`
+* `base-font-unit()`, with alias `bfu()`
+* `base-line-height()`, with alias `blh()`
+* `base-spacing()`, with alias `bs()`
+* `settings()`
+
+### base-font-size
+
+`base-font-size()` will return the `base-font-size` setting in the $shevy map, or the map passed to the function as an argument.
+
+### base-font-unit
+
+`base-font-unit()` will determine whether the measurements have been defined in `px`, `em`, or `rem` and return the correct unit type. A map can be passed to the function as an argument.
+
+### base-line-height
+
+`base-line-height()` will return the `base-line-height` setting in the $shevy map, or the map passed ot the function as an argument.
+
+### base-spacing
+
+`base-spacing()` calculates the base spacing of the vertical rhythm by multiplying the base font size by the base line-height. A factor may be passed to the argument to return multiples or dividends of the base-spacing.
+
+Example:
+
+```scss
+.button {
+  padding: bs(.5) bs(2);
+}
+```
+
+A map of settings can be passed as the second argument to adjust the output.
+
+### settings
+
+`settings()` is a function utilized by Shevy to merge a map with the `$shevy-defaults` map. This ensures that the current map has all the settings it should. The user can use this to create new maps on the fly if they desire, though there isn't much of a purpose for that just yet.
+
+## Support
+
+Currently, Shevy supports `px`, `em`, and `rem` usage. Additional support for other measurement units may be added in the future.
 
-## Development
+## License
 
-After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+The MIT License (MIT)
 
-To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+Copyright (c) 2016 Kyle Shevlin
 
-## Contributing
+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:
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/kyleshevlin/shevy-gem.
+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/bower.json

@@ -0,0 +1,35 @@
+{
+  "authors": [
+    "Kyle Shevlin <kyle.a.shevlin@gmail.com>"
+  ],
+  "description": "A simple, configurable Sass library for typography with perfect vertical rhythm.",
+  "homepage": "https://kyleshevlin.github.io/shevy",
+  "ignore": [
+    "**/.*",
+    "demo",
+    "Gruntfile.js",
+    "package.json",
+    "sache.json",
+    "shevy.gemspec",
+    "Rakefile",
+    "Gemfile",
+    "lib/",
+    "bin/"
+  ],
+  "keywords": [
+    "css",
+    "mixins",
+    "sass",
+    "scss",
+    "typography",
+    "rhythm"
+  ],
+  "license": "MIT",
+  "main": "core/_shevy.scss",
+  "name": "shevy",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kyleshevlin/shevy.git"
+  },
+  "version": "2.0.0"
+}

data/core/_shevy.scss

@@ -0,0 +1,12 @@
+//////////////////////////////
+// Shevy
+// Version: 0.1.0
+// Author: Kyle Shevlin
+// Github: kyleshevlin
+//////////////////////////////
+
+@import
+  'shevy_variables',
+  'shevy_functions',
+  'shevy_mixins'
+;

data/core/_shevy_functions.scss

@@ -0,0 +1,128 @@
+///
+/// Returns the font scale value at a given position in the list
+/// @access private
+/// @param {Number} $position Position of scale value to retrieve
+/// @param {Map} $map [$shevy] Map from which to retrieve font scale value
+/// @return {Number} Font scale value at given position
+///
+@function get-font-scale-value($position, $map: $shevy) {
+  $settings: settings($map);
+  @return nth(map-get($settings, 'base-font-scale'), $position);
+}
+
+///
+/// Returns the base font size of current settings
+/// @access public
+/// @param {Map} $map [$shevy] Map of settings
+/// @return {Value} Value of base-font-size setting
+///
+@function base-font-size($map: $shevy) {
+  $settings: settings($map);
+  @return map-get($settings, 'base-font-size');
+}
+
+///
+/// @alias base-font-size
+///
+@function bsf($map: $shevy) {
+  @return base-font-size($map);
+}
+
+///
+/// Returns the base font unit of the current settings
+/// @access public
+/// @param {Map} $map [$shevy] Map of settings
+/// @return {String} Unit value of base font size
+///
+@function base-font-unit($map: $shevy) {
+  $settings: settings($map);
+  @return unit(map-get($settings, 'base-font-size'));
+}
+
+///
+/// @alias base-font-unit
+///
+@function bfu($map: $shevy) {
+  @return base-font-unit($map);
+}
+
+///
+/// Returns the line-height of the current settings
+/// @access public
+/// @param {Map} $map [$shevy] Map of settings
+/// @return {Number} Current base-line-height setting
+///
+@function base-line-height($map: $shevy) {
+  $settings: settings($map);
+  @return map-get($settings, 'base-line-height');
+}
+
+///
+/// @alias base-line-height
+///
+@function blh($map: $shevy) {
+  @return base-line-height($map);
+}
+
+///
+/// Takes a factor, multiplies it with the current settings base spacing to output values that are multiples or dividends of the current vertical rhythm
+/// @access public
+/// @param {Number} $factor [1] A factor with which to multiply the base-spacing value
+/// @param {Map} $map [$shevy] Map of settings
+/// @return {Value} Value of base-spacing multiplied by the factor provided
+///
+@function base-spacing($factor: 1, $map: $shevy) {
+  $settings: settings($map);
+  $base-spacing: base-spacing-math($settings);
+
+  @return $base-spacing * $factor;
+}
+
+///
+/// @alias base-spacing
+///
+@function bs($factor: 1, $map: $shevy) {
+  @return base-spacing($factor, $map);
+}
+
+///
+/// Calculates base spacing
+/// @access private
+/// @param {Map} $map [$shevy] Map of settings
+/// @return {Value} Value of base-font-size multiplied by base-line-height
+///
+@function base-spacing-math($map: $shevy) {
+  $settings: settings($map);
+  $base-font-size: base-font-size($settings);
+  $base-line-height: base-line-height($settings);
+
+  @return $base-font-size * $base-line-height;
+}
+
+///
+/// Creates a value equivalent to 1 of the base unit, i.e. if base unit is pixels, returns 1px
+/// @access private
+/// @param {String} $unit String of unit type. Options are: 'px', 'em', or 'rem'
+/// @return {Value} a value of 1 in the given unit type
+///
+@function base-unit-multiplier($unit) {
+  @if $unit == 'px' {
+    @return 1px;
+  } @else if $unit == 'em' {
+    @return 1em;
+  } @else if $unit == 'rem' {
+    @return 1rem;
+  } @else {
+    @warn "Sorry, but that is not a supported unit of measure.";
+  }
+}
+
+///
+/// Merge current settings map with Shevy defaults
+/// @access public
+/// @param {Map} $map [$shevy] Map of settings
+/// @return {Map} Map of merged settings
+///
+@function settings($map: $shevy) {
+  @return map-merge($shevy-defaults, $map);
+}