Skip to content

Commit

Permalink
Merge pull request #20 from ianrose/ms-text-sizing
Browse files Browse the repository at this point in the history
Test and Heading updates
  • Loading branch information
ianrose committed Oct 19, 2014
2 parents 7109e62 + 1ccce69 commit bd86b50
Show file tree
Hide file tree
Showing 6 changed files with 197 additions and 60 deletions.
37 changes: 37 additions & 0 deletions .csslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
{
"important": true,
"adjoining-classes": true,
"known-properties": true,
"box-sizing": true,
"box-model": true,
"overqualified-elements": true,
"display-property-grouping": true,
"bulletproof-font-face": true,
"compatible-vendor-prefixes": true,
"regex-selectors": true,
"errors": true,
"duplicate-background-images": true,
"duplicate-properties": true,
"empty-rules": true,
"selector-max-approaching": true,
"gradients": true,
"fallback-colors": true,
"font-sizes": false,
"font-faces": true,
"floats": true,
"star-property-hack": true,
"outline-none": true,
"import": true,
"ids": true,
"underscore-property-hack": true,
"rules-count": true,
"qualified-headings": true,
"selector-max": true,
"shorthand": true,
"text-indent": true,
"unique-headings": false,
"universal-selector": true,
"unqualified-attributes": true,
"vendor-prefix": true,
"zero-units": true
}
75 changes: 68 additions & 7 deletions Gruntfile.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,79 @@
var LIVERELOAD_PORT = 35729;

var lrSnippet = require('connect-livereload')({
port: LIVERELOAD_PORT
});

var mountFolder = function (connect, dir) {
return connect.static(require('path').resolve(dir));
};

module.exports = function (grunt) {

// Load the plugins.
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-csslint');

// Project configuration.
grunt.initConfig({
connect: {
options: {
port: 9001,
hostname: 'localhost'
},
livereload: {
options: {
middleware: function (connect) {
return [lrSnippet, mountFolder(connect, 'test')];
}
}
}
},
sass: {
dist: {
files: {
'test/test.css': 'test/test.scss'
}
}
}
});
// Load the plugins.
grunt.loadNpmTasks('grunt-sass');
},
csslint: {
options: {
csslintrc: '.csslintrc'
},
check: {
src: [
'test/*.css'
]
}
},
watch: {
sass: {
files: ['*.{scss,sass}', 'test/*{scss,sass}'],
tasks: ['sass']
},
csslint: {
files: 'test/*.css',
tasks: ['csslint']
},
livereload: {
options: {
livereload: LIVERELOAD_PORT
},
files: [
'test/*.html',
'test/*.css'
]
}
}
});

// Default task(s).
grunt.registerTask('default', ['sass']);
grunt.registerTask('test', ['sass']);
};
grunt.registerTask('default', [
'sass',
'csslint',
'connect:livereload',
'watch'
]);
};
35 changes: 20 additions & 15 deletions _typesettings.scss
Original file line number Diff line number Diff line change
Expand Up @@ -199,9 +199,10 @@ body {
// Default Type Styles
//==============================================================================

// Stops iOS from scaling up text.
// Stops devices from scaling up text.
html {
-webkit-text-size-adjust: 100%; // [2]
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

body {
Expand Down Expand Up @@ -237,54 +238,54 @@ body {
// [5] Sets the type to one of the modular scale values and the second argument
// sets a unitless line-height as a multiple of the vertical grid.
h1, .h1 {
margin-bottom: emRhythm(4, $ms-up2); // [1]
margin-bottom: emRhythm(1, $ms-up2); // [1]
@include setType(6, $ms-up2); // [2]

@media (min-width: 43.75em) {
// [3]
margin-bottom: emRhythm(4, $ms-up3); // [4]
margin-bottom: emRhythm(1, $ms-up3); // [4]
@include setType(8, $ms-up3); // [5]
}

@media (min-width: 56.25em) {
margin-bottom: emRhythm(4, $ms-up4);
margin-bottom: emRhythm(1, $ms-up4);
@include setType(10, $ms-up4);
}
}

h2, .h2 {
margin-bottom: emRhythm(4, $ms-up1);
margin-bottom: emRhythm(1, $ms-up1);
@include setType(5, $ms-up1);

@media (min-width: 43.75em) {
margin-bottom: emRhythm(4, $ms-up2);
margin-bottom: emRhythm(1, $ms-up2);
@include setType(6, $ms-up2)
}

@media (min-width: 56.25em) {
margin-bottom: emRhythm(4, $ms-up3);
margin-bottom: emRhythm(1, $ms-up3);
@include setType(8, $ms-up3);
}
}

h3, .h3 {
margin-bottom: emRhythm(4, $ms-up1);
margin-bottom: emRhythm(1, $ms-up1);
@include setType(5, $ms-up1);

@media (min-width: 56.25em) {
margin-bottom: emRhythm(4, $ms-up2);
margin-bottom: emRhythm(1, $ms-up2);
@include setType(6, $ms-up2);
}
}

h4, .h4 {
margin-bottom: emRhythm(4, $ms-up1);
margin-bottom: emRhythm(1, $ms-up1);
@include setType(5, $ms-up1);
}

h5, .h5,
h6, .h6 {
margin-bottom: emRhythm(4);
margin-bottom: emRhythm(1);
@include setType(4);
}

Expand All @@ -295,6 +296,7 @@ body {
padding-bottom: 0;
max-width: emRhythm(96);
-webkit-hyphens: auto;
-epub-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
Expand Down Expand Up @@ -331,13 +333,16 @@ body {
blockquote {
margin-top: emRhythm(4);
margin-bottom: emRhythm(4);
margin-left: emRhythm(-5);
margin-left: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: emRhythm(4);
border-left: $base-vertical-unit solid lighten(#000, 50%);
font-family: $font-mono;
font-weight: bold;
font-family: $font-serif;

p {
margin-bottom: emRhythm(2);
}

footer {
cite {
Expand Down
8 changes: 6 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,12 @@
"description": "A Sass toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratio based headlines.",
"main": "_typesettings.scss",
"devDependencies": {
"grunt": "^0.4.4",
"grunt-sass": "^0.12.1"
"connect-livereload": "^0.4.0",
"grunt": "^0.4.5",
"grunt-contrib-connect": "^0.8.0",
"grunt-contrib-csslint": "^0.3.1",
"grunt-contrib-watch": "^0.6.1",
"grunt-sass": "^0.14.0"
},
"repository": {
"type": "git",
Expand Down
39 changes: 33 additions & 6 deletions test/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,8 @@ <h1>CSS Basic Elements</h1>

<hr/>

<h1 id="headings">Headings</h1>

<h1>Heading 1</h1>

<h1 id="headings">Heading 1</h1>
<h2>Heading 2</h2>

<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
Expand All @@ -43,6 +39,36 @@ <h1 id="paragraph">Paragraph</h1>
<em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
</p>

<h2>Paragraph</h2>

<p>Lorem ipsum dolor sit amet,
<em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
</p>

<h3>Paragraph</h3>

<p>Lorem ipsum dolor sit amet,
<em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
</p>

<h4>Paragraph</h4>

<p>Lorem ipsum dolor sit amet,
<em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
</p>

<h5>Paragraph</h5>

<p>Lorem ipsum dolor sit amet,
<em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
</p>

<h6>Paragraph</h6>

<p>Lorem ipsum dolor sit amet,
<em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
</p>

<small><a href="#top">[top]</a></small>
<hr/>

Expand Down Expand Up @@ -113,7 +139,8 @@ <h1 id="misc">Misc Stuff - abbr, acronym, pre, code, sub, sup, etc.</h1>
<abbr title="Avenue">AVE</abbr></p></pre>

<blockquote>
"This stylesheet is going to help so freaking much." <br/>-Blockquote
<p>"Everything should be made as simple as possible, but no simpler."</p>
<footer>Someone Famous<cite>Albert Einstein</cite></footer>
</blockquote>

<small><a href="#top">[top]</a></small>
Expand Down
Loading

0 comments on commit bd86b50

Please sign in to comment.