├── .gitignore ├── css ├── aqua.css ├── green.css ├── red.css ├── purple.css ├── tan_blue.css └── yuiapp.css ├── js └── yuiapp.js ├── README.mdown └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | *~ 2 | *.swp 3 | -------------------------------------------------------------------------------- /css/aqua.css: -------------------------------------------------------------------------------- 1 | /* This is the bare minimum needed to create your own theme. 2 | In this example, all we're doing is overriding the default 3 | color scheme with our own. In the real world, you'd probably 4 | want to do more complex operations. */ 5 | 6 | #hd { background-color:#187a7a; } 7 | .block .hd { background-color:#187a7a; color:#fff; border-bottom:10px solid #262626; } 8 | .block .bd h2 { color:#187a7a; } 9 | .block .bd h3 { color:#187a7a; } 10 | .spaces .hd { background-color:transparent; } 11 | .spaces .hd ul li { background-color:#187a7a; } 12 | a { color:#187a7a; } 13 | -------------------------------------------------------------------------------- /css/green.css: -------------------------------------------------------------------------------- 1 | /* This is the bare minimum needed to create your own theme. 2 | In this example, all we're doing is overriding the default 3 | color scheme with our own. In the real world, you'd probably 4 | want to do more complex operations. */ 5 | 6 | #hd { background-color:#187a32; } 7 | .block .hd { background-color:#187a32; color:#fff; border-bottom:10px solid #262626; } 8 | .block .bd h2 { color:#187a32; } 9 | .block .bd h3 { color:#187a32; } 10 | .spaces .hd { background-color:transparent; } 11 | .spaces .hd ul li { background-color:#187a32; } 12 | a { color:#187a32; } 13 | -------------------------------------------------------------------------------- /css/red.css: -------------------------------------------------------------------------------- 1 | /* This is the bare minimum needed to create your own theme. 2 | In this example, all we're doing is overriding the default 3 | color scheme with our own. In the real world, you'd probably 4 | want to do more complex operations. */ 5 | 6 | #hd { background-color:#7a1818; } 7 | .block .hd { background-color:#7a1818; color:#fff; border-bottom:10px solid #262626; } 8 | .block .bd h2 { color:#7a1818; } 9 | .block .bd h3 { color:#7a1818; } 10 | .spaces .hd { background-color:transparent; } 11 | .spaces .hd ul li { background-color:#7a1818; } 12 | a { color:#7a1818; } 13 | -------------------------------------------------------------------------------- /css/purple.css: -------------------------------------------------------------------------------- 1 | /* This is the bare minimum needed to create your own theme. 2 | In this example, all we're doing is overriding the default 3 | color scheme with our own. In the real world, you'd probably 4 | want to do more complex operations. */ 5 | 6 | #hd { background-color:#5D0265; } 7 | .block .hd { background-color:#5D0265; color:#fff; border-bottom:10px solid #262626; } 8 | .block .bd h2 { color:#5D0265; } 9 | .block .bd h3 { color:#5D0265; } 10 | .spaces .hd { background-color:transparent; } 11 | .spaces .hd ul li { background-color:#5D0265; } 12 | a { color:#5D0265; } 13 | .tabs .hd ul li a:hover { background-color:#8d0399; } -------------------------------------------------------------------------------- /js/yuiapp.js: -------------------------------------------------------------------------------- 1 | YUI().use('node', function(Y) { 2 | function init() { 3 | Y.all('#page-width-switcher a').on('click', function(e) { 4 | Y.all('#page-width-switcher a.highlight').removeClass('highlight'); 5 | e.target.addClass('highlight'); 6 | document.body.id = e.target.get('title'); 7 | e.halt(); 8 | }); 9 | 10 | Y.all('#page-layout-switcher a').on('click', function(e) { 11 | Y.all('#page-layout-switcher a.highlight').removeClass('highlight'); 12 | e.target.addClass('highlight'); 13 | doc = Y.get('body div:first'); 14 | doc.replaceClass(doc.get('className'), e.target.get('title')); 15 | e.halt(); 16 | }); 17 | 18 | Y.all('#page-color-switcher a').on('click', function(e) { 19 | Y.all('#page-color-switcher a.highlight').removeClass('highlight'); 20 | e.target.addClass('highlight'); 21 | Y.get('#theme').set('href', 'css/' + e.target.get('title') + '.css'); 22 | e.halt(); 23 | }); 24 | 25 | Y.all('#page-corner-switcher a').on('click', function(e) { 26 | Y.all('#page-corner-switcher a.highlight').removeClass('highlight'); 27 | e.target.addClass('highlight'); 28 | if(e.target.get('title') == 'on') 29 | Y.get('body').addClass('rounded'); 30 | else 31 | Y.get('body').removeClass('rounded'); 32 | e.halt(); 33 | }); 34 | } 35 | Y.on("domready", init); 36 | }); 37 | -------------------------------------------------------------------------------- /css/tan_blue.css: -------------------------------------------------------------------------------- 1 | /* This is the bare minimum needed to create your own theme. 2 | In this example, all we're doing is overriding the default 3 | color scheme with our own. In the real world, you'd probably 4 | want to do more complex operations. */ 5 | 6 | html, body { 7 | background-color:#EBE1D3; 8 | /*padding-top: .3em;*/ 9 | } 10 | h1, h2, h3 { 11 | color: #222; 12 | } 13 | a { 14 | color:#0854C7; 15 | text-decoration: none; 16 | } 17 | table thead { background-color:#685841;} 18 | 19 | #hd { 20 | background-color: #967E59; 21 | } 22 | #hd h1{ 23 | color: #fff; 24 | } 25 | #bd { 26 | background-color: #fff; 27 | color: #333; 28 | } 29 | 30 | #primary-navigation li.active a { background-color: #fff; color:#333;} 31 | #navigation { 32 | background-color: #064780; 33 | } 34 | 35 | .block .hd { background-color: #A0C2DE; color: #333; border-bottom: 5px solid #064780 } 36 | .tabs .hd { 37 | background-color: #064780; 38 | border-bottom: 5px solid #A0C2DE; 39 | } 40 | 41 | .block .bd h2 { color:#967E59; } 42 | .block .bd h3 { color:#967E59; } 43 | .spaces .hd { background-color:transparent; } 44 | .spaces .hd ul li { background-color:#187a7a; } 45 | 46 | .tabs ul { 47 | background-color: #064780; 48 | } 49 | 50 | .tabs .hd ul li a:hover { background-color:#CDEFFF; color: #333; 51 | } 52 | 53 | .tabs .hd ul li.active a { background-color:#A0C2DE !important; color:#333; text-decoration:none; } 54 | .spaces .hd ul li { background-color:#064780; margin-right:0.1em; } 55 | 56 | ul.pager li a { padding:0.1em 0.3em; margin-right:0.3em; border:1px solid #ccc; text-decoration:none; color:#333; } 57 | ul.pager li.active a, ul.pager li a:hover { background-color:#685841; color:#fff; } -------------------------------------------------------------------------------- /README.mdown: -------------------------------------------------------------------------------- 1 | YUI App Theme 2 | ============= 3 | 4 | A generic, skinnable layout for web applications built using [YUI Grids](http://developer.yahoo.com/yui/grids/). It's particularly well suited for admin areas. You'll find most of the standard UI elements are styled and ready for you to use: blocks, tabbed modules, tables, lists, one and two column forms, etc. Just [explore the demo](http://clickontyler.com/yui-app-theme/) to see what's available. Pay particular attention to the theme and layout panels on the side. They'll let you preview alternate layouts and color schemes with one click. 5 | 6 | This project is based on the great idea and design work done by the [web-app-theme](http://github.com/pilu/web-app-theme/tree/master) project on GitHub. We loved the concept and simplicity of their web app template but needed it to be built with [YUI](http://developer.yahoo.com/yui/). So we decided to re-implement it ourselves. 7 | 8 | The result is a clean, semantically structured layout built using [YUI Grids](http://developer.yahoo.com/yui/grids/). We hope you find it useful. 9 | 10 | Here's an [introductory blog post](http://clickontyler.com/blog/2009/03/yui-app-theme/) about the project. 11 | 12 | And a [live demo](http://clickontyler.com/yui-app-theme/). 13 | 14 | FEATURES 15 | -------- 16 | 17 | * Built on YUI Grids for easy customization and browser compatibility. 18 | * Lightweight CSS ~10KB 19 | 20 | INSTALL 21 | ------- 22 | 23 | To use, customize the HTML and CSS to suit your needs. You can safely remove the <script> references, as they're only used in the demo. 24 | 25 | UPDATES 26 | ------- 27 | 28 | Code is hosted at GitHub: [http://github.com/tylerhall/yui-app-theme/](http://github.com/tylerhall/yui-app-theme/) 29 | 30 | CONTRIBUTING 31 | ------------ 32 | 33 | Feel free to fork the project and add your own themes and improvements. 34 | 35 | LICENSE 36 | ------- 37 | 38 | The MIT License 39 | 40 | Copyright (c) 2009 Tyler Hall 41 | 42 | Permission is hereby granted, free of charge, to any person obtaining a copy 43 | of this software and associated documentation files (the "Software"), to deal 44 | in the Software without restriction, including without limitation the rights 45 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 46 | copies of the Software, and to permit persons to whom the Software is 47 | furnished to do so, subject to the following conditions: 48 | 49 | The above copyright notice and this permission notice shall be included in 50 | all copies or substantial portions of the Software. 51 | 52 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 53 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 54 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 55 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 56 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 57 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 58 | THE SOFTWARE. 59 | -------------------------------------------------------------------------------- /css/yuiapp.css: -------------------------------------------------------------------------------- 1 | html, body { background-color:#f0f0ee; color:#222; } 2 | 3 | /* Make the page full bleed */ 4 | #doc3 { margin:0; } 5 | 6 | /* Header */ 7 | #hd { padding:1.2em 1.5em 0 1.5em; background-color:#7a1818; } 8 | h1 { font-size:230%; color:#fff; } 9 | 10 | #navigation { margin-top:1.5em; background-color:#262626; height:1%; } 11 | #navigation li { float:left; display:inline; } 12 | #navigation li a { display:block; color:#fff; text-decoration:none; } 13 | #navigation li a:hover { text-decoration:underline; } 14 | 15 | #primary-navigation li a { font-size:116%; padding:0.4em 1em; } 16 | #primary-navigation li.active a { background-color:#f0f0ee; color:#000; } 17 | 18 | #user-navigation { float:right; } 19 | #user-navigation li a { font-size:93%; padding:0.5em 1em; } 20 | 21 | /* Body */ 22 | #bd { padding:1.5em; } 23 | h2 { font-size:153.9%; margin-bottom:0.5em; } 24 | h3 { font-size:153.9%; margin-bottom:0.5em; } 25 | 26 | /* Basic block */ 27 | .block { margin-bottom:1.5em; } 28 | .block .hd { background-color:#7a1818; padding:0.7em 1em; color:#fff; border-bottom:10px solid #262626; } 29 | .block .hd h2, .block .hd h3 { font-size:100%; margin-bottom:0; } 30 | .block .bd { padding:1em; background-color:#fff; } 31 | .block .bd h2 { color:#7a1818; } 32 | .block .bd h3 { color:#7a1818; } 33 | 34 | /* Extend block with tabs */ 35 | .tabs .hd { padding:0; } 36 | .tabs .hd ul { height:1%; } 37 | .tabs .hd ul li { float:left; } 38 | .tabs .hd ul li a { display:block; color:#fff; text-decoration:none; padding:0.5em 1em; } 39 | .tabs .hd ul li a:hover { background-color:#470E0E; } 40 | .tabs .hd ul li.active a { background-color:#262626 !important; color:#fff; text-decoration:none; } /* important! fixes IE cascade issue */ 41 | .tabs .hd h2, .tabs .hd h3 { position:absolute; margin-left:-5000px; } /* Hidden SEO Header if needed */ 42 | 43 | /* Extend tab block with spaced tabs */ 44 | .spaces .hd { background-color:transparent; } 45 | .spaces .hd ul li { background-color:#7a1818; margin-right:0.1em; } 46 | 47 | /* Extend block and header to have rounded corners */ 48 | .rounded .hd, 49 | .rounded .hd ul li, 50 | .rounded .hd ul li a, 51 | .rounded #navigation, 52 | .rounded #navigation ul li, 53 | .rounded #navigation ul li a { 54 | -moz-border-radius-topright:7px; 55 | -moz-border-radius-topleft:7px; 56 | -webkit-border-top-right-radius:7px; 57 | -webkit-border-top-left-radius:7px; 58 | } 59 | 60 | /* Style the horizontal rules inside .block */ 61 | .block hr { background-color:#f0f0ee; color:#f0f0ee; height:1px; border:0; } 62 | 63 | /* Tables */ 64 | table { width:100%; margin-bottom:2em; } 65 | table td, table th { padding:0.5em; } 66 | table thead { background-color:#262626; color:#fff; font-weight:bold; } 67 | table thead a { text-decoration:none; color:#fff; } 68 | table thead a:hover { text-decoration:underline; } 69 | table tbody a { text-decoration:underline; } 70 | 71 | table.zebra tbody tr:nth-child(even) {background: #eee} 72 | table.zebra tbody tr:nth-child(odd) {background: #fff} 73 | 74 | 75 | 76 | /* Pager control*/ 77 | ul.pager { text-align:right; } 78 | ul.pager li { display:inline; } 79 | ul.pager li a { padding:0.1em 0.3em; margin-right:0.3em; border:1px solid #000; text-decoration:none; color:#000; } 80 | ul.pager li.active a, ul.pager li a:hover { background-color:#000; color:#fff; } 81 | 82 | 83 | 84 | /* Forms */ 85 | form label { font-weight:bold; } 86 | form label span { font-weight:normal; color:#f00; font-size:85%; } 87 | form span.info { font-style:italic; color:#aaa; font-size:85%; } 88 | form .text { display:block; width:99%; border:1px solid #aaa; padding:0.3em; } 89 | form .column { width:48%; } 90 | form .left { float:left; } 91 | form .right { float:right; } 92 | 93 | /* Messages */ 94 | .alert { padding:0.5em; text-align:center; } 95 | .error { border:2px solid #fbb; background-color:#fdd; } 96 | .warning { border:2px solid #fffaaa; background-color:#ffc; } 97 | .notice { border:2px solid #1fdf00; background-color:#bbffb6; } 98 | 99 | /* Lists */ 100 | ol.list, ul.list, dl.list { margin-left:2em; margin-bottom:1em; } 101 | ol.list li { list-style:decimal outside; } 102 | ul.list li { list-style:disc outside; } 103 | dl.list dd { margin-left:1em; } 104 | 105 | ul.biglist { margin-bottom:1em; } 106 | ul.biglist li { margin-top:-1px; border:1px solid #f0f0ee; border-width:1px 0 1px 0; } 107 | ul.biglist li a { display:block; padding:0.5em 0; text-decoration:none; color:#000; } 108 | ul.biglist li a:hover { text-decoration:underline; } 109 | 110 | /* Footer */ 111 | #ft { text-align:center; font-size:85%; padding:0.5em 1em; color:#262626; } 112 | 113 | /* Generics */ 114 | p { margin-bottom:1em; } 115 | a { color:#7a1818; } 116 | strong { font-weight:bold; } 117 | em { font-style:italic; } 118 | abbr, acronym { border-bottom:1px dotted #000; cursor:help; } 119 | 120 | .small { font-size:85%; } 121 | .gray { color:#999; } 122 | .highlight { background-color:#ffffcc; } 123 | .clear { clear:both; } 124 | .text-left { text-align:left; } 125 | .text-right { text-align:right; } 126 | .text-center { text-align:center; } 127 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | YUI App Theme 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |

YUI App Theme

18 | 33 |
34 | 35 |
36 |
37 |
38 |

Hello, there.

39 |

YUI App Theme is a generic, skinnable layout for web applications.

40 |

What you're looking at is the basic page template. Because it's built on top of the YUI Grids foundation, you can easily change the page and column widths or even swap the columns around to suit your needs. Not only is it cross-browser compatible (we support all the major browsers including IE6), but it's super easy to extend as well.

41 |

It's particularly well suited for admin areas. You'll find most of the standard UI elements are styled and ready for you to use: blocks, tabbed modules, tables, lists, one and two column forms, etc. Just explore the page to see what's available. Pay particular attention to the theme and layout panels on the side. They'll let you preview alternate layouts and color schemes with one click.

42 |

Enjoy!

43 | 44 | 45 |
46 |
47 |

Basic Block ← This can be an H2 or H3

48 |
49 |
50 |

Some H2 Text

51 |

Some H3 Text

52 |

So this is a basic block module. It allows you to define a header using either an <h2> or <h3> tag. It can live in the main body column (here) or in the side bar to the right. It will automatically expand/shrink/do-the-right-thing where ever you put it — without requiring any markup changes.

53 |

Lorem ipsum dolor sit amet, some bold text followed by some italic text consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Highlighted text goes here, sunt in culpa qui officia deserunt mollit anim id est laborum.

54 |

small text

55 |

gray text

56 |
57 |

Don't miss the <hr> here ↑

58 |
59 |
60 | 61 | 62 |
63 |
64 |

Fake Header For SEO Purposes

65 | 73 |
74 |
75 |
76 |

Tab Example

77 |

The tabs at the top of this block are made using an <ul> — they're super-useful for sub-navigation elements. If you look at the source, you'll also notice that right above them is an <h2> tag which is hidden from view. This lets you define a header for SEO purposes without affecting your layout.

78 |

You can set the active tab by simply applying class="active" to the appropriate <li>.

79 |
80 |
81 | 82 | 83 |
84 |
85 | 93 |
94 |
95 |
96 |

Tab Example with Spaces

97 |

These tabs use the exact same markup as the previous example with an extra class="spaces" added to the containing block. This lets you switch between the two tab styles with very little fuss.

98 |
99 |
100 | 101 | 102 |
103 |
104 |

Table Example

105 |
106 |
107 |

Tables

108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 |
IDLoginFirst NameLast Name 
1susanSusanDelgadoview | edit | delete
2eddieEdwardDeanview | edit | delete
3jakeJohnChambersview | edit | delete
4calvinCalvinTowerview | edit | delete
154 | 155 | 171 | 172 |
173 |
174 | 175 | 176 |
177 |
178 |

Single Column Form Example

179 |
180 |
181 |

Attractive Looking Forms

182 |
183 |

184 | 185 | Ex: some text 186 |

187 |

188 | 189 | Ex: some more text 190 |

191 |

192 | 193 | Lots of text can go in here 194 |

195 |

or Cancel

196 |
197 |
198 |
199 | 200 | 201 |
202 |
203 |

Message Style Examples

204 |
205 |
206 |

Messages

207 |

Notifying the user with an error, warning, or notice is easy with these simple alert boxes.

208 |

Error message

209 |

Warning message

210 |

Notice message

211 |
212 |
213 | 214 | 215 |
216 |
217 |

Two Column Form Example

218 |
219 |
220 |

2 Column Forms

221 |
222 |
223 |

224 | 225 | Ex: some text 226 |

227 |

228 | 229 | Ex: some more text 230 |

231 |

232 | 233 | Lots of text can go in here 234 |

235 |
236 |
237 |

I bet you thought two column forms would be difficult, eh? Don't worry. We've got you covered.

238 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

239 |
240 |
241 |

or Cancel

242 |
243 |
244 |
245 | 246 | 247 |
248 |
249 |

Lists! Lists!

250 |
251 |
252 |

Get your lists here!

253 |

Unordered List

254 |
    255 |
  • Apple
    • 256 |
  • Pear
    • 257 |
  • Orange
    • 258 |
259 | 260 |

Ordered List

261 |
    262 |
  1. Mars
    2. 263 |
  2. Jupiter
    3. 264 |
  3. Venus
    4. 265 |
266 | 267 |

Dictionary List

268 |
269 |
Hollywood
270 |
Academy Awards
271 |
Television
272 |
Emmys
273 |
Broadway
274 |
Tonys
275 |
276 |
277 |
278 | 279 |
280 |
281 | 347 |
348 | 349 |
350 |

Copyright © 2009 Blah Your Website

351 |
352 | 353 |
354 | 355 | 356 | --------------------------------------------------------------------------------