Fixing hr bottom margin by setting to 17px

joshuaclayton · Apr 3, 2011 · 9d29d1e · 9d29d1e
1 parent 5d113e9
commit 9d29d1e
Show file tree

Hide file tree

Showing 7 changed files with 493 additions and 3 deletions.
diff --git a/blueprint/screen.css b/blueprint/screen.css
@@ -258,7 +258,7 @@ input.span-24, textarea.span-24 {width:938px;}
 div.prepend-top, .prepend-top {margin-top:1.5em;}
 div.append-bottom, .append-bottom {margin-bottom:1.5em;}
 .box {padding:1.5em;margin-bottom:1.5em;background:#e5eCf9;}
-hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:0 0 1.45em;border:none;}
+hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:0 0 17px;border:none;}
 hr.space {background:#fff;color:#fff;visibility:hidden;}
 .clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
 .clearfix, .container {display:block;}

diff --git a/blueprint/src/grid.css b/blueprint/src/grid.css
@@ -249,7 +249,7 @@ hr {
   float: none;
   width: 100%;
   height: 1px;
-  margin: 0 0 1.45em;
+  margin: 0 0 17px;
   border: none;
 }
 

diff --git a/debug.zip b/debug.zip
diff --git a/debug/README.textile b/debug/README.textile
@@ -0,0 +1,61 @@
+h2. Debugger
+
+version: _v0.1.3_ ^(beta)^ 
+
+* Gives you a safe rapid prototyping environment  
+* Helps you avoid misuse of Blueprint classes 
+
+Guaranteed to work in the following browsers... 
+* Firefox 1.0+
+* Opera 7.0+
+* Konquerer 3.4+
+* Safari 1.2+
+...and won't work in IE due to missing support for +outline+
+
+
+----------------------------------------------------------------
+h3. Credits
+
+_author:_ Created by Franz Josef Kaiser "say hello code!":http://say-hello-code.com
+
+
+----------------------------------------------------------------
+h3. Usage
+
+* Make a copy of debug.html and give it a unique name for your test (for example, debug-test1.html)
+* Adjust the <head> of this debug environment page to your needs:
+* Uncomment the plugins you want to use in your page.
+** _optional_ only needed for the mailing list: describe your goals, trials & errors in the head container.
+* Add your basic html structure (div, h1-h6, p, span, a).
+* Add some "lorem ipsum" dummy text and sample IMGs to your html (search for lorem ipsum, there are lots of resources). 
+* Add your Blueprint classes to the structure.
+* Uncomment the css/html debugger stylesheet in the head.
+* Open the sample in your browser.
+** _optional_ if you see elements outlined, you've forgotten declarations or added bad classes. In this case take a look at the head of the debugger plugin to check color codes & find out what exactly went wrong (it's easy).
+* Basic structure: _*done*_
+* Now you can add your own styles in a separate stylesheet to the <head> section and develop further. 
+
+
+----------------------------------------------------------------
+h4. Changelog
+
+_v0.1 (alpha)_ 
+* first version
+** a basic html page structure
+** debugger offers outlining of classical misstakes
+
+_v0.1 (beta)_
+* debugger now offers help for missing declarations
+** dev page reworked to split between description & content
+
+_v01.1 (beta)_
+* bugfix: colborder & border were missing dot in front of class
+
+_v01.2 (beta)_
+* switched to textile mark-up file for readme to inherit bp core
+
+_v01.2.1 (beta)_
+* tried to fix textile mark-up for readme
+
+_v01.3 (beta)_
+* switched pathes for all style-links in the head of blueprint.html to work out of the box from the debug plugin directory.
diff --git a/debug/debug.css b/debug/debug.css
diff --git a/debug/debug.html b/debug/debug.html
@@ -0,0 +1,122 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
+	<title>Insert title here</title>
+
+	<meta name="author" content="Franz Josef Kaiser - http://say-hello-code.com" />
+	<meta name="license" content="Inherited from the Blueprint CSS framework (Modified MIT)" />
+	<meta name="version" content="0.1-beta" />
+
+	<!-- Compressed -->
+		<link rel="stylesheet" id="uncomp-core-screen" href="../blueprint/screen.css" type="text/css" media="screen" />
+		<link rel="stylesheet" id="uncomp-core-print" href="../blueprint/print.css" type="text/css" media="print" />
+		<!--[if lte IE 8]>
+			<link rel="stylesheet" id="uncomp-core-ie" href="../blueprint/ie.css" type="text/css" media="screen" />
+		<![endif]-->
+
+	<!-- Uncompressed
+		you can un-comment these separate stylesheets in place of the compressed ones, just make sure to 
+		comment-out the compressed ones 
+		<link rel="stylesheet" id="comp-src-reset" href="../blueprint/src/reset.css" type="text/css" media="screen" />
+		<link rel="stylesheet" id="comp-src-grid" href="../blueprint/src/grid.css" type="text/css" media="screen" />
+		<link rel="stylesheet" id="comp-src-forms" href="../blueprint/src/forms.css" type="text/css" media="screen" />
+		<link rel="stylesheet" id="comp-src-typo" href="../blueprint/src/typography.css" type="text/css" media="screen" />
+		<link rel="stylesheet" id="comp-src-print" href="../blueprint/src/print.css" type="text/css" media="print" />
+	-->
+
+	<!-- Plugins
+		these are core plugins included with the official Blueprint package 
+		<link rel="stylesheet" id="plugin-fancy-type" href="../blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen" />
+		<link rel="stylesheet" id="plugin-rtl" href="../blueprint/plugins/rtl/screen.css" type="text/css" media="screen" />
+		<link rel="stylesheet" id="plugin-buttons" href="../blueprint/plugins/buttons/screen.css" type="text/css" media="screen" />
+		<link rel="stylesheet" id="plugin-link-icons" href="../blueprint/plugins/link-icons/screen.css" type="text/css" media="screen" />
+	-->
+
+	<!-- Non-Core Plugins
+		activate only when downloaded from the following links
+		link: https://github.com/joshuaclayton/blueprint-css/wiki/Plugins
+		<link rel="stylesheet" id="nc-plugin-liquid" href="../blueprint/plugins/liquid/liquid.css" type="text/css" media="screen" />
+		<link rel="stylesheet" id="nc-plugin-tabs" href="../blueprint/plugins/tabs/screen.css" type="text/css" media="screen" />
+		<link rel="stylesheet" id="nc-plugin-silksprite" href="../blueprint/plugins/silksprite/sprite.css" type="text/css" media="screen" />
+	-->
+
+	<!-- 
+		___ ADD YOUR TEST HERE ___
+		link from here to your custom stylesheet
+		link: https://example.com/
+		<link rel="stylesheet" id="test-___" href="___.css" type="text/css" media="screen" />
+	-->
+
+	<!-- DEBUGGER
+		Added last to load with higher specifity
+		This stylesheet will highlight non-standard markup and unnecessary classes
+		<link rel="stylesheet" id="plugin-debugger" href="debug.css" type="text/css" media="screen" />
+	-->
+
+</head>
+
+<body>
+
+	<!-- #header -->
+	<div class="container">
+		<div id="title" class="span-24 append-bottom">
+			<h1 class="prepend-top">DEBUG ENVIRONMENT</h1>
+			<h2 class="alt">Use this page for developing or testing Blueprint &amp; posting problems on the Blueprint mailing list.</h2>
+		</div>
+
+		<!-- #add description here -->
+		<div id="description" class="span-24 append-bottom">
+			<hr />
+			<h3 class="alt">Testcase below: ___YOUR CASE___</h3>
+			<hr />
+			<div class="span-11 colborder">
+				<p>Enter the result you want to achieve here.</p>
+			</div>
+			<div class="span-12 last">
+				<p class="push-1">Enter your problem &amp; what you already tried here.</p>
+			</div>
+		</div>
+		<!-- /description -->
+	</div>
+	<!-- /header -->
+
+
+	<!-- #DEVELOPMENT -->
+	<div class="container showgrid">
+
+		<!-- START #testcase -->
+		<div id="testcase" class="span-24">
+			<p>
+				You should rename this file to a specific testcase, like debug-test1.html
+				<br />
+				You can then add your mark-up to this container.
+				<br />
+				Then post this testcase to 
+				<a href="http://github.com">Github Gist</a> or make a 
+				<a href="http://pastebin.com/">Pastebin</a> and share it on 
+				<a href="http://groups.google.com/group/blueprintcss">the list</a>.
+				<br />
+				Remember to change the doctype if you are not using HTML 4.01 Strict!
+			<p>
+		</div>
+		<!-- END #testcase -->
+
+	</div>
+	<!-- /DEVELOPMENT -->
+
+
+	<!-- #footer -->
+	<div id="footer" class="container prepend-top">
+		<hr />
+		<p class="alt right">
+			Brought to you by the Blueprint core team &copy; 2011.
+			<a href="https://gist.github.com/795687">(Download here)</a>
+		</p>
+	</div>
+	<!-- /footer -->
+
+</body>
+
+</html>
+<!-- That's all folks. Happy testing! -->
diff --git a/lib/blueprint/grid.css.erb b/lib/blueprint/grid.css.erb
@@ -115,7 +115,7 @@ hr {
   float: none;
   width: 100%;
   height: 1px;
-  margin: 0 0 1.45em;
+  margin: 0 0 17px;
   border: none;
 }