Permalink
Browse files

Changed: moved non-structural styling to docs/style.css. Closes #23

  • Loading branch information...
1 parent a4dd583 commit 97a0466632df3b34f1e61289f06878f6354c6428 @tj tj committed Feb 4, 2012
View
2 Readme.md
@@ -1,7 +1,7 @@
![UIKit JavaScript component framework](http://f.cl.ly/items/2j0m3D1l1T041S1k463L/Grab.png)
- UIKit is a small (4kb minified / gzipped) collection of flexible, cohesive, decoupled components for the modern web. With an emphasis on (mostly) structure-only styling making it simple to apply application specific styling. UIKit is _not_ a replacement for larger UI frameworks, nor is it a CSS framework such as Bootstrap. UIKit is still a work in progress, check the [Issues](https://github.com/visionmedia/uikit/issues).
+ UIKit is a small (4kb minified / gzipped) collection of flexible, cohesive, decoupled components for the modern web. With an emphasis on structure-only styling making it simple to apply application specific styling. UIKit is _not_ a replacement for larger UI frameworks, nor is it a CSS framework such as Bootstrap. UIKit is still a work in progress, check the [Issues](https://github.com/visionmedia/uikit/issues).
## Components
View
39 build/ui.css
@@ -5,9 +5,6 @@
max-width: 600px;
min-width: 250px;
border: 1px solid #eee;
- border-bottom-color: #cacaca;
- -webkit-border-radius: 3px;
- -webkit-box-shadow: 0 1px 4px 0 #ddd;
background: white;
z-index: 1000;
}
@@ -28,36 +25,6 @@
font-size: .9em;
}
-#dialog .actions button {
- padding: 5px;
- background: transparent;
- border: none;
- outline: none;
- cursor: pointer;
-}
-
-#dialog .actions button:hover {
- text-decoration: underline;
-}
-
-#dialog .actions button.main {
- padding: 5px 15px;
- background: -webkit-linear-gradient(top, #fff 20%, #eee);
- border: 1px solid #eee;
- border-bottom-color: #cacaca;
- -webkit-border-radius: 3px;
- outline: none;
-}
-
-#dialog .actions button.main:hover {
- text-decoration: none;
- background: -webkit-linear-gradient(top, #fff 50%, #eee);
-}
-
-#dialog .actions button.main:active {
- background: -webkit-linear-gradient(bottom, #fff 20%, #eee);
-}
-
#dialog.modal {
-webkit-box-shadow: 0 1px 8px 0 black;
}
@@ -159,9 +126,6 @@
max-width: 600px;
min-width: 250px;
border: 1px solid #eee;
- border-bottom-color: #cacaca;
- -webkit-border-radius: 3px;
- -webkit-box-shadow: 0 1px 4px 0 #ddd;
background: white;
z-index: 100;
}
@@ -255,10 +219,7 @@
margin: 0;
padding: 0;
background: white;
- -webkit-border-radius: 5px;
- font-size: 12px;
border: 1px solid rgba(0,0,0,0.2);
- -webkit-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1), 0 2px 6px 0 rgba(0,0,0,0.2);
}
#context-menu li {
View
2 build/ui.js
@@ -644,7 +644,7 @@ ColorPicker.prototype.spectrumEvents = function(){
, down;
function update(e) {
- var color = self.hueAt(e.offsetY);
+ var color = self.hueAt(e.offsetY - 4);
self.hue(color.toString());
self.emit('change', color);
self._huePos = e.offsetY;
View
2 docs/index.html
@@ -216,7 +216,7 @@
<span>Modern UI components for the modern web</span>
</div>
- <p>UIKit is a small collection of flexible, decoupled components for the modern web. With an emphasis on structure-only styling making it it simple to apply application specific styling.</p>
+ <p>UIKit is a small collection of flexible, decoupled jQuery JavaScript components for the modern web. With an emphasis on structure-only styling making it it simple to apply application specific styling.</p>
<section>
<h2 id="dialog-section"><a href="#">Dialog</a></h2>
View
46 docs/style.css
@@ -24,12 +24,58 @@ body {
#card .wrapper .front {
line-height: 150px;
}
+#dialog {
+ border-bottom-color: #cacaca;
+ border-radius: 3px;
+ box-shadow: 0 1px 4px 0 #ddd;
+}
#dialog .card p {
text-align: center;
line-height: 100px;
font-weight: bold;
font-size: 22px;
}
+#dialog .actions button {
+ padding: 5px;
+ background: transparent;
+ border: none;
+ outline: none;
+ cursor: pointer;
+}
+#dialog .actions button:hover {
+ text-decoration: underline;
+}
+#dialog .actions button.main {
+ padding: 5px 15px;
+ background: -webkit-linear-gradient(top, #fff 20%, #eee);
+ border: 1px solid #eee;
+ border-bottom-color: #cacaca;
+ border-radius: 3px;
+ outline: none;
+}
+#dialog .actions button.main:hover {
+ text-decoration: none;
+ background: -webkit-linear-gradient(top, #fff 50%, #eee);
+}
+#dialog .actions button.main:active {
+ background: -webkit-linear-gradient(bottom, #fff 20%, #eee);
+}
+#context-menu {
+ font-size: 12px;
+ -webkit-border-radius: 5px;
+ -webkit-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1), 0 2px 6px 0 rgba(0,0,0,0.2);
+}
+#context-menu li:first-child a {
+ -webkit-border-radius: 5px 5px 0 0;
+}
+#context-menu li:last-child a {
+ -webkit-border-radius: 0 0 5px 5px;
+}
+.notification {
+ border-bottom-color: #cacaca;
+ -webkit-border-radius: 3px;
+ -webkit-box-shadow: 0 1px 4px 0 #ddd;
+}
#wrapper > section {
margin: 30px 0;
width: 350px;
View
3 lib/components/context-menu/context-menu.css
@@ -7,10 +7,7 @@
margin: 0;
padding: 0;
background: white;
- border-radius: 5px;
- font-size: 12px;
border: 1px solid rgba(0,0,0,0.2);
- box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1), 0 2px 6px 0 rgba(0,0,0,0.2);
}
#context-menu li {
View
33 lib/components/dialog/dialog.css
@@ -5,9 +5,6 @@
max-width: 600px;
min-width: 250px;
border: 1px solid #eee;
- border-bottom-color: #cacaca;
- border-radius: 3px;
- box-shadow: 0 1px 4px 0 #ddd;
background: white;
z-index: 1000;
}
@@ -28,36 +25,6 @@
font-size: .9em;
}
-#dialog .actions button {
- padding: 5px;
- background: transparent;
- border: none;
- outline: none;
- cursor: pointer;
-}
-
-#dialog .actions button:hover {
- text-decoration: underline;
-}
-
-#dialog .actions button.main {
- padding: 5px 15px;
- background: linear-gradient(top, #fff 20%, #eee);
- border: 1px solid #eee;
- border-bottom-color: #cacaca;
- border-radius: 3px;
- outline: none;
-}
-
-#dialog .actions button.main:hover {
- text-decoration: none;
- background: linear-gradient(top, #fff 50%, #eee);
-}
-
-#dialog .actions button.main:active {
- background: linear-gradient(bottom, #fff 20%, #eee);
-}
-
#dialog.modal {
box-shadow: 0 1px 8px 0 black;
}
View
3 lib/components/notification/notification.css
@@ -15,9 +15,6 @@
max-width: 600px;
min-width: 250px;
border: 1px solid #eee;
- border-bottom-color: #cacaca;
- border-radius: 3px;
- box-shadow: 0 1px 4px 0 #ddd;
background: white;
z-index: 100;
}

0 comments on commit 97a0466

Please sign in to comment.