Type-box mixin

AUTHORS.txt

@@ -0,0 +1,10 @@
+# This is the official list of Megatype authors for copyright purposes.
+# This file is distinct from the CONTRIBUTORS files.
+# See the latter for an explanation.
+
+# Names should be added to this file as:
+# Name or Organization <email address>
+# The email address is not required for organizations.
+
+Studio Thick Pty Ltd
+Thomas Bredin-Grey <tom@studiothick.com>

CONTRIBUTORS.txt

@@ -0,0 +1,17 @@
+# This is the official list of people who can contribute
+# (and typically have contributed) code to this repository.
+# The AUTHORS file lists the copyright holders; this file
+# lists people.
+#
+# Names should be added to this file like so:
+#     Name <email address>
+#
+# Please keep the list sorted.
+# (first name; alphabetical order)
+
+Abhishek Suresh  <abi@studiothick.com>
+Giovanni Ferron <giovanni@studiothick.com>
+Matt Sawkill <matt@studiothick.com>
+Nathan Thorpe <nathan@studiothick.com>
+Sam Mularczyk <sam@studiothick.com>
+Tom McLean <tom.mclean@studiothick.com>

LICENSE.txt

@@ -0,0 +1,22 @@
+The MIT License
+
+Copyright (c) 2016 The MegaType Project Authors
+
+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.
+

README.md

@@ -1,16 +1,24 @@
-![Megatype](http://studiothick.github.io/megatype/favicons/apple-touch-icon-144x144.png)
+![MegaType](http://studiothick.github.io/megatype/favicons/apple-touch-icon-144x144.png)
 
-# Megatype
-Execute typographic structure with ease    
+# MegaType
+Execute typographic structure with ease.
+
+[The MegaType demo page](http://megatype.studiothick.com) shows how typesetting rules scale across breakpoints.
 
 [![Build Status](https://travis-ci.org/StudioThick/megatype.svg?branch=master)](https://travis-ci.org/StudioThick/megatype)
 
 ##Install
 
-Download manually or install with Bower (recommended):     
-```bower install megatype --save-dev```    
+Download manually or install with Bower (recommended):
+
+    bower install megatype --save-dev
+
+or with Npm
+
+    npm install megatype --save-dev
+
+You can add a load path to your build process of choice (gulp example shown):
 
-You can add a load path to your build process of choice (gulp example shown):    
 ```js
 // gulpfile.babel.js
 
@@ -29,18 +37,19 @@ gulp.task('styles', () => {
 });
 ```
 
-And import into your styles with:      
+And import into your styles with:
+
 ```scss
 @import "megatype";
-```    
+```
 
 ##Using MegaType
-MegaType provides typesetting tools, and some breakpoint mixins.    
-
+MegaType provides typesetting tools, and some breakpoint mixins.
 
 ###Config
-Copy `_config.scss` into your code base and override the `!default` settings where required, leaving unmodified values commented out.    
-First, set up your breakpoint map (defaults shown) and your baseline snap & scaling preferences:    
+Copy `_config.scss` into your codebase and override the `!default` settings where required, leaving unmodified values commented out.
+First, set up your breakpoint map (defaults shown) and your baseline snap & scaling preferences:
+
 ```scss
 // config.scss
 
@@ -82,30 +91,31 @@ $breakpoint-map: (
 );
 
 ```
-Breaking down the map:    
-- `start` is the start position of the breakpoint. Can be `px` or `em`.    
-- `max` is the max width of the container. Can be `px`, `em`, or `%`.   
-- `rootsize` is the base font size applied to the `html` element. Can be `px` or `rem`. This also controls our grid size at this breakpoint.         
-These values can be retrieved using the `break-get` function, eg:    
+Breaking down the map:
+- `start` is the start position of the breakpoint. Can be `px` or `em`.
+- `max` is the max width of the container. Can be `px`, `em`, or `%`.
+- `rootsize` is the base font size applied to the `html` element. Can be `px` or `rem`. This also controls our grid size at this breakpoint.
+These values can be retrieved using the `break-get` function, eg:
 ```scss
 .my-component {
     width: break-get(3, max);
 }
 ```
 
-To intialise the baseline, call MegaType at the top of your stylesheet:   
+To intialise the baseline, call MegaType at the top of your stylesheet:
 ```scss
 @include megatype;
 ```
 
-For containers, you may also wish to to apply `max` widths from your config:     
+For containers, you may also wish to to apply `max` widths from your config:
 ```scss
 .my-container {
     @include set-container;
 }
 ```
-
-Next we need to provide some information about each font we want to typeset. Modify the ones provided, or add your own:       
+
+Next we need to provide some information about each font we want to typeset. Modify the ones provided, or add your own:
+
 ```scss
 // Set cap height to set to the baseline.
 // Here are some cap-height sizes to get you started:
@@ -131,14 +141,13 @@ $monospace: (
     cap-height: 0.68
 ) !default;
 ```
-To set the correct `cap-height` you will need to tweak this in the browser until your typefece sits nicely on the baseline.    
-
-**Tip:** Setting `$debug-allow` and `$debug-baseline` variables to `true` will display a visual representation of the baseline on your typeset elements.   
+To set the correct `cap-height`, you will need to tweak this value and check in your browser until your typeface sits nicely on the baseline.    
 
+**Tip:** Setting `$debug-allow` and `$debug-baseline` variables to `true` will display a visual representation of the baseline on your typeset elements.
 
 ###Setting type
 
-With our rootsize initialised and our typographic config all set up, we can start setting type. 
+With our rootsize initialised and our typographic config all set up, we can start setting type.
 
 First, provide the typeface variable, and then provide `$fontsize`, `$lineheight`, `$leader` and `$trailer` in `px`, `rem`, or baseline units. One baseline unit is equivalent to the `rootsize` for that media query.
 
@@ -160,8 +169,10 @@ p {
     @include typeset($sans, 16px, 2rem, 0, 2);
 }
 ```
-The `$fontsize`, `$leader` and `$trailer` are output in `rem`, whereas the lineheight is output as a unitless number. 
-`$leader` is calculated alongside an offset to put our type on the baseline, and output as a `top` value. This is then added to the `$trailer`, which is output as `margin-bottom`. 
+
+The `$fontsize`, `$leader` and `$trailer` are output in `rem` units, whereas the lineheight is output as a unitless number.
+
+`$leader` is calculated alongside an offset to put our type on the baseline, and output as a `top` value. This is then added to the `$trailer`, which is output as `margin-bottom`.
 
 
 ###Media queries
@@ -171,7 +182,7 @@ To set type at different breakpoints, our `typeset` mixin needs to know about th
 ```scss
 p {
     @include typeset($sans, 16px, 24px, $leader: 0, $trailer: 2);
-    
+
     // we can apply a single breakpoint, starting with breakpoint key: 1
     @include min-width(1) {
         @include typeset($sans, 16px, 24px, $leader: 0, $trailer: 2);
@@ -196,7 +207,7 @@ Both of these mixins can also accept `px` values for a custom media query shortc
 
 
 ###Debugging
-MegaType contains extensive debugging tools to let you visualise your type and grid setup, which are on by default.
+MegaType contains extensive debugging tools to let you visualise your type and grid setup, these are enabled by default.
 
 ```scss
 // debug baseline grid
@@ -207,24 +218,31 @@ $debug-type: true;
 $debug-breakpoints: true;
 ```
 
-And these can be toggled on and off with one variable in `megatype.scss`:   
+Debugging can be toggled on and off globally with one variable in `megatype.scss`:
+
 ```
 $debug-allow: true;
 ```
 
-**Note:** Background gradients are used for some debugging elements. As background gradients suffer from pixel rounding issues, they may become out of sync with some configurations at long distances (on long typeset pages, for example). This is expected behaviour.
+**Note:** Background gradients are used for some debugging elements. As background gradients suffer from pixel rounding issues, they may get out of sync on some configurations with extreme dimensions (on lengthy typeset pages, for example). This is an unfortunate, but expected behaviour.
 
+###Why did we make this?
+Web typography, as we see it, is broken. For a full explanation on why MegaType exists, [read our blog post!](http://www.studiothick.com/essays/web-typography-is-broken)
 
 ###Extras
 A few extra goodies.
 
 - See `_typography.scss` for some functions that can easily return information from your typeface configs.
-- An optional color palette config is included, see `_config.scss` and `_map-helpers.scss` for 
-- The `typeset` mixin sets some background position for easily replacing ugly default text decoration with background gradients (can be disabled with `$link-underline-support` in `_config.scss`). See `_text-link.scss` for a self-explanitory helper `text-link` mixin.
+- An optional color palette config is included, see `_config.scss` and `_map-helpers.scss` for
+- The `typeset` mixin sets some background position for easily replacing ugly default text decoration with background gradients (can be disabled with `$link-underline-support` in `_config.scss`). See `_text-link.scss` for a self-explanatory helper `text-link` mixin.
 - See `_toolset_easing.scss` for some handy functions to use in animation easing
 - See `_toolset_units.scss` for some handy unit conversion tools
 
+###Bootstrap example
+Looking for an example bootstrap integration? We've set up [a basic example here](https://github.com/StudioThick/megatype-bootstrap), based on the [yeoman webapp generator](https://github.com/yeoman/generator-webapp).
+
 ## Roadmap
-- Node packages
-- Tests
-- Default config templates?
+- Megatype Susy 2 example
+- More example tests
+- Default config templates
+- Example themes?

bower.json

@@ -1,6 +1,7 @@
 {
   "name": "megatype",
-  "description": "Finesse typographic structure with legendary technique",
+  "version": "1.0.2",
+  "description": "Execute typographic structure with ease",
   "main": "megatype.scss",
   "authors": [
     "tbredin <tom@studiothick.com>"

megatype/_text-link.scss

@@ -10,7 +10,7 @@
 @mixin text-link($color: palette(blue), $hover: $color, $hover-opacity: 0.6) {
     $transparency: 0.6;
 
-    @if ($color == white or $color = #fff or $color == #ffffff) {
+    @if ($color == white or $color == #fff or $color == #ffffff) {
         $transparency: 0.25;
     }
 
@@ -59,4 +59,4 @@
             text-decoration: none !important;
         }
     }
-}
+}

package.json

@@ -1,14 +1,14 @@
 {
   "name": "megatype",
-  "version": "1.0.1",
-  "private": true,
+  "version": "1.0.2",
+  "private": false,
   "description": "Finesse typographic structure with ease",
   "main": "megatype.scss",
   "scripts": {
     "test": "gulp test"
   },
-  "author": "",
-  "license": "ISC",
+  "author": "The MegaType Project Authors",
+  "license": "MIT",
   "devDependencies": {
     "autoprefixer": "^6.1.1",
     "babel-cli": "^6.6.5",
@@ -44,5 +44,26 @@
     "presets": [
       "es2015"
     ]
-  }
+  },
+  "directories": {
+    "test": "test"
+  },
+  "dependencies": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/StudioThick/megatype.git"
+  },
+  "keywords": [
+    "sass",
+    "susy",
+    "megatype",
+    "typography",
+    "baseline",
+    "vertical-rhythm",
+    "grid"
+  ],
+  "bugs": {
+    "url": "https://github.com/StudioThick/megatype/issues"
+  },
+  "homepage": "https://github.com/StudioThick/megatype#readme"
 }