Skip to content
This repository
Browse code

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

  • Loading branch information...
commit 97a0466632df3b34f1e61289f06878f6354c6428 1 parent a4dd583
TJ Holowaychuk authored February 04, 2012
2  Readme.md
Source Rendered
... ...
@@ -1,7 +1,7 @@
1 1
 
2 2
  ![UIKit JavaScript component framework](http://f.cl.ly/items/2j0m3D1l1T041S1k463L/Grab.png)
3 3
 
4  
-  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).
  4
+  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).
5 5
 
6 6
 ## Components
7 7
 
39  build/ui.css
@@ -5,9 +5,6 @@
5 5
   max-width: 600px;
6 6
   min-width: 250px;
7 7
   border: 1px solid #eee;
8  
-  border-bottom-color: #cacaca;
9  
-  -webkit-border-radius: 3px;
10  
-  -webkit-box-shadow: 0 1px 4px 0 #ddd;
11 8
   background: white;
12 9
   z-index: 1000;
13 10
 }
@@ -28,36 +25,6 @@
28 25
   font-size: .9em;
29 26
 }
30 27
 
31  
-#dialog .actions button {
32  
-  padding: 5px;
33  
-  background: transparent;
34  
-  border: none;
35  
-  outline: none;
36  
-  cursor: pointer;
37  
-}
38  
-
39  
-#dialog .actions button:hover {
40  
-  text-decoration: underline;
41  
-}
42  
-
43  
-#dialog .actions button.main {
44  
-  padding: 5px 15px;
45  
-  background: -webkit-linear-gradient(top, #fff 20%, #eee);
46  
-  border: 1px solid #eee;
47  
-  border-bottom-color: #cacaca;
48  
-  -webkit-border-radius: 3px;
49  
-  outline: none;
50  
-}
51  
-
52  
-#dialog .actions button.main:hover {
53  
-  text-decoration: none;
54  
-  background: -webkit-linear-gradient(top, #fff 50%, #eee);
55  
-}
56  
-
57  
-#dialog .actions button.main:active {
58  
-  background: -webkit-linear-gradient(bottom, #fff 20%, #eee);
59  
-}
60  
-
61 28
 #dialog.modal {
62 29
   -webkit-box-shadow: 0 1px 8px 0 black;
63 30
 }
@@ -159,9 +126,6 @@
159 126
   max-width: 600px;
160 127
   min-width: 250px;
161 128
   border: 1px solid #eee;
162  
-  border-bottom-color: #cacaca;
163  
-  -webkit-border-radius: 3px;
164  
-  -webkit-box-shadow: 0 1px 4px 0 #ddd;
165 129
   background: white;
166 130
   z-index: 100;
167 131
 }
@@ -255,10 +219,7 @@
255 219
   margin: 0;
256 220
   padding: 0;
257 221
   background: white;
258  
-  -webkit-border-radius: 5px;
259  
-  font-size: 12px;
260 222
   border: 1px solid rgba(0,0,0,0.2);
261  
-  -webkit-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1), 0 2px 6px 0 rgba(0,0,0,0.2);
262 223
 }
263 224
 
264 225
 #context-menu li {
2  build/ui.js
@@ -644,7 +644,7 @@ ColorPicker.prototype.spectrumEvents = function(){
644 644
     , down;
645 645
 
646 646
   function update(e) {
647  
-    var color = self.hueAt(e.offsetY);
  647
+    var color = self.hueAt(e.offsetY - 4);
648 648
     self.hue(color.toString());
649 649
     self.emit('change', color);
650 650
     self._huePos = e.offsetY;
2  docs/index.html
@@ -216,7 +216,7 @@
216 216
         <span>Modern UI components for the modern web</span>
217 217
       </div>
218 218
 
219  
-      <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>
  219
+      <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>
220 220
 
221 221
       <section>
222 222
         <h2 id="dialog-section"><a href="#">Dialog</a></h2>
46  docs/style.css
@@ -24,12 +24,58 @@ body {
24 24
 #card .wrapper .front {
25 25
   line-height: 150px;
26 26
 }
  27
+#dialog {
  28
+  border-bottom-color: #cacaca;
  29
+  border-radius: 3px;
  30
+  box-shadow: 0 1px 4px 0 #ddd;
  31
+}
27 32
 #dialog .card p {
28 33
   text-align: center;
29 34
   line-height: 100px;
30 35
   font-weight: bold;
31 36
   font-size: 22px;
32 37
 }
  38
+#dialog .actions button {
  39
+  padding: 5px;
  40
+  background: transparent;
  41
+  border: none;
  42
+  outline: none;
  43
+  cursor: pointer;
  44
+}
  45
+#dialog .actions button:hover {
  46
+  text-decoration: underline;
  47
+}
  48
+#dialog .actions button.main {
  49
+  padding: 5px 15px;
  50
+  background: -webkit-linear-gradient(top, #fff 20%, #eee);
  51
+  border: 1px solid #eee;
  52
+  border-bottom-color: #cacaca;
  53
+  border-radius: 3px;
  54
+  outline: none;
  55
+}
  56
+#dialog .actions button.main:hover {
  57
+  text-decoration: none;
  58
+  background: -webkit-linear-gradient(top, #fff 50%, #eee);
  59
+}
  60
+#dialog .actions button.main:active {
  61
+  background: -webkit-linear-gradient(bottom, #fff 20%, #eee);
  62
+}
  63
+#context-menu {
  64
+  font-size: 12px;
  65
+  -webkit-border-radius: 5px;
  66
+  -webkit-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1), 0 2px 6px 0 rgba(0,0,0,0.2);
  67
+}
  68
+#context-menu li:first-child a {
  69
+  -webkit-border-radius: 5px 5px 0 0;
  70
+}
  71
+#context-menu li:last-child a {
  72
+  -webkit-border-radius: 0 0 5px 5px;
  73
+}
  74
+.notification {
  75
+  border-bottom-color: #cacaca;
  76
+  -webkit-border-radius: 3px;
  77
+  -webkit-box-shadow: 0 1px 4px 0 #ddd;
  78
+}
33 79
 #wrapper > section {
34 80
   margin: 30px 0;
35 81
   width: 350px;
3  lib/components/context-menu/context-menu.css
@@ -7,10 +7,7 @@
7 7
   margin: 0;
8 8
   padding: 0;
9 9
   background: white;
10  
-  border-radius: 5px;
11  
-  font-size: 12px;
12 10
   border: 1px solid rgba(0,0,0,0.2);
13  
-  box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1), 0 2px 6px 0 rgba(0,0,0,0.2);
14 11
 }
15 12
 
16 13
 #context-menu li {
33  lib/components/dialog/dialog.css
@@ -5,9 +5,6 @@
5 5
   max-width: 600px;
6 6
   min-width: 250px;
7 7
   border: 1px solid #eee;
8  
-  border-bottom-color: #cacaca;
9  
-  border-radius: 3px;
10  
-  box-shadow: 0 1px 4px 0 #ddd;
11 8
   background: white;
12 9
   z-index: 1000;
13 10
 }
@@ -28,36 +25,6 @@
28 25
   font-size: .9em;
29 26
 }
30 27
 
31  
-#dialog .actions button {
32  
-  padding: 5px;
33  
-  background: transparent;
34  
-  border: none;
35  
-  outline: none;
36  
-  cursor: pointer;
37  
-}
38  
-
39  
-#dialog .actions button:hover {
40  
-  text-decoration: underline;
41  
-}
42  
-
43  
-#dialog .actions button.main {
44  
-  padding: 5px 15px;
45  
-  background: linear-gradient(top, #fff 20%, #eee);
46  
-  border: 1px solid #eee;
47  
-  border-bottom-color: #cacaca;
48  
-  border-radius: 3px;
49  
-  outline: none;
50  
-}
51  
-
52  
-#dialog .actions button.main:hover {
53  
-  text-decoration: none;
54  
-  background: linear-gradient(top, #fff 50%, #eee);
55  
-}
56  
-
57  
-#dialog .actions button.main:active {
58  
-  background: linear-gradient(bottom, #fff 20%, #eee);
59  
-}
60  
-
61 28
 #dialog.modal {
62 29
   box-shadow: 0 1px 8px 0 black;
63 30
 }
3  lib/components/notification/notification.css
@@ -15,9 +15,6 @@
15 15
   max-width: 600px;
16 16
   min-width: 250px;
17 17
   border: 1px solid #eee;
18  
-  border-bottom-color: #cacaca;
19  
-  border-radius: 3px;
20  
-  box-shadow: 0 1px 4px 0 #ddd;
21 18
   background: white;
22 19
   z-index: 100;
23 20
 }

0 notes on commit 97a0466

Please sign in to comment.
Something went wrong with that request. Please try again.