Typeplate breaks Bourbon / Neat

[andriynoble]

Hey,

I'm currently having an issue when doing using bourbon, neat and typeplate. It seems that typeplate is breaking @include outer-container's size.

[grayghostvisuals]

@andriynoble Can you please provide the code snippet and possibly explain a little more in detail? I'm a bit confused still unfortunately. Also we don't use Bourbon or Neat to develop with as we use Compass and Sass.

[andriynoble]

@grayghostvisuals

below image has and is 1216px width

@import 'bourbon';
@import 'neat';
@import 'typeplate';

.container {
    @include outer-container;
}
header {
    h1 {
        @include span-columns(6);
    }
    nav {
        @include span-columns(6);
    }
}
section {
    article {
        @include span-columns(8);
    }
    aside {
        @include span-columns(4);
    }
}

This image shows the same thing except no:

@import 'typeplate';

[grayghostvisuals]

@andriynoble Unfortunately, while this is a good start to help see the problem I need to see something live here. I have no idea what this line below is outputting including the rest of the import statements.

@include outer-container;

[andriynoble]

@grayghostvisuals

I created a repository of the code so you can see it live, but here is the css file with just

the repo is https://github.com/andriynoble/bourbon-typeplate

@import 'bourbon';
@import 'neat';

Here is the full CSS file.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.container {
  *zoom: 1;
  max-width: 68em;
  margin-left: auto;
  margin-right: auto; }
  .container:before, .container:after {
    content: " ";
    display: table; }
  .container:after {
    clear: both; }

header h1 {
  display: block;
  float: left;
  margin-right: 2.35765%;
  width: 48.82117%; }
  header h1:last-child {
    margin-right: 0; }
header nav {
  display: block;
  float: left;
  margin-right: 2.35765%;
  width: 48.82117%; }
  header nav:last-child {
    margin-right: 0; }

section article {
  display: block;
  float: left;
  margin-right: 2.35765%;
  width: 65.88078%; }
  section article:last-child {
    margin-right: 0; }
section aside {
  display: block;
  float: left;
  margin-right: 2.35765%;
  width: 31.76157%; }
  section aside:last-child {
    margin-right: 0; }

[grayghostvisuals]

@andriynoble Great! This helped a ton for me to see what's goin' on. This is not a case of Typeplate “Breaking Bourbon / Neat” Here's the scoop…

.container {
    max-width: 68em;
}

Since the em value is used for the container it is in relation to the parent container which is how ems decide what to output for a px equivalent. We use 18px as our base font-size set on the root (i.e. html tag ) so any em calculation will use 18px as the default font-size value.

1. Download the updated Sass port for Typeplate here: https://raw.github.com/typeplate/typeplate.github.io/master/typeplate/scss/typeplate-scss.zip
2. Once you've done that you can then do the following as written out in this codeshare link http://codeshare.io/cJwXu
3. After all your imports are in place within your styles.scss change line 24 in the typeplate vars file: https://github.com/typeplate/typeplate.github.io/blob/master/typeplate/scss/_vars-typeplate.scss#L24-L25

// make this 100 instead of 112.5
$font-size: 112.5; // percentage value (16 * 112.5% = 18px)
$font-base: 16 * ($font-size/100); // converts our percentage to a pixel value