A generic, skinnable layout for web applications built using 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 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.
This project is based on the great idea and design work done by the web-app-theme project on GitHub. We loved the concept and simplicity of their web app template but needed it to be built with YUI. So we decided to re-implement it ourselves.
The result is a clean, semantically structured layout built using YUI Grids. We hope you find it useful.
Here's an introductory blog post about the project.
And a live demo.
- Built on YUI Grids for easy customization and browser compatibility.
- Lightweight CSS ~10KB
Always include the YUI grids stylesheet. For example, Only apply the #hd, #bd and #ft ids to standalone divs. Never add padding or margin properties to any of the pre-defined YUI classes, including yui-b, yui-g and yui-u. Use the YUI Grids Builder wizard to construct an initial template of your page. View the yuiapp index.html source to understand how markup should be constructed in the context of YUI Grids. Always define padding and margins in units of em, and font-sizes in %. Use an "Em Calculator" such as this one to help with this.
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.
Code is hosted at GitHub: http://github.com/tylerhall/yui-app-theme/
Feel free to fork the project and add your own themes and improvements.
The MIT License
Copyright (c) 2009 Tyler Hall
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.