diff --git a/README.md b/README.md index 1d6df1420..d56c890bd 100755 --- a/README.md +++ b/README.md @@ -3,34 +3,11 @@ Semantic is a set of specifications for sharing UI elements between developers. Semantic is also a UI library to make front end development simpler and easier to learn. -## Development Status - Semantic is production ready, but is formally "pre-release" until proper build and theming tools are available, and documentation is complete for all components. -### Bugs and Issues - -Please [share any issues](https://github.com/jlukic/Semantic-UI/issues?state=open) you may have, we need your help to get all the kinks out. - -If you are reporting a bug *you must create a test-case*. You can [fork this jsfiddle](http://jsfiddle.net/jlukic/Vbr9d/1/) to get you started. - -### Roadmap -* [Features Missing for 1.0](https://github.com/jlukic/Semantic-UI/issues?direction=desc&milestone=1&page=1&sort=updated&state=open) -* [Planned Updates for 1.X](https://github.com/jlukic/Semantic-UI/issues?direction=desc&milestone=2&page=1&sort=updated&state=open) -* [Additional Components Scoped for 2.0](https://github.com/jlukic/Semantic-UI/issues?direction=desc&labels=&milestone=3&page=1&sort=updated&state=open) - -### Updates - -If you want to keep track of development, please [join our google group](https://groups.google.com/forum/?hl=en#!forum/semantic-ui) - -## The Library - -### Getting Started +## Getting Started -The Semantic library describes many UI elements. In most instances it might be best to build a custom build with only the elements you need. - -*Build tools are not yet available but stay tuned!* - -~~You can use our build tool to select only the components you want~~ +The Semantic library describes many UI elements. In most instances it might be best to build a custom build with only the elements you need. To download the entire library @@ -40,178 +17,47 @@ If you prefer to download the whole kit as a zip, it is so conveniently packaged http://semantic-ui.com/build/semantic.zip -### Right-to-Left (RTL Version) +**Build tools for creating customized downloads will be available in 1.0** Until then we suggest using an asset management tool like [grunt](https://github.com/gruntjs/grunt-cli) or [jammit](https://github.com/documentcloud/jammit) to create packaged versions for use in production. + + +#### Right-to-Left (RTL Version) RTL versions are compiled on every patch update, and are available in ``/rtl/`` -### LESS Semantic UI +#### LESS Semantic UI More css-processing features are currently being added to help in the customizing and theming Semantic UI. This will be one of the core features additions for Semantic's first release version. -### SASS/SCSS Semantic UI +#### SASS/SCSS Semantic UI If you are looking for a SCSS/SASS port of Semantic for your rails projects check out doabit's [Semantic UI for SASS](https://github.com/doabit/semantic-ui-sass) -## The Specification - -The aim of the specification is to develop conventions around structuring and naming code for interface elements. - -By defining a vocabulary the development community can exchange javascript and css definitions of UI in a similar language, making new code easier to grok, and reducing the complexity of starting a new project, or changing a sites design. - -## Types of UI - -UI components are split into four categories, ranging from smallest to largest in scope: -* UI Elements -* UI Collections -* UI Modules -* UI Views - -### UI Elements -UI Elements are interface elements which do not contain other elements inside themselves. This can be thought of as similar in definition as an "element" in chemistry. - -UI elements can have plural definitions when they are known to exist together frequently. - -In this case each button will be large because we understand it is a part of the large button group -``` html -
-
Cancel
-
Continue
-
-``` - -Examples of UI elements: -* Buttons -* Labels -* Headers -* Progress bars - - -### UI Collections -UI Collections are groups of heteregeneous UI elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules. - -UI collections have a definition of elements that exist, or could exist inside of them. They do not usually require all elements to be found, but they describe a list of the "usual suspects". Unlike elements, collections are not typically useful to define in plural. - -Examples of UI collections: -* Forms -* Tables -* Grids (Layout) -* Menus +## About the Project +### Learn More -### UI Modules - -UI modules are elements where it's behavior is a fundamental part of its definition. UI Modules are dependent on the javascript which carry their definition. They also may be more complex, and have a variety of different functions. Further abusing the scientific analogy: These can be thought of as "organs". - -Examples of UI modules: -* Popups -* Modals -* Chatrooms - -### UI Views -UI Views are common ways to structure types of content so that it can be understood more easily. A view's definition in semantic only describes the content which typically occupies the view. - -Examples of UI views: -* Comment Feed -* Activity Feed -* Product List - -### How it is defined - -#### Scope of a definition - -**All UI**: The specification defines class name and html structures which can be used to represent an element - -**Elements**: An element definition gives states which an elements can occupy, common types of that element, and if necessary, defines how the element functions in groups. - -**Collections**: Collection definitions list elements that it can include, and variations which can apply to both the collection, or individual elements found in the collection. - -**Modules**: Module definitions include a list of behaviors that are commonly associated with an element - -**Views**: View specifications defines the types of content the view usually display, and the heirarchy typical to presenting this content to the user. - -#### Based on class - -Semantic is based on class names, instead of tags. This means, except for links, tables and form elements, you can use semantic with tags like ``