セマンティックUIでレスポンシブWebサイトをより早く構築する

Bootstrapのようなフロントエンドフレームワークはいまだに流行しています。選ぶべき偉大な選択肢はたくさんありますが、最近私の注意を引いたものは セマンティックUI.

このライブラリはしばらく前から使用されていて、数年前のものです。ただし、バージョン2.2の最新リリース 追加機能の束が付属しています そして、Semanticは長距離に渡ることを証明しています.

何十もの CSS変数, 単純なレスポンシブクラス, そして 設定が簡単なレイアウト, Semantic UIを自分で操作しても問題ないでしょう.

の 単純なクラス名とグリッド構造 このフレームワークが呼ばれることに本当に意味を与える “セマンティック”. クラスは非常に賢明であり、これはあなたのHTMLを離れたところで読みやすくする。.

それも付属しています 動的ページ要素に対するjQueryのサポート カルーセルやドロップダウン選択メニューなど.

太陽の下のすべてのHTML要素は カスタマイズされた完全機能 セマンティックUIを使って。これには、HTML5要素と、評価やカスタムタブなどの追加機能が含まれます。.

しかし、おそらくセマンティックの最良の部分は テーマ設定. あらかじめデザインされたスタイルと動的な要素がたくさんあるだけでなく、 これらを自分で作り直す Semanticのコードの上に構築する.

図書館全体の合計 3,000以上のテーマ変数 Sassで変更することも、独自のスタイルシートを拡張することによって変更することもできます。さらに、Semantic UIは同梱されています 9つのデフォルトテーマ：

これらは単なる氷山の一角であり、それらはより多くのように振る舞う あなた自身のテーマをデザインするための出発点.

新しいランディングページまたはカスタムWebサイトを最初から作成する場合は、Semantic UIを使用することを真剣に検討してください。それは完全に無料でオープンソースです オンラインですばらしいドキュメンテーション.

あなたが閲覧することができます レイアウトスタイル, に加えて すべての主要要素とカスタムテーマのためのガイド.

そして、あなたはダウンロードすることができます ソースコードのコピー GitHubから直接 初心者向けガイド.