Nail vertical rhythm, modular scale, and REMs like a boss with this simple set of SASS/SCSS variables, functions and mixins.
npm install knife-sassknife
=====
Nail vertical rhythm, modular scale, and REMs like a boss with this simple set of Sass/SCSS variables, functions and mixins.
Note: This is an early release so expect things to change. I will do my best not to break stuff, and will let you know if something will break in the future..
Install Sass:
``bash`
gem install sass
`bash`
yarn add knife
... or with NPM:
`bash`
npm install knife
... or with Bower:
`bash`
bower install knife
Alternatively, you can simply import the knife.sass file into you primary Sass/SCSS stylesheet after downloading and and including it in your project.
`scss`
@import 'knife';
Set your basic variables
`scss`
// Basic Type Variabless
$body-font-size: 16px;
$body-line-height: 1.5;
$scale-factor: 1.333;
$ie8compatability: true;
Set Your base font size on the html ans body
`scss`
html { @include khtml(); }
body { @include kbody(); }
This can be done in your base or normalization files, or later on before you define youe type. You should be defining your typography straight after your normalize / reset.
Set up your Typography
`scss`
h1,h2,h3,h4,h5,h6 {text-transform: uppercase;}
h1 { @include ktype(5, 1, 1); }
h2 { @include ktype(4, 1, 1); }
h3 { @include ktype(3, 1, 1); }
h4 { @include ktype(2, 1, 1); }
h5 { @include ktype(1, 1, 0); }
h6 {
@include ktype(0, 1, 0);
font-weight: normal;
text-transform: capitalize;
}
p, ul, ol {@include ktype(0,0,1);}
small { @include ktype(-1,0,1); }
Use the krem() mixin to set any other value in rems, because no one really spends their life thinking in relative units of measure.
`scss`
@include krem("height", 160px);$3
note the bloat added by the IE compatability, obviously setting that to false will result in halving the output. Have a look at the basic demo in the example folder for more information.
`css
// Type Setup
html {
font-size: 16px;
line-height: 24px; }
body {
font-size: 16px;
line-height: 24px;
font-size: 1rem;
line-height: 1.5rem; }
// Typography
h1, h2, h3, h4, h5, h6 {
text-transform: uppercase; }
h1 {
font-size: 68px;
font-size: 4.25rem;
line-height: 72px;
line-height: 4.5rem;
margin-top: 48px;
margin-top: 3rem;
margin-bottom: 24px;
margin-bottom: 1.5rem; }
h2 {
font-size: 51px;
font-size: 3.1875rem;
line-height: 72px;
line-height: 4.5rem;
margin-top: 24px;
margin-top: 1.5rem;
margin-bottom: 24px;
margin-bottom: 1.5rem; }
h3 {
font-size: 38px;
font-size: 2.375rem;
line-height: 48px;
line-height: 3rem;
margin-top: 24px;
margin-top: 1.5rem;
margin-bottom: 24px;
margin-bottom: 1.5rem; }
h4 {
font-size: 29px;
font-size: 1.8125rem;
line-height: 48px;
line-height: 3rem;
margin-top: 24px;
margin-top: 1.5rem;
margin-bottom: 24px;
margin-bottom: 1.5rem; }
h5 {
font-size: 22px;
font-size: 1.375rem;
line-height: 24px;
line-height: 1.5rem;
margin-top: 24px;
margin-top: 1.5rem;
margin-bottom: 0px;
margin-bottom: 0rem; }
h6 {
font-size: 16px;
font-size: 1rem;
line-height: 24px;
line-height: 1.5rem;
margin-top: 24px;
margin-top: 1.5rem;
margin-bottom: 0px;
margin-bottom: 0rem;
text-transform: capitalize; }
p, ul, ol, dl {
font-size: 16px;
font-size: 1rem;
line-height: 24px;
line-height: 1.5rem;
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 24px;
margin-bottom: 1.5rem; }
small {
display: inline-block;
font-size: 13px;
font-size: 0.8125rem;
line-height: 24px;
line-height: 1.5rem;
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 0px;
margin-bottom: 0rem; }
``
Typography is an essential art for web and application development, a lot of the internet is essentailly slightly interactive documents, and its therefore imperative that we achieve strong vertical layouts and create a clear visual heirachy to our content.
Knife is essentially a small collections of mixins leveraging good typographic principals to make setting up strong typographic layouts reasonably quick, easy and intuitive. Right now knife is not seeking to solve every problem or individual instance, but is there to help you get going quickly, and have a great typographic foundation in your SCSS.
* Make vertical rhythm, modular scale and rem units easy to implement and use.
* Maintain and develop a small inuitive API for typography in scss
* Switchable support for old browsers.
* Stimulate the conversation about good web typography between developers and designers.
heavily inspired by the awesome web app Grid Lover and sevenupcan's sass gridlover mixin. I've been further pushed to develop this little SASS tool to help "onboard" team members with typographic layout principals, using REM units, speeding up starting dev time on projects and make something without a steep learning curve. I hope you find it useful too.
#### About Web Typography
* More Meaningful Typography
* Setting Typeon the Web to Baseline Grid
* Composing the New Canon: Music, Harmony, Proportion
* Relational Design
* Aligning type to baseline the right way using SASS
* Scotch.io : Typography and vertical rhythm
#### Tools for Better Type
Please Feel free to make pull requests or suggest features, this project is super new and still growing into itself, I generally create feat/something branches for specific features, but will create a seperate development branch for contributors to make pull requests against.