Semantic UI - クラス指定に意味を持たせたデザインフレームワーク // MOONGIFT Archived

スタイルシートのデザインフレームワークを使っていると、自分が行いたいデザインをどうすれば実現できるかを都度調べる必要があります。md-6とかそういった類のクラスを確認して記述したりします。
つまり頭の中で自分のやりたいことと、実際の記述とを変換する必要があるのです。これは意外とストレスではないでしょうか。それを解決する、セマンティック（意味がある）なデザインフレームワークがSemantic UIです。

Semantic UIの使い方

基本形を見てみます。


  

  

#   
 ![](/images/icons/pen.png)  
 Simplify Your Codebase  

  

Semantic's conventions are based around **common usage** and not prescription. Syntax borrows useful principles from natural language like plurality, tense, and word order so your code explains itself.

  
<!-- Recursion Omitted (Turtles all the way down) !-->

例えばこのようになります。スタックできるのであればstackable、中央寄せならcenterなど実現したい表現と記述内容を合わせているのが特徴です。ではここからは主なデザインについて。

こんな多種多様なデザインが用意されています。