Avoid conflicts with existing stylesheets by adding specifity to css files.

README.md

@@ -26,11 +26,23 @@ To get up and running simply...
 3. Bind the events on the `document` with `grande.init()`
 4. You are set!
 
+### Included files
+
 There are two CSS files that come with the included demo:
 
 - `editor.css`: this file provides the style for the `contenteditable` elements on the page
 - `menu.css`: this file provides the toolbar styling to appear as it does below
 
+## Options to grande.bind
+
+The `bind` function currently accepts two parameters: bindableNodes and an options list.
+
+The calling code can pass in a `NodeList` as the first parameter that will bind to these elements and enable `contentEditable` on them, if nothing is passed in it defaults to elements that match the selector `.g-body article`.
+
+The second parameter is an `options` object that accepts the following keys:
+
+- `animate`: if true, this will trigger the CSS animations (defaults to true). Useful to turn to false if `subpixel-antialised` is needed in Safari.
+
 ![image](http://f.cl.ly/items/0O1M1R1g2w1P213C0S3Z/Screen%20Shot%202013-08-21%20at%2011.53.55%20PM.png)
 
 The following tag stylings are available: `<b>`, `<i>`, `<h1>`, `<h2>`, `<blockquote>`, `<a>`, `<ol>`, `<ul>`, `<hr>`
@@ -44,3 +56,4 @@ Roadmap
 -------
 - Images (figure)
 - execCommand to support `<strong>` and `<em>`
+- CSS animations to match the `pop-upwards` on Medium

css/editor.css

@@ -2,91 +2,82 @@
   font-family: medium-icons;
   src: url("fonts/medium-icons.woff");
 }
-
-body {
+.g-body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Georgia, serif;
-  min-width: 750px;
-  width: 100%;
-  color: #333332;
-  padding-top: 50px;
-}
-
-.g-body h1,
-.g-body p,
-.g-body blockquote,
-.g-body ol,
-.g-body ul {
-  margin-bottom: 15px;
-}
-
-.g-body article {
-  outline-style: none;
-}
-
-/* Override webkit's <article> default */
-.g-body h1 {
-  font-size: 2em;
 }
-
 .g-body header {
   font-weight: bold;
   font-size: 52px;
 }
-
 .g-body section {
   max-width: 750px;
   margin: auto;
 }
-
-.g-body blockquote {
+.g-body article {
+  outline-style: none;
+  font-size: 16px;
+}
+.g-body header {
+  font-weight: bold;
+  font-size: 52px;
+}
+.g-body article h1,
+.g-body article p,
+.g-body article blockquote,
+.g-body article ol,
+.g-body article ul {
+  margin-bottom: 15px;
+}
+.g-body article h1 {
+  /* Override webkit's <article> default */
+  font-size: 32px;
+}
+.g-body article h2 {
+  font-size: 24px;
+}
+.g-body article blockquote {
   font-weight: 400;
   font-style: italic;
   border-left: 6px solid #60d778;
   padding-left: 20px;
   margin-left: -26px;
 }
-
-.g-body a {
+.g-body article a {
   text-decoration: underline;
-  color: #333332;
+  color: inherit;
 }
-
-.g-body ol, .g-body ul {
+.g-body article ol,
+.g-body article ul {
   list-style: none;
   list-style-image: none;
   margin-left: 0;
   margin-top: 0;
   padding-left: 0;
 }
-
-.g-body ol li:before,
-.g-body ul li:before {
+.g-body article ol li:before,
+.g-body article ul li:before {
   width: 30px;
   display: inline-block;
 }
-
-.g-body ol {
+.g-body article ol {
   counter-reset: post;
 }
-
-.g-body ol li:before {
+.g-body article ol li:before {
   font-weight: bold;
   counter-increment: post;
   content: counter(post) ".";
 }
-
-.g-body ul li:before {
+.g-body article ul li:before {
   font-family: "medium-icons";
   content: "\e028";
   text-decoration: none;
   font-size: 14px;
 }
-
-.g-body hr {
+.g-body article hr {
   display: block;
   width: 20%;
   margin: 30px auto 20px auto;
-  border: 1px solid #dededc;
-}
+  border-top: 1px solid #dededc;
+  border-bottom: 1px solid #dededc;
+}

css/menu.css

@@ -60,43 +60,32 @@
   }
 }
 
-.g-body .text-menu {
+.text-menu {
   -webkit-transition: opacity 180ms, margin 180ms;
   -ms-transition: opacity 180ms, margin 180ms;
   transition: opacity 180ms, margin 180ms;
-
   position: absolute;
-  color: #fff;
+  color: #ffffff;
   margin-top: -20px;
   margin-left: -115px;
 }
 
-.g-body .text-menu.active {
+.text-menu.active {
   -webkit-animation:pop-upwards 180ms forwards linear;
   -ms-animation:pop-upwards 180ms forwards linear;
   animation:pop-upwards 180ms forwards linear;
 }
 
-.url {
-  font-size: 16px !important;
-  font-family: 'icomoon' !important;
-}
-
 .text-menu.hide {
   left: -999px;
   top: -999px;
 }
-
 .text-menu.fade {
   opacity: 0;
   margin-top: -5px;
 }
 
-.text-menu .active {
-  color: #60d778;
-}
-
-.text-menu button {
+.text-menu .options button {
   -webkit-transition: opacity 400ms;
   -ms-transition: opacity 400ms;
   transition: opacity 400ms;
@@ -107,10 +96,12 @@
   font-size: 16px;
   color: inherit;
   padding: 0px;
-  height: 32px;
-  width: 25px;
+  height: 30px;
+  width: 28px;
   border: 0px;
   outline: none;
+  float: left;
+  margin-right: 1px;
 
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -120,7 +111,7 @@
   user-select: none;
 }
 
-.options {
+.text-menu .options {
   background-color: #262625;
   box-shadow: 0 0 2px #262625;
   position: absolute;
@@ -131,69 +122,75 @@
   padding: 5px 4px 5px 5px;
   width: 176px;
   height: 33px;
-
   -webkit-transition: all 300ms ease-in-out;
   -ms-transition: all 300ms ease-in-out;
   transition: all 300ms ease-in-out;
 }
 
-.options.url-mode {
+.text-menu .options.url-mode {
   width: 176px;
 }
-
-.options.url-mode .header1,
-.options.url-mode .header2,
-.options.url-mode .bold,
-.options.url-mode .italic,
-.options.url-mode .quote,
-.options.url-mode .url {
+.text-menu .options.url-mode .header1,
+.text-menu .options.url-mode .header2,
+.text-menu .options.url-mode .bold,
+.text-menu .options.url-mode .italic,
+.text-menu .options.url-mode .quote,
+.text-menu .options.url-mode .url {
   width: 0px;
   overflow: hidden;
   margin-right: 0px;
   opacity: 0;
 }
 
-.options .italic {
-  font-style: italic;
+.text-menu .options button.active {
+  color: #60d778;
 }
-
-.options .quote {
-  line-height: 54px !important;
-  font-size: 41px !important;
+.text-menu .options button.url {
+  font-size: 16px;
+  font-family: 'icomoon';
 }
-
-.options button {
-  float: left;
-  width: 28px;
-  height: 30px;
-  border-radius: 3px;
-  margin-right: 1px;
+.text-menu .options button.italic {
+  font-style: italic;
 }
-
-.options.url-mode input{
-  border-left: 2px solid transparent;
-  padding-right: 5px;
-  padding-left: 5px;
-  width: 155px;
-  background: transparent;
-  color: #fff;
+.text-menu .options button.quote {
+  line-height: 54px;
+  font-size: 41px;
 }
-
-.options input {
+.text-menu .options input {
   border-radius: 3px;
   overflow: hidden;
   outline: 0px;
   height: 30px;
   padding: 0px;
   margin: 0px;
   border: 0px;
+  font-size: 12px;
   float: left;
   width: 0px;
+  background: transparent;
+  color: #ffffff;
+  -webkit-transition: none;
+  -ms-transition: none;
+  transition: none;
 }
-
-.options:before {
+.text-menu .options.url-mode input {
+  border-left: 2px solid transparent;
+  padding-right: 5px;
+  padding-left: 5px;
+  width: 155px;
+}
+.text-menu .options input:hover,
+.text-menu .options input:focus {
+  -webkit-box-shadow: none;
+  -khtml-box-shadow: none;
+  -moz-box-shadow: none;
+  -ms-box-shadow: none;
+  -o-box-shadow: none;
+  box-shadow: none;
+}
+.text-menu .options:before {
   content: "";
-  border-top: 5px solid rgba(0,0,0,0.9);
+  border-top: 5px solid #262625;
   border-bottom: 5px solid transparent;
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;

index.html

@@ -4,9 +4,18 @@
     <title>grande.js</title>
     <meta charset="utf-8">
     <meta name="description" content="grande.js: a way for you to express yourself">
-
     <link href="css/menu.css" rel="stylesheet">
     <link href="css/editor.css" rel="stylesheet">
+    <style>
+      body {
+        font-family: Georgia, serif;
+        min-width: 750px;
+        width: 100%;
+        color: #333332;
+        padding-top: 50px;
+        margin: 0px;
+      }
+    </style>
   </head>
 
   <body class="g-body">