Missing Documentation for Introduction to SUI

[Alekusu]

Hello,

First, i want to say thank you for your amazing work, it's really wonderful !
But, for me, there is a lack of documentation for the basic things.

First Example : sometimes, i must indicate "ui" in the class and sometimes it works without. I must write "class="ui medium rounded image" and if i don't write "iu", it doesn't work. But if i write "ui barcode icon" or "barcode icon", the result is the same. However, in the documentation, i don't find a page which explained when i must use "ui".

Second example : if i code something like that :

<div class"ui list">
    <a class="item" href="">
        <i class="barcode icon"></i>
        <div class="content">
        Products
        </div>
    </a>
</div>

and if i want the icon + content are aligned in the center of the element, seems i don't have anything with Semantic UI to do it. If i use "centered" or "center aligned", it doesn't work. In this case, is the only solution to use "text-align: center" directly ?

It's just 2 examples among many but sometimes i don't understand the logic of Semantic UI and i think it will be good to explain more the way it works for the basic things. Maybe a tutorial to create a basic webpage step by step and explain the way it works. You have made an amazing documentation for the complicated stuffs but i think you forgot the people who aren't accustomed to develop with CSS Framework.

I hope my questions don't look weird/dumb but i think it can be useful for some people (like me ;))
Thanks :)

[anestv]

In most cases, you need to use ui. You don't need to use it in i.icons and in some "sub-elements" of ui components, like .column, .row, .item

For centering content, it depends on the parent element.

There are some guides at http://learnsemantic.com/ , but they mostly target more excerienced users. Regarding the guides see also #1318 and #60

[davd8zero]

UI definitions in Semantic are given the class name ui. This is to help tell the difference between ui elements and parts of the definition of an element. This means any element with the class name UI has a corresponding UI definition.

For example a menu may have menu items inside of it. These items are contained as part of the menu definition but do not receive the class name ui because they are part of a UI menu collection.

Check out the Overview in the legacy docs, might help explain some of this.
http://legacy.semantic-ui.com/introduction/overview.html

[jlukic]

A lot of the legacy docs have not been correctly ported or rewritten for 1.0.

Since launch I've prioritizing triaging bugs over documentation writing, but I plan on making a shift to prioritizing docs in January.

[Alekusu]

Yes thanks a lot Jack !

[jlukic]

See #1571 for continued discussion.

Starting work asap.