Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

adds Stylus and SCSS versions of vertical-rhythm.css

  • Loading branch information...
commit 75e0fa68565a935388ba6ed62d50962ddb070f52 1 parent 89331b6
@jonschlinkert authored
Showing with 506 additions and 15 deletions.
  1. +20 −9 README.md
  2. +18 −6 package.json
  3. +234 −0 vertical-rhythm.scss
  4. +234 −0 vertical-rhythm.styl
View
29 README.md
@@ -1,12 +1,26 @@
# Vertical Rhythm
-> LESS and CSS starting point for vertical rhythm with your typography.
+> Create typographical vertical rhythm in your CSS. LESS, Stylus and SASS versions included.
-This is just a starting point, but it should get you to your goal faster than starting from scratch. Please customize it to work with your own project.
+This should get you to your goal faster than starting from scratch. Please customize it to work with your own project.
**Example list styles**
+`vertical-rhythm.scss` and `vertical-rhythm.styl`
+
+```scss
+.rhythm {
+ h3 + ul.bullet-list,
+ h3 + ul.numbered-list,
+ h3 + ul.alpha-list,
+ h3 + ol.numbered-list {
+ margin-top: ($line-height-base / 2);
+ }
+}
+```
+`vertical-rhythm.less`
+
```scss
.rhythm {
h3 + ul.bullet-list,
@@ -18,15 +32,15 @@ This is just a starting point, but it should get you to your goal faster than st
}
```
-Designed to be mostly framework agnostic, although the baseline styles for normalizing are borrowed from Bootstrap. This means `vertical-rhythm.less` will make a good drop-in component for Bootstrap, _but it can also be used standalone for any project_.
+Designed to be mostly framework agnostic, although the baseline styles for normalizing are borrowed from Bootstrap. This means `vertical-rhythm.{less,styl,sass,css}` will make a good drop-in component for Bootstrap, _but it can also be used standalone for any project_.
## How does this work?
-In **vertical-rhythm.less/css** you will find two sections:
+In **vertical-rhythm.{less,styl,sass,css}** you will find two sections:
#### I. Typography Base
-If you use Bootstrap or Foundation, just get rid these base styles before you drop `vertical-rhythm.less` into your project. This section is not strictly necessary for creating vertical rhythm, but they're a great starting point for any project.
+If you use Bootstrap or Foundation, just get rid these base styles before you drop `vertical-rhythm.{less,styl,sass,css}` into your project. This section is not strictly necessary for creating vertical rhythm, but they're a great starting point for any project.
#### II. Vertical Rhythm
@@ -45,9 +59,6 @@ The `.rhythm` styles are designed with sensible defaults that you should be able
* Contributions and requests are very welcome.
* Please comment the code in your requests so I can easily and quickly evaluate it.
-I'd like to add SASS/SCSS and Stylus versions, so if you want to contribute this before I have a chance to do it, I would be forever grateful.
-
-
## Author
@@ -61,5 +72,5 @@ I'd like to add SASS/SCSS and Stylus versions, so if you want to contribute this
## Credit & Attribution
-> The baseline section in the vertical rhythm component is based on type.less from the excellent [Bootstrap](http://twitter.github.com/bootstrap), by [Mark Otto](https://github.com/mdo) and [Jacob Thornton](https://github.com/fat).
+> The baseline section in the vertical rhythm component is based on `type.less` from the excellent [Bootstrap](http://twitter.github.com/bootstrap), by [Mark Otto](https://github.com/mdo) and [Jacob Thornton](https://github.com/fat).
View
24 package.json
@@ -1,7 +1,7 @@
{
"name": "vertical-rhythm",
- "description": "LESS/CSS starting point for creating typographical vertical rhythm in your project.",
- "version": "0.1.0",
+ "description": "Put some vertical rhythm in your CSS. LESS, Stylus and SASS versions included.",
+ "version": "0.3.0",
"homepage": "http://github.com/jonschlinkert/vertical-rhythm",
"author": {
"name": "Jon Schlinkert",
@@ -22,11 +22,23 @@
}
],
"keywords": [
- "component",
- "vertical rhythm",
- "vertical-rhythm",
+ "compass vertical rhythm",
+ "css typography",
+ "css vertical rhythm",
+ "font size setting",
+ "less typography",
+ "less vertical rhythm",
+ "scss vertical rhythm",
+ "sass vertical rhythm",
+ "stylus vertical rhythm",
+ "type",
"typographical",
+ "typography vertical rhythm",
"typography",
- "type"
+ "vertical compass",
+ "vertical rhythm example",
+ "vertical rhythm css",
+ "vertical rhythm generator",
+ "vertical-rhythm"
]
}
View
234 vertical-rhythm.scss
@@ -0,0 +1,234 @@
+/*
+// Vertical Rhythm
+// -------------------------------------------------- */
+
+
+/* Variables
+ * -------------------------------------------
+ * Put your custom variables here. If you use bootstrap, use those
+ * and add your own for vertical rhythm
+ */
+
+$font-size-base: 14px;
+$line-height-base: 20px;
+
+
+/* TYPOGRAPHY BASE
+ * -------------------------------------------
+ * First, we establish a baseline to normalize typography.
+ * Credit: this BASE section is based on Twitter Bootstrap's type.less
+ * but with everything that isn't related to rhythm removed.
+ */
+
+
+
+/* Headings
+ * -------------------------------------------
+ * normalize baselines for headings, remove
+ * this block if you use Twitter Bootstrap
+ */
+
+h1, h2, h3, h4, h5, h6 {
+ margin: ($line-height-base / 2) 0;
+ line-height: $line-height-base;
+ small {
+ line-height: 1;
+ }
+}
+
+h1, h2 {
+ margin-top: $line-height-base;
+ margin-bottom: ($line-height-base / 2);
+ line-height: ($line-height-base * 2);
+}
+h3, h4, h5, h6 {
+ margin-top: ($line-height-base / 2);
+ margin-bottom: ($line-height-base / 2);
+}
+
+h1 { font-size: $font-size-base * 2.75; font-size: 4rem; } // ~38px
+h2 { font-size: $font-size-base * 2.25; font-size: 3rem; } // ~32px
+h3 { font-size: $font-size-base * 1.75; font-size: 2.5rem; } // ~24px
+h4 { font-size: $font-size-base * 1.25; font-size: 2rem; } // ~18px
+h5 { font-size: $font-size-base; font-size: 1.6rem; }
+h6 { font-size: $font-size-base * 0.85; font-size: 1.2rem; } // ~12px
+
+h1 small { font-size: $font-size-base * 1.75; } // ~24px
+h2 small { font-size: $font-size-base * 1.25; } // ~18px
+h3 small { font-size: $font-size-base; }
+h4 small { font-size: $font-size-base; }
+
+
+/* Lists
+ * -------------------------------------------
+ */
+
+// Unordered and Ordered lists
+ul, ol {
+ padding: 0;
+ margin: 0 0 ($line-height-base / 2) 25px;
+}
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+ margin-bottom: 0;
+}
+li {
+ line-height: $line-height-base;
+}
+
+// Description Lists
+dl {
+ margin-bottom: $line-height-base;
+}
+dt, dd {
+ line-height: $line-height-base;
+}
+dd {
+ margin-left: ($line-height-base / 2);
+}
+
+
+// MISC
+// ----
+
+// Horizontal rules
+hr {
+ margin: $line-height-base 0;
+ border: 0;
+ border-top: 1px solid $hr-border;
+ border-bottom: 1px solid #fff;
+}
+
+
+
+/* VERTICAL RHYTHM
+ * -------------------------------------------
+ * Add .rhythm to parent elements when you
+ * wish to apply vertical rhythm to child elements
+ */
+
+
+/* Body text & Misc
+ * -------------------------------------------
+ */
+
+.rhythm {
+ p, ul, ol, blockquote, address, pre, form {
+ margin-bottom: $line-height-base;
+
+ // And remove margin from last element
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+}
+
+
+
+/* Headings & paragraphs
+ * -------------------------------------------
+ * Here we apply special spacing to certain
+ * typographical patterns. It is impossible to
+ * predict the patterns you require for your
+ * project, so this is only a starting point.
+ */
+
+.rhythm {
+ h1, h2, h3 {
+ margin-bottom: ($line-height-base / 4);
+ }
+ h1 + h2 {
+ margin-top: $line-height-base;
+ }
+ h4 {
+ margin-bottom: ($line-height-base / 6);
+ }
+ h1 + p,
+ p + h4 {
+ margin-top: ($line-height-base * 1.5);
+ }
+ h2 + h3,
+ h2 + h4 {
+ margin-top: $line-height-base;
+ }
+ h2 + p,
+ h3 + p {
+ margin-top: ($line-height-base / 2);
+ }
+ p + h2 {
+ margin-top: ($line-height-base * 3);
+ }
+ h3 + h4 {
+ margin-top: ($line-height-base * 2);
+ }
+}
+
+/* Lists
+ * -------------------------------------------
+ * Special classes for numbered, bulleted,
+ * and alpha lists.
+ */
+
+.rhythm {
+
+ //
+ h3 + ul.bullet-list,
+ h3 + ul.numbered-list,
+ h3 + ul.alpha-list,
+ h3 + ol.numbered-list {
+ margin-top: ($line-height-base / 2);
+ }
+
+
+ ul.bullet-list + h3,
+ ul.numbered-list + h3,
+ ul.alpha-list + h3 {
+ margin-top: ($line-height-base * 2);
+ }
+ h4 + ul.bullet-list,
+ h4 + ul.numbered-list,
+ h4 + ul.alpha-list,
+ h4 + ol.numbered-list {
+ margin-top: ($line-height-base / 2);
+ }
+ .bullet-list {
+ list-style-type: disc; // bullets
+ padding-left: 1.25em;
+ }
+ .numbered-list {
+ list-style-type: decimal; // numbers
+ padding-left: 1.5em;
+ }
+ .alpha-list {
+ list-style-type: lower-alpha; // letters
+ padding-left: 1.5em;
+ }
+ .bullet-list li,
+ .numbered-list li,
+ .alpha-list li {
+ margin-bottom: ($line-height-base / 2);
+ }
+ .condensed-list li {
+ margin-bottom: 0;
+ }
+ .flush-list li {
+ padding-left: 0;
+ }
+}
+
+
+/* Blockquotes
+ * -------------------------------------------
+ */
+
+.rhythm blockquote {
+ padding: $line-height-base $line-height-base 0;
+}
+
+
+
+
+
+
View
234 vertical-rhythm.styl
@@ -0,0 +1,234 @@
+/*
+// Vertical Rhythm
+// -------------------------------------------------- */
+
+
+/* Variables
+ * -------------------------------------------
+ * Put your custom variables here. If you use bootstrap, use those
+ * and add your own for vertical rhythm
+ */
+
+$font-size-base = 14px;
+$line-height-base = 20px;
+
+
+/* TYPOGRAPHY BASE
+ * -------------------------------------------
+ * First, we establish a baseline to normalize typography.
+ * Credit: this BASE section is based on Twitter Bootstrap's type.less
+ * but with everything that isn't related to rhythm removed.
+ */
+
+
+
+/* Headings
+ * -------------------------------------------
+ * normalize baselines for headings, remove
+ * this block if you use Twitter Bootstrap
+ */
+
+h1, h2, h3, h4, h5, h6 {
+ margin: ($line-height-base / 2) 0;
+ line-height: $line-height-base;
+ small {
+ line-height: 1;
+ }
+}
+
+h1, h2 {
+ margin-top: $line-height-base;
+ margin-bottom: ($line-height-base / 2);
+ line-height: ($line-height-base * 2);
+}
+h3, h4, h5, h6 {
+ margin-top: ($line-height-base / 2);
+ margin-bottom: ($line-height-base / 2);
+}
+
+h1 { font-size: $font-size-base * 2.75; font-size: 4rem; } // ~38px
+h2 { font-size: $font-size-base * 2.25; font-size: 3rem; } // ~32px
+h3 { font-size: $font-size-base * 1.75; font-size: 2.5rem; } // ~24px
+h4 { font-size: $font-size-base * 1.25; font-size: 2rem; } // ~18px
+h5 { font-size: $font-size-base; font-size: 1.6rem; }
+h6 { font-size: $font-size-base * 0.85; font-size: 1.2rem; } // ~12px
+
+h1 small { font-size: $font-size-base * 1.75; } // ~24px
+h2 small { font-size: $font-size-base * 1.25; } // ~18px
+h3 small { font-size: $font-size-base; }
+h4 small { font-size: $font-size-base; }
+
+
+/* Lists
+ * -------------------------------------------
+ */
+
+// Unordered and Ordered lists
+ul, ol {
+ padding: 0;
+ margin: 0 0 ($line-height-base / 2) 25px;
+}
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+ margin-bottom: 0;
+}
+li {
+ line-height: $line-height-base;
+}
+
+// Description Lists
+dl {
+ margin-bottom: $line-height-base;
+}
+dt, dd {
+ line-height: $line-height-base;
+}
+dd {
+ margin-left: ($line-height-base / 2);
+}
+
+
+// MISC
+// ----
+
+// Horizontal rules
+hr {
+ margin: $line-height-base 0;
+ border: 0;
+ border-top: 1px solid $hr-border;
+ border-bottom: 1px solid #fff;
+}
+
+
+
+/* VERTICAL RHYTHM
+ * -------------------------------------------
+ * Add .rhythm to parent elements when you
+ * wish to apply vertical rhythm to child elements
+ */
+
+
+/* Body text & Misc
+ * -------------------------------------------
+ */
+
+.rhythm {
+ p, ul, ol, blockquote, address, pre, form {
+ margin-bottom: $line-height-base;
+
+ // And remove margin from last element
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+}
+
+
+
+/* Headings & paragraphs
+ * -------------------------------------------
+ * Here we apply special spacing to certain
+ * typographical patterns. It is impossible to
+ * predict the patterns you require for your
+ * project, so this is only a starting point.
+ */
+
+.rhythm {
+ h1, h2, h3 {
+ margin-bottom: ($line-height-base / 4);
+ }
+ h1 + h2 {
+ margin-top: $line-height-base;
+ }
+ h4 {
+ margin-bottom: ($line-height-base / 6);
+ }
+ h1 + p,
+ p + h4 {
+ margin-top: ($line-height-base * 1.5);
+ }
+ h2 + h3,
+ h2 + h4 {
+ margin-top: $line-height-base;
+ }
+ h2 + p,
+ h3 + p {
+ margin-top: ($line-height-base / 2);
+ }
+ p + h2 {
+ margin-top: ($line-height-base * 3);
+ }
+ h3 + h4 {
+ margin-top: ($line-height-base * 2);
+ }
+}
+
+/* Lists
+ * -------------------------------------------
+ * Special classes for numbered, bulleted,
+ * and alpha lists.
+ */
+
+.rhythm {
+
+ //
+ h3 + ul.bullet-list,
+ h3 + ul.numbered-list,
+ h3 + ul.alpha-list,
+ h3 + ol.numbered-list {
+ margin-top: ($line-height-base / 2);
+ }
+
+
+ ul.bullet-list + h3,
+ ul.numbered-list + h3,
+ ul.alpha-list + h3 {
+ margin-top: ($line-height-base * 2);
+ }
+ h4 + ul.bullet-list,
+ h4 + ul.numbered-list,
+ h4 + ul.alpha-list,
+ h4 + ol.numbered-list {
+ margin-top: ($line-height-base / 2);
+ }
+ .bullet-list {
+ list-style-type: disc; // bullets
+ padding-left: 1.25em;
+ }
+ .numbered-list {
+ list-style-type: decimal; // numbers
+ padding-left: 1.5em;
+ }
+ .alpha-list {
+ list-style-type: lower-alpha; // letters
+ padding-left: 1.5em;
+ }
+ .bullet-list li,
+ .numbered-list li,
+ .alpha-list li {
+ margin-bottom: ($line-height-base / 2);
+ }
+ .condensed-list li {
+ margin-bottom: 0;
+ }
+ .flush-list li {
+ padding-left: 0;
+ }
+}
+
+
+/* Blockquotes
+ * -------------------------------------------
+ */
+
+.rhythm blockquote {
+ padding: $line-height-base $line-height-base 0;
+}
+
+
+
+
+
+
Please sign in to comment.
Something went wrong with that request. Please try again.