Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit fc331ac21c14cf7312521018e2abd0a7d38ab0b6 Cameron McEfee committed Feb 7, 2012
Showing with 307 additions and 0 deletions.
  1. +54 −0 css/reset.css
  2. +96 −0 css/styles.css
  3. +62 −0 index.html
  4. +73 −0 js/headsmart.js
  5. +22 −0 readme.md
@@ -0,0 +1,54 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+header, footer, section {
+ display: block;
+ position: relative;
+}
@@ -0,0 +1,96 @@
+/* content */
+
+body {
+ background: #ece4d8;
+ font: normal 800 15px/1.5 'Open Sans', sans-serif;
+ color: #544943;
+ -webkit-font-smoothing: antialiased;
+}
+
+div.shell {
+ display: block;
+ width: 1090px;
+ margin: 0 auto;
+}
+
+header h1 {
+ color: #7c334f;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 800;
+ font-size: 48px;
+ text-align: center;
+ border-bottom: 5px double #d3ccc1;
+}
+
+#main_content .title {
+ font-size: 28px;
+ color: #7c334f;
+ font-style: italic;
+ margin: 30px 0 10px;
+ line-height: 1.2;
+ padding-bottom: 10px;
+ border-bottom: 2px solid #d3ccc1;
+ text-align: center;
+}
+
+#demo-1,
+#demo-2,
+#demo-3 {
+ position: relative;
+ width: 350px;
+ float: left;
+}
+
+#demo-1,
+#demo-2 {
+ margin-right: 20px;
+}
+
+/* Content based headers */
+
+#main_content > .header-level-1:first-child,
+#main_content > .header-level-2:first-child,
+#main_content > .header-level-3:first-child,
+#main_content > .header-level-4:first-child,
+#main_content > .header-level-5:first-child,
+#main_content > .header-level-6:first-child {
+ margin: 0 0 10px;
+}
+
+.header-level-1 {
+ font-size: 28px;
+ color: #cd596b;
+ margin: 30px 0 10px;
+ line-height: 1.2;
+ padding-bottom: 10px
+}
+
+.header-level-2 {
+ font-size: 24px;
+ color: #8b786f;
+ margin: 30px 0 10px;
+ line-height: 1.2;
+ padding-bottom: 10px
+}
+
+.header-level-3 {
+ margin: 20px 0 10px;
+ font-size: 22px;
+}
+
+.header-level-4 {
+ margin: 10px 0;
+ font-size: 18px;
+ color: #cd596b;
+}
+
+.header-level-5 {
+ margin: 10px 0;
+ font-size: 15px;
+ color: #8b786f;
+}
+
+.header-level-6 {
+ margin: 10px 0;
+ font-size: 13px;
+}
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset='utf-8'>
+ <meta http-equiv="X-UA-Compatible" content="chrome=1">
+ <link href='http://fonts.googleapis.com/css?family=Open+Sans:700italic,800italic,800,700&subset=latin,cyrillic-ext,greek-ext,vietnamese,greek,cyrillic,latin-ext' rel='stylesheet' type='text/css'>
+
+ <link rel="stylesheet" type="text/css" href="css/reset.css" />
+ <link rel="stylesheet" type="text/css" href="css/styles.css" />
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript" src="js/headsmart.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function () {
+ $('#demo-1 .content').headsmart()
+ $('#demo-2 .content').headsmart()
+ $('#demo-3 .content').headsmart()
+ })
+ </script>
+ <title>Headsmart Demo</title>
+ </head>
+
+ <body>
+
+ <div class="shell">
+
+ <header>
+ <h1>Headsmart Demo</h1>
+ </header>
+
+ <section id="main_content">
+ <div id="demo-1">
+ <h2 class="title">Demo 1</h2>
+ <div class="content">
+ <h1>I'm a &lt;h1&gt; tag</h1>
+ <h2>I'm a &lt;h2&gt; tag</h2>
+ <h3>I'm a &lt;h3&gt; tag</h3>
+ <h4>I'm a &lt;h4&gt; tag</h4>
+ <h5>I'm a &lt;h5&gt; tag</h5>
+ <h6>I'm a &lt;h6&gt; tag</h6>
+ </div>
+ </div>
+ <div id="demo-2">
+ <h2 class="title">Demo 2</h2>
+ <div class="content">
+ <h4>I'm a &lt;h4&gt; tag</h4>
+ <h5>I'm a &lt;h5&gt; tag</h5>
+ <h6>I'm a &lt;h6&gt; tag</h6>
+ </div>
+ </div>
+ <div id="demo-3">
+ <h2 class="title">Demo 3</h2>
+ <div class="content">
+ <h1>I'm a &lt;h1&gt; tag</h1>
+ <h3>I'm a &lt;h3&gt; tag</h3>
+ <h4>I'm a &lt;h4&gt; tag</h4>
+ <h6>I'm a &lt;h6&gt; tag</h6>
+ </div>
+ </div>
+ </section>
+ </div>
+ </body>
+</html>
@@ -0,0 +1,73 @@
+(function($){
+
+ // a plugin that sets up to 6 levels of header hierarchy
+ // and distributes the styles among the headers present
+ // in the document. This helps keep styles sexy regardless
+ // of which headers a user chooses to use.
+ //
+ // Parameters
+ //
+ // headers - Array, list of header styles
+ //
+ // returns nothing
+ $.fn.headsmart = function(){
+ var contentElement = $(this)
+ setHeaders()
+
+
+ // sets up to six header styles to be spread over
+ // the headers actually found in the content
+ //
+ // Parameters
+ //
+ // headers - Array, list of header styles
+ // e - Element whose children will be checked
+ //
+ // returns nothing
+ function setHeaders(){
+ var existingHeaders = []
+ var headerStyles = ''
+
+ // find which headers exist
+ if(contains('h1')){
+ existingHeaders.push('h1')
+ }
+ if(contains('h2')){
+ existingHeaders.push('h2')
+ }
+ if(contains('h3')){
+ existingHeaders.push('h3')
+ }
+ if(contains('h4')){
+ existingHeaders.push('h4')
+ }
+ if(contains('h5')){
+ existingHeaders.push('h5')
+ }
+ if(contains('h6')){
+ existingHeaders.push('h6')
+ }
+
+ for(var i=0;i<existingHeaders.length;i++){
+ var newClass = 'header-level-'+(i+1)
+ contentElement.children(existingHeaders[i]).addClass(newClass)
+ }
+ }
+
+ // sets up to six header styles to be spread over
+ // the headers actually found in the contetn
+ //
+ // Parameters
+ //
+ // e - element to be look
+ //
+ // returns boolean
+ function contains(e){
+ if(contentElement.children(e).length > 0){
+ return true
+ } else {
+ return false
+ }
+ }
+ }
+})(jQuery)
@@ -0,0 +1,22 @@
+# Welcome to Headsmart
+
+Headsmart is a jQuery plugin which applies header hierarchy dynamically based on which headers are present.
+
+When building templates, you can't put faith in the user that they'll add header tags in the hierarchy you prefer. While we'd love to assume that they'd know to start with an `<h3>`, more likely they'll start with an `<h1>`. This is where Headsmart comes in.
+
+<<<<<<< HEAD
+Headsmart looks at the element you supply it, and assigns header classes levels 1 – 6 to the header tags that are actually present. That means that the largest header will still look like your level 1 header whether it's a `<h1>` or `<h3>`.
+=======
+Headsmart looks at the element you supply it, and assigns header classes levels 1 – 6 to the headers that are actually present. That means that the largest header will still look like your level 1 header whether it's a `<h1>` or `<h3>`.
+>>>>>>> origin/master
+
+## Usage
+
+1. Since you will be styling your headers with classes rather than their actual elements, you'll want to use come kind of [css reset](http://meyerweb.com/eric/tools/css/reset/) to get all your headers looking the same.
+
+2. Now that your css is all equal, simply use headsmart on the element containing your content.
+`$('#site-content').headsmart()`
+
+3. Headsmart only looks for direct children of the element supplied, so nested headers will not be effected.
+
+![](http://share.cameronmcefee.com/screencap/Headsmart_Demo-20120207-154105.png)

0 comments on commit fc331ac

Please sign in to comment.