add lists, remove some resets

aaroniker · May 10, 2016 · 6075d8f · 6075d8f
1 parent e9dbd1d
commit 6075d8f
Show file tree

Hide file tree

Showing 5 changed files with 162 additions and 11 deletions.
diff --git a/demo/demo.css b/demo/demo.css
@@ -41,6 +41,7 @@
 
 #icons {
 	overflow: hidden;
+	padding: 0;
 }
 
 #icons li {

diff --git a/demo/index.html b/demo/index.html
@@ -7,7 +7,7 @@
 
 	<title>Framy CSS Demo</title>
 
-	<link rel="stylesheet" href="../css/framy.css">
+	<link rel="stylesheet" href="../dist/css/framy.css">
 	<link rel="stylesheet" href="demo.css">
 
 </head>
@@ -891,6 +891,63 @@ <h6>h6 Heading</h6>
 
         <hr class="lg">
 
+    	<h2>Lists</h2>
+
+        <h3>Unordered</h3>
+
+        <ul>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Consectetur adipiscing elit</li> 
+            <li>Integer molestie lorem at massa</li>
+            <li>Facilisis in pretium nisl aliquet</li>
+            <li>
+            	Nulla volutpat aliquam velit
+                <ul>
+                    <li>Phasellus iaculis neque</li>
+                    <li>Purus sodales ultricies</li>
+                    <li>Vestibulum laoreet porttitor sem</li>
+                    <li>Ac tristique libero volutpat at</li>
+                </ul>
+            </li>
+            <li>Faucibus porta lacus fringilla vel</li>
+            <li>Aenean sit amet erat nunc</li>
+            <li>Eget porttitor lorem</li>
+        </ul>
+
+        <h3>Ordered</h3>
+
+        <ol>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Consectetur adipiscing elit</li> 
+            <li>Integer molestie lorem at massa</li>
+            <li>Facilisis in pretium nisl aliquet</li>
+            <li>Faucibus porta lacus fringilla vel</li>
+            <li>Aenean sit amet erat nunc</li>
+            <li>Eget porttitor lorem</li>
+        </ol>
+
+        <h3>Unstyled</h3>
+
+        <ul class="unstyled">
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Consectetur adipiscing elit</li> 
+            <li>Integer molestie lorem at massa</li>
+            <li>Facilisis in pretium nisl aliquet</li>
+            <li>Faucibus porta lacus fringilla vel</li>
+            <li>Aenean sit amet erat nunc</li>
+            <li>Eget porttitor lorem</li>
+        </ul>
+
+        <h3>Inline</h3>
+
+        <ul class="inline">
+            <li>Lorem ipsum</li>
+            <li>Consectetur adipiscingit</li> 
+            <li>Integer molesti</li>
+        </ul>
+
+        <hr class="lg">
+
     	<h2>Grid</h2>
 
 		<div class="columns">

diff --git a/dist/css/framy.css b/dist/css/framy.css
@@ -2235,9 +2235,6 @@
 	content: "\f30c";
 }
 * {
-	margin: 0;
-	padding: 0;
-	border: 0;
 	-webkit-font-smoothing: antialiased;
 	-ms-box-sizing: border-box;
 	-moz-box-sizing: border-box;
@@ -2246,26 +2243,39 @@
 }
 article,
 aside,
+details,
+figcaption,
 figure,
 footer,
 header,
+main,
+menu,
 nav,
 section,
-details,
 summary {
 	display: block;
 }
+audio,
+canvas,
+progress,
+video {
+	display: inline-block;
+}
 object,
 embed,
 iframe {
 	max-width: 100%;
 }
+progress {
+	vertical-align: baseline;
+}
 html,
 body {
 	height: 100%;
 }
-li {
-	list-style: none;
+a:active,
+a:hover {
+	outline: 0;
 }
 blockquote,
 blockquote:before,
@@ -2296,6 +2306,13 @@ td {
 	vertical-align: top;
 }
 input,
+button,
+optgroup,
+select,
+textarea {
+	margin: 0;
+}
+input,
 select {
 	vertical-align: middle;
 }
@@ -2338,11 +2355,16 @@ img {
 a img {
 	border: none;
 }
+html {
+	-ms-text-size-adjust: 100%;
+	-webkit-text-size-adjust: 100%;
+}
 body {
+	margin: 0;
 	font-family: "Roboto", Arial;
 	font-size: 14px;
 	line-height: 1.428571429;
-	color: #858891;
+	color: #757880;
 }
 a {
 	color: #5bb8fd;
@@ -2355,6 +2377,7 @@ a:focus {
 }
 input,
 button,
+optgroup,
 select,
 textarea {
 	font-family: inherit;
@@ -2371,6 +2394,38 @@ hr.lg {
 	margin-top: 40px;
 	margin-bottom: 40px;
 }
+ul,
+ol {
+	margin-top: 0;
+	margin-bottom: 10px;
+}
+ul ul,
+ul ol,
+ol ul,
+ol ol {
+	margin-bottom: 0;
+}
+ul.unstyled,
+ol.unstyled {
+	padding-left: 0;
+	list-style: none;
+}
+ul.inline,
+ol.inline {
+	padding-left: 0;
+	list-style: none;
+	margin-left: -5px;
+}
+ul.inline > li,
+ol.inline > li {
+	display: inline-block;
+	padding-left: 5px;
+	padding-right: 5px;
+}
+nav ul {
+	padding-left: 0;
+	list-style: none;
+}
 .icon {
 	display: inline-block;
 	font-family: "Ionicons";
@@ -3156,7 +3211,7 @@ button.error:hover {
 .button.border,
 button.border {
 	background: #fff;
-	color: #858891;
+	color: #757880;
 }
 .button.border:before,
 button.border:before {
@@ -3179,5 +3234,5 @@ button.border:active,
 button.border:focus,
 button.border:hover {
 	background: #f2f2f2;
-	color: #858891;
+	color: #757880;
 }
diff --git a/dist/css/framy.min.css b/dist/css/framy.min.css
diff --git a/less/base.less b/less/base.less
@@ -1,4 +1,10 @@
+html {
+	-ms-text-size-adjust: 100%;
+	-webkit-text-size-adjust: 100%;
+}
+
 body {
+	margin: 0;
 	font-family: @font-family;
 	font-size: @font-size;
 	line-height: @line-height;
@@ -17,6 +23,7 @@ a {
 
 input,
 button,
+optgroup,
 select,
 textarea {
 	font-family: inherit;
@@ -35,6 +42,37 @@ hr {
 	border-top: 1px solid @border;
 }
 
+ul,
+ol {
+	ul,
+	ol {
+		margin-bottom: 0;
+	}
+	&.unstyled {
+		padding-left: 0;
+		list-style: none;
+	}
+	&.inline {
+		& > li {
+			display: inline-block;
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+		padding-left: 0;
+		list-style: none;
+		margin-left: -5px;
+	}
+	margin-top: 0;
+	margin-bottom: (@line-height-computed / 2);
+}
+
+nav {
+	ul {
+		padding-left: 0;
+		list-style: none;
+	}
+}
+
 .icon {
 	display: inline-block;
 	font-family: @ionicons-font-family;