Semantic UI floats

Question

Semantic UI newbie here, I couldn't find anywhere in the docs how (if it's possible) to float a simple element without having it to be something else (like a button or a segment).

For instance, I have at the bottom of a page a step navigation/counter that is written like so:

<div class="row three column">
    <div class="column">
        <br>
        <p class="ui left floated compact basic segment stepper">Step 2 of 3</p>
        <a class="ui right floated compact basic segment stepper">Go back</a>
    </div>
</div>

Beside the fact that having to place a <br> before the floating elements looks kinda weird to me, isn't it possible to just add classes like left floated and have the thing foat? Like we'd with bootstrap with pull-leftfor instance…

If I understand well, segment is for grouping related contents (corresponding semantically to the HTML5 <section> tag). Therefore, it seems a bit overkill – if not semantically wrong – to use segments in such situations.

Solution

Currently there are no global utilities like pull-left in bootstrap. Whenever right float , for example, is defined in the SUI code, it is always in association with an element such as button, segment, list, etc.

You can simply define your own global utility, without need to "overkill" with any SUI elements:

div [class*="left floated"] {
  float: left;
  margin-left: 0.25em;
}

div [class*="right floated"] {
  float: right;
   margin-right: 0.25em;
} 

Though for your situation, an icon button might be semantically suited for both the elements.

Comments

[Buzut]

That's a clear! I'll add add those in my stylesheet right away. It's sometimes puzzling when you're used to some way of doing things with a framework and you don't find the same logic in another one.

[Buzut]

Btw, an icon could be suited indeed, but the designer went another path ;)

[Sarthak]

Perhaps one of the reasons for not having this utility is that the author of SUI tries to keep all the elements individually downloadable. Implementing global utilities would have one download a global file as well (or less run the risk of the same code repeating in multiple files)