How many ways are there to assemble a button?
This project is an exercise in separation of concerns regarding structure, style, content and data. The primary goal is to clearly demonstrate how to construct UI components, from simple to advanced, using only buttons as the example.
For the purposes of this project let's agree that:
As a rule of thumb, each example in the project demonstrates a different approach to separating concerns between content, structure and style, and in general each example will build upon the last in order to demonstrate:
In general, the examples progress from "basic" to "advanced", beginning with button-000, which should be more approachable for designers who have very little to no programming experience, eventually building up to more "complex" examples that might appeal to more experienced programmers.
Also, since the project is expressly intended to be instructive, by necessity some of the examples should not be idiomatic. Furthermore, no judgement is made concerning how much abstraction is necessary, good, bad, idiomatic or otherwise. The driving assumption being that it is equally instructive to see examples of code that is, say, more abstracted than it should be, as it is to see shining examples of perfection. Especially when the user has the larger perspective of seeing multiple approaches for solving the same or similar problems.
In other words, this project will give you examples but the opinions will be left to you.
Would you like to add an example? Please do! Just fork the project and do pull request. I only ask that you attempt to number the example appropriately, according to the relative level of complexity of the example.
Also, in lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.
Copyright (c) 2013 Jon Schlinkert, and the authors of examples utilized herein.
Licensed under the MIT license.