Winston User Interface Library

You are not building websites anymore. You are building full-fledged web applications. In order to build the best you can, in order to have room for innovation, you need a set of defaults so you don't have to deal with the monkey jobs anymore – to be able to spend more time solving the real design issues instead of booting up your Windows machine for the umptheenth time to solve that cross browser bug.

That's Winston for you.

---

What is Winston?

Winston is a user interface library consisting of common elements in websites and web applications. These elements work together in an ecosystem of conventions, guidelines and best practices. The goal of this library is to provide designers and developers with a solid base to build user interfaces. Think of it as Rails for designers.

Download

Download Winston from Github:

• Do it the cool way using git: git clone git@github.com:Wolfr/winston.git
• Alternatively, go to Winston's Github page and click the download button. You can choose to download a .zip or .tar file then.

Why should I use this?

• Use code that has been tested in various browsers, leaving you with fewer worries
• Be able to quickly mock up a page using good defaults, straight in your code
• Slice 'n dice faster than ever before by consistently avoiding repeat tasks

How do I use Winston?

Ideally, you start using Winston when you start a new project. You could theoretically integrate it into an older project but that would probably result in a lot of code duplication.

After you downloaded Winston, you will see that the directory structure looks like this:

					+ [docs]
					+ [start_project]
				

The docs are included with each version of Winston, but if you are using the latest version, you can just use the online docs and safely delete the [docs] folder.

Inside [start_project] you will find a few other files:

					- [start_project]
						index.html
						- [css]
							- [modules]
							  winston.full.0.4.css
							  winston.ie6.full.0.4.css
							  winston.ie7.full.0.4.css
						- [images]
						- [js]
							+ [cufon]
							+ [jquery]
				

This file structure is meant to help you get to work fast. The index.html file includes jQuery and the full Winston file, so you can just start coding without any hassle.

If you want customize Winston to your specific needs, you're going to want to strip out the parts that you don't need. There's 2 way to go about this:

1. Delete the [modules] folder. Open the winston.full css file and delete the parts you don't need. Every module is clearly marked so it's just a matter of going through the file.
2. The other option is to start out with an empty file and then add modules when you need them by copy pasting those from the [modules] folder.

Have fun with your project!

I know this isn't ideal: for later versions I plan to make a "builder" so you can just check the modules you need and then you're good to go. For instance, the [images] folder probably contains a lot of things you don't need at this point.

Test suite

Nobody likes plowing through documentation and sets of conventions without knowing first what to expect. Time is valuable to anyone.

Check out the test suite pages for typography, buttons and layout.

So you can get a sense of what you can do before investing any time in this.