load unordered columns

Luiz-N · Jul 14, 2013 · 40dd3e0 · 40dd3e0
1 parent c8669cf
commit 40dd3e0
Show file tree

Hide file tree

Showing 5 changed files with 226 additions and 98 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -1,18 +1,11 @@
-var scripts = ['js/jquery.animate-enhanced.min.js', 'jquery.easing.min.js', 'js/**/*.js', '!js/scripts.js'];
+var scripts = ['js/mustache.js', 'js/templates.js', 'js/**/*.js', '!js/scripts.js'];
 
 module.exports = function (grunt) {
 
   // Project configuration.
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
 
-    jshint: {
-      options: {
-        force: true
-      },
-      all: scripts + ['!js/jquery-1.9.1.js', '!js/jquery.animate-enhanced.min.js', '!jquery.easing.min.js']
-    },
-
     concat: {
       dist: {
         src: scripts,
@@ -30,7 +23,6 @@ module.exports = function (grunt) {
 
     compass: {
       options: {
-        require: 'susy',
         sassDir: 'sass',
         cssDir: 'css'
       },
@@ -57,35 +49,34 @@ module.exports = function (grunt) {
       },
       scripts: {
         files: scripts,
-        tasks: ['jshint', 'concat']
+        tasks: ['concat']
       },
       styles: {
         files: ['sass/**/*.{sass,scss}'],
         tasks: ['compass:dev']
       }
     },
 
-    exec: {
-      serverup: {
-        command: '/Applications/MAMP/bin/start.sh'
-      },
-      serverdown: {
-        command: '/Applications/MAMP/bin/stop.sh'
+connect: {
+      server: {
+        options: {
+          port: 8888,
+          hostname: '*'
+        }
       }
     }
   });
 
-  grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-compass');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-smushit');
-  grunt.loadNpmTasks('grunt-exec');
+  grunt.loadNpmTasks('grunt-contrib-connect');
 
   // Development task checks and concatenates JS, compiles SASS preserving comments and nesting, runs dev server, and starts watch
-  grunt.registerTask('default', ['jshint', 'concat', 'compass:dev', 'exec:serverup', 'watch', 'exec:serverdown']);
+  grunt.registerTask('default', ['concat', 'compass:dev', 'connect:server', 'watch']);
   // Build task builds minified versions of static files
-  grunt.registerTask('build', ['jshint', 'compass:production', 'concat', 'uglify', 'smushit']);
+  grunt.registerTask('build', ['compass:production', 'concat', 'uglify', 'smushit']);
 
 };
diff --git a/css/style.css b/css/style.css
@@ -1,44 +1,124 @@
+/* line 15, ../sass/_reset.scss */
+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 */
+/* line 25, ../sass/_reset.scss */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+/* line 28, ../sass/_reset.scss */
 body {
-	background-color: rgb(206,227,248);
+  line-height: 1;
 }
 
-#column {
-	width: 320px;
-	list-style-type: none;
-	/*display: inline-block;*/
-	float: left;
-	/*background-color: black;*/
-	/*height: 500px;*/
+/* line 31, ../sass/_reset.scss */
+ol, ul {
+  list-style: none;
+}
 
+/* line 34, ../sass/_reset.scss */
+blockquote, q {
+  quotes: none;
 }
 
-#column h1 {
-	font-size: 1.5em;
-	padding: 0 10px;
+/* line 38, ../sass/_reset.scss */
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+/* line 42, ../sass/_reset.scss */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
 
+/* line 6, ../sass/style.sass */
+.cf:before, .cf:after {
+  content: " ";
+  display: table;
+}
 
+/* line 10, ../sass/style.sass */
+.cf:after {
+  clear: both;
 }
 
+/* line 14, ../sass/style.sass */
+body {
+  background-color: #cee3f8;
+  text-align: center;
+}
+
+/* line 18, ../sass/style.sass */
+#wrapper {
+  display: inline-block;
+}
+
+/* line 21, ../sass/style.sass */
+#column {
+  bottom: 1386px;
+  width: 320px;
+  list-style-type: none;
+  margin: 10px;
+  float: left;
+  /*background-color: black; */
+  /*height: 500px; */
+}
+
+/* line 31, ../sass/style.sass */
+#column h1 {
+  font-size: 1.5em;
+  padding: 0 10px;
+  text-align: center;
+}
+
+/* line 36, ../sass/style.sass */
 .article {
-	background-color: rgb(255,255,255);
-	width: 100%;
-	min-height: 300px;
-	margin: 10px 0;
-	color: #666;
+  background-color: white;
+  width: 100%;
+  min-height: 300px;
+  margin: 20px 0;
+  color: #666666;
 }
 
+/* line 43, ../sass/style.sass */
 .article img {
-	width: 100%;
-	/*max-height: 200px;*/
+  width: 100%;
+  /*max-height: 200px; */
 }
 
+/* line 47, ../sass/style.sass */
 .imageBox {
-	border-radius: 5px;
-	padding: 10px;
-	border: 2px 0 outset;
+  border-radius: 5px;
+  padding: 10px;
+  border: 2px 0 outset;
 }
 
+/* line 52, ../sass/style.sass */
 .comment {
-	margin: 0;
-	padding: 0 10px;
-}
+  margin: 0;
+  padding: 0 10px;
+}
diff --git a/index.html b/index.html
@@ -14,35 +14,47 @@
         <![endif]-->
 <link href="css/style.css" rel="stylesheet" type="text/css">
     </head>
-    <body id = 'body'>
-<ul id ='column'>
-	<li class = 'article'>
-
-		<h1>You could live a hundred years and never see what I stumbled on this morning. This very humble and pleasant woman was mowing her lawn with fucking scissors!!? She told me she didn't like lawn mowers.</h1>
-
-		<div class = "imageBox">
-		<img src="http://i.imgur.com/zz1W89k.jpg">
-		</div>
-
-		<aside class = "comment">
-			<p>The article doesn't mention why they were doing it. Anyone have a better source?
-			</p>
-			<span>SpareTimeMusings</span>
-		</aside>
-
-	</li>
-
-
-
-</ul>
+<body class = "cf" id = 'body'>
+	<div id = "wrapper" class = "cf">
+		<!-- <ul id ='column'>
+			<li class = 'article'>
+
+				<h1>You could live a hundred years and never see what I stumbled on this morning. This very humble and pleasant woman was mowing her lawn with fucking scissors!!? She told me she didn't like lawn mowers.</h1>
+
+				<div class = "imageBox">
+				<img src="http://i.imgur.com/zz1W89k.jpg">
+				</div>
+
+				<aside class = "comment">
+					<h3></h3>
+					<p>The article doesn't mention why they were doing it. Anyone have a better source?
+					</p>
+					<span>SpareTimeMusings</span>
+				</aside>
+				
+			</li>
+			<li class = 'article'>
+
+				<h1>You could live a hundred years and never see what I stumbled on this morning. This very humble and pleasant woman was mowing her lawn with fucking scissors!!? She told me she didn't like lawn mowers.</h1>
+
+				<div class = "imageBox">
+				<img src="http://i.imgur.com/zz1W89k.jpg">
+				</div>
+
+				<aside class = "comment">
+					<h3></h3>
+					<p>The article doesn't mention why they were doing it. Anyone have a better source?
+					</p>
+					<span>SpareTimeMusings</span>
+				</aside>
+				
+			</li>
+		</ul> -->
+
+</div>
 
 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
-<script src="js/mustache.js"></script>
-<script src="js/templates.js"></script>
-
-<script src="js/js.js"></script>
-
-
+<script src="js/scripts.js"></script>
 
 
     </body>