管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla
Post on:2019年11月18日
商用のプロジェクトでも無料で利用できる、管理画面・ダッシュボードのレイアウトやUIコンポーネントが揃ったテンプレートを紹介します。
このテンプレートを使用すると、管理画面・ダッシュボードで必要なコンテンツを簡単に作成できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-01.png)
Stislaの特徴
Stislaは、Bootstrap 4をベースにした管理画面用のテンプレートで、ダッシュボードのUIを設計するのに役立ちます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-02.png)
- 管理画面・ダッシュボードに特化されたUIコンポーネントがほとんどすべて揃ったテンプレート。
- 30以上のサードパーティのライブラリと統合、多くのコンポーネントを簡単に利用できます。
- HTML5とCSS3で記述されており、すべてのモダンブラウザでサポートされています。
- Bootstrap 4をベースに、Flexboxでレイアウトされています。
- 一部のコンポーネントにはより簡単にやり取りするために、JavaScript APIを使用。
- MITライセンスで、商用プロジェクトでも無料で利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-03.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-04.png)
Stislaのデモ
デモでは管理画面・ダッシュボードのレイアウトからさまざなUIコンポーネントを実際に試せます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-05.png)
まずは、Bootstrapベースのコンポーネント。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-06.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-07.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-08.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-09.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-10.png)
続いて、Stisla専用のコンポーネント。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-11.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-12.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-13.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-14.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-15.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-16.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-17.png)
サードパーティのライブラリを使用したコンポーネント。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-18.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-19.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-20.png)
Stislaの使い方
Stislaは実装のドキュメントも完備されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-21.png)
基本となるHTMLにレイアウトやUIコンポーネントのコードをコピペするだけで利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-22.png)
GitHubからダウンロードできるファイルには、全レイアウト・全UIコンポーネントのHTMLファイルも含まれています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201904/2019111701-23.png)
ダウンロードファイルの中身
sponsors