Permalink
Browse files

Added deep linking UI + section on CSS centering.

  • Loading branch information...
1 parent 581c573 commit f29a8829545b5f447299e208f19881a5bd5aa264 @taitems committed Aug 2, 2011
Showing with 163 additions and 10 deletions.
  1. +4 −0 .gitignore
  2. BIN images/link_16.png
  3. BIN images/link_32.png
  4. +12 −9 includes/interact.js
  5. +39 −1 includes/styles.css
  6. +108 −0 index.html
View
@@ -0,0 +1,4 @@
+
+includes/.DS_Store
+
+.DS_Store
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -1,17 +1,20 @@
$(function() {
var tocWrapper = $("#toc .wrapper");
-
- $("#mainContainer h1").each(function(i,item) {
- $("<a />")
- .text( $(item).text() )
- .attr("href","#")
- .data("scrollTo",item)
- .appendTo(tocWrapper)
+ $("#mainContainer")
+ .find("h1").each(function(i,item) {
+ $(item).append("<a class='deepLink' href='#" + item.id + "'></a>");
+ $("<a />")
+ .text( $(item).text() )
+ .attr("href","#")
+ .data("scrollTo",item)
+ .appendTo(tocWrapper);
+ }).end()
+ .find("h2").each(function(i,item) {
+ $(item).append("<a class='deepLink' href='#" + item.parentNode.id + "'></a>");
+ });
- });
-
});
$("#toc a").live("click", function(e) {
View
@@ -20,7 +20,8 @@ body {
h1, h2, h3, h4, h5 {
font-family: 'TodaySHOP-BoldRegular';
color: #23262d;
- text-shadow: 0 1px 0 #FFF;
+ text-shadow: 0 1px 0 rgba(255,255,255,0.01);
+ position: relative;
}
h1 {
@@ -70,6 +71,41 @@ p code {
margin-bottom: 5em;
}
+
+
+/* === DEEP LINKING === */
+.deepLink {
+ position: absolute;
+ top: 50%;
+ display: block;
+ opacity: 0.2;
+ filter: alpha(opacity=20);
+ -webkit-transition: opacity 0.5s linear;
+ -moz-transition: opacity 0.5s linear;
+ transition: opacity 0.5s linear;
+}
+.deepLink:hover {
+ opacity: 0.75;
+ filter: alpha(opacity=10);
+}
+h1 .deepLink {
+ background: url(../images/link_32.png);
+ width: 32px;
+ height: 32px;
+ margin-top: -20px;
+ /*left: -48px;*/
+ right: 0;
+}
+h2 .deepLink {
+ background: url(../images/link_16.png);
+ width: 16px;
+ height: 16px;
+ margin-top: -8px;
+ /*left: -24px;*/
+ right: 3px;
+}
+
+/* === TABLE OF CONTENTS === */
#toc {
position: fixed;
top: 0;
@@ -98,6 +134,8 @@ p code {
text-shadow: 0 -1px 0 rgba(0,0,0,0.75);
}
+
+
/* === RESPONSIVE LAYOUT STUFF === */
@media screen and (max-width: 950px){
#mainContainer {
View
@@ -1152,6 +1152,114 @@ <h3>The CSS:</h3>
+
+
+
+ <div id="cssClearingFloats" class="entry">
+ <h2>Clearing Floats</h2>
+
+ <p>
+ Clearing a <code>&lt;div&gt;</code> used to mean extra DOM, because it involved adding an extra clearer element. The better way is to set a specific width on the parent element (it doesn't work if it is "auto") and an overflow value of either auto or hidden.
+ "Hidden" obviously degrades better, but there are some IE compatibility versions where auto works better.
+ </p>
+
+ <h3>The HTML:</h3>
+
+ <script type="syntaxhighlighter" class="brush: xml; toolbar: false; gutter: false;"><![CDATA[
+
+ <div class="parentElement">
+ <div class="childElement">
+ I'm floated left!
+ </div>
+ I'm normal text that wraps around the float
+ </div>
+
+ ]]></script>
+
+ <h3>The CSS:</h3>
+
+ <script type="syntaxhighlighter" class="brush: css; toolbar: false; gutter: false;"><![CDATA[
+ .parentElement {
+ width: 100%;
+ overflow: hidden;
+ }
+ .childElement {
+ float: left;
+ }
+ ]]></script>
+
+ <p>
+ Contributors have also brough the latest clearfix to my attention. The <a href="http://nicolasgallagher.com/micro-clearfix-hack/" target="_blank">micro clear-fix</a>
+ is considered stable and cross browser compliant enough to make it to the latest HTML5 boiler plate release. I <strong>highly</strong> recommend you check it out.
+ Although I am not a massive fan of browser-specific CSS and pseudo elements such as <code>:after</code>, the micro clearfix is definitely more robust.
+ It also prevents top margins from collapsing which is an absolute life saver.
+ </p>
+
+ </div>
+
+
+
+
+
+
+
+
+
+
+ <div id="cssCentering" class="entry">
+ <h2>Vertical &amp; Horizontal Centering</h2>
+
+ <p>
+ Centering elements horizontally is not exactly rocket science, and I'm sure most of you are familiar with the following snippet:
+ </p>
+
+ <script type="syntaxhighlighter" class="brush: css; toolbar: false; gutter: false;"><![CDATA[
+ .class {
+ width: 960px;
+ margin: 0 auto;
+ }
+ ]]></script>
+
+ <p>
+ Front end devs have been using this snippet for a long time, without fully understanding why it didn't work vertically. From my understanding, it's important to remember that the parent element will generally have a <code>height: auto;</code> on it, and that there is no 100% height in which to vertically center the element. Applying the <code>position: absolute;</code> effectively moves the element out into position mode and responds to the pushing and pulling of auto margins and no specific location.
+ </p>
+
+ <script type="syntaxhighlighter" class="brush: css; toolbar: false; gutter: false;"><![CDATA[
+ .exactMiddle {
+ width: 100px;
+ height: 100px;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ }
+ ]]></script>
+
+ <p>
+ The downsides of this method include its lack of support in IE6 and IE7, and the absence of a scroll bar if the browser is resized to be smaller than the centered object. There are more methods on <a href="http://blog.themeforest.net/tutorials/vertical-centering-with-css/" target="_blank">this page</a> (this is Method 4), but this is by far the best.
+ </p>
+
+ <p>
+ The vertical centering of text in an element is also straightforward. If the text is on a single line, like a horizontal navigation item, you can set the <code>line-height</code> to be that of the element's physical height.
+ </p>
+
+ <script type="syntaxhighlighter" class="brush: css; toolbar: false; gutter: false;"><![CDATA[
+ #horizNav li {
+ height: 32px;
+ line-height: 32px;
+ }
+ ]]></script>
+
+ </div>
+
+
+
+
+
+
+
<div id="cssFeatureSniff" class="entry">
<h2>Feature Sniff, Don't Browser Sniff</h2>

0 comments on commit f29a882

Please sign in to comment.