add readme and explanation

pbojinov · Oct 29, 2014 · f6598c1 · f6598c1
1 parent d868e4f
commit f6598c1
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,23 @@
+# Tappifications
+
+> Because we need another jquery notification library...
+
+Used to promote content on the top of the site.
+
+## Look and Feel
+
+Currently three flavors are available
+
+### info
+
+![info](media/info.jpg)
+
+### warning
+
+![warning](media/warning.jpg)
+
+### danger
+
+![danger](media/danger.jpg)
+
+
diff --git a/media/danger.jpg b/media/danger.jpg
diff --git a/media/info.jpg b/media/info.jpg
diff --git a/media/warning.jpg b/media/warning.jpg
diff --git a/src/css/tappifications.css b/src/css/tappifications.css
@@ -1,6 +1,18 @@
 .tappification {
   background: #ffffff;
 }
+.tappification .container {
+  max-width: 933px;
+  margin-left: auto;
+  margin-right: auto;
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+}
+.tappification button {
+  background: none;
+  border: none;
+  outline: none;
+}
 .tappification-info {
   background-color: #167afb;
   color: #ffffff;

diff --git a/src/index.html b/src/index.html
@@ -3,7 +3,12 @@
 
 <head>
     <title>tappification examples</title>
+
+    <!-- external dependencies -->
     <link rel="stylesheet" type="text/css" href="bower_components/normalize.css/normalize.css">
+    <link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.css">
+
+    <!-- app styles -->
     <link rel="stylesheet" type="text/css" href="css/tappifications.css">
 </head>
 
@@ -14,7 +19,6 @@
             <button type="button" class="close" data-dismiss="alert">
                 <span aria-hidden="true"><i class="fa fa-times-circle-o"></i>
                 </span>
-                <span class="sr-only">Close</span>
             </button>
             <p>Your Membership is going to expire in 5 days!</p>
             <p>

diff --git a/src/less/_variables.less b/src/less/_variables.less
@@ -17,4 +17,7 @@
 @tappification-text-dark: black;
 
 // Typography
-@basefont: 'Open Sans', helvetica, arial, tahoma;
+@basefont: 'Open Sans', helvetica, arial, tahoma;
+
+// container sizing
+@tappification-max-width: 933px;
diff --git a/src/less/tappifications.less b/src/less/tappifications.less
@@ -3,6 +3,21 @@
 // Tappifications
 .tappification {
 	background: @tappification-default;
+
+	.container {
+		max-width: @tappification-max-width;
+		margin-left: auto;
+		margin-right: auto;
+		border-left: 1px solid black;
+		border-right: 1px solid black;
+	}
+
+	// override default button styles
+	button {
+		background: none;
+		border: none;
+		outline: none;
+	}
 }
 
 // Different flavors