@buxweb/cake_ui v0.1.0
TOC
- About Cake UI
- Installation
- Quick Start
- Usage Guide
- Basics
- StyleSheet
- Javascript
- Components
- Effects
- Basics
- Change log
- License
About
Cake UIはベーススタイルをカスタマイズ可能なUIライブラリーです。 ヘッダーやフッターなどのコンポーネントのスタイリングと、UIアニメーションなどのエフェクトを提供します。 これらは、HTMLに特定のアンダーバーから始まる特定のクラスを与えることで実装が出来ます。
Installation
npm i @bux-web/cake-uiQuick Start
Javascript
import "cake_ui/dist/cake.js";SCSS
headとbodyの間に基本スタイルを変更する変数の上書きができます。 上書きできる変数はこちら -> variables
@import '../node_modules/cake_ui/scss/head';
/* you can overwrite some variables
$accent_color: #316AB3;
*/
@import '../node_modules/cake_ui/scss/body';HTMLの例
@bux-web/cake-ui/dist/example.htmlにHTMLの例をまとめています。
今後、VS Codeスニペットととしてパッケージにまとめる予定です。
Header
<header class="_ghead">
<div class="_tip">
<h2 class="_logo">LOGO</h2>
<ul class="_pages">
<li class="_page">
<a class="_hBtn _current" href="">page1</a>
</li>
<li class="_page">
<a class="_hBtn" href="">page2</a>
</li>
</ul>
<div class="_buttons">
<a href="" class="_btn">Contact</a>
<div class="_hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<nav class="_iceberg">
<ul class="_pages">
<li class="_page">
<a href="">page1</a>
</li>
<li class="_page">
<a href="">page2</a>
</li>
</ul>
</nav>
</header>Usage Guide
SCSSを使わない場合はコンパイルされたCSSをそのまま使うことも可能です。
CSS
@bux-web/cake-ui/dist/cake.css
SCSS
Quick Startのセクションであったように、SCSSでは基本スタイルを簡単に上書きする事ができます。 また、定義されているmixinも使えるようになります。
SCSS変数
以下の変数で基本スタイルを制御しています。
// Styling
$borderRadius: 8px;
// Typography
$fs_base: 16px;
$fs_header: 14px;
// Layout
$grid_gap: 2rem;
$card_padding: 3rem;
$card_padding_sd: 2rem 1.25rem;
$btn_padding: 0.5em 1em 0.6em;
$pad_container: 2rem;
$pad_container_sd: 1.25rem;
$pad_footer: 5rem;
$dl_dd_width: 10em;
// Color
$shadow_color: black;
$border_color: black;
$txt_color: black;
$accent_color: orange;
$bg_color: white;
$link_visited: purple;
$link_hover: blue;
$link_active: orange;Mixins
以下のmixinがCake-UIで定義されています。 SCSSをインポートした後に使えます。
@mixin desktop_lg{
@media screen and (min-width: 1480px) {
@content;
}
}
@mixin desktop {
@media screen and (min-width: 1024px) {
@content;
}
}
@mixin tablet {
@media screen and (max-width: 1023px) {
@content;
}
}
@mixin sd {
@media screen and (max-width: 767px) {
@content;
}
}
@mixin container{
padding-left: $pad_container;
padding-right: $pad_container;
box-sizing: border-box;
@include sd{
padding-left: $pad_container_sd;
padding-right: $pad_container_sd;
}
}
@mixin fixed($zIndex: 0){
position: fixed;
z-index: $zIndex;
top:0;right:0;bottom:0;left:0;
}
@mixin stack($gap:$grid_gap){
display: flex;
gap: $gap;
}
@mixin vStack($gap: $grid_gap){
@include stack($gap);
flex-direction: column;
}Components & Effects
特定のクラスとHTMLの構造を使うことで簡単にComponentsとEffectsが使えるようになります。
@bux-web/cake-ui/samples/index.htmlに例をまとめています。
Components
以下のコンポーネントが用意されています。
- header
- footer
- icons
- modal
- fontLoadingScreen
Effects
以下のエフェクトが用意されています。
- fadeIn - "_fade_in"をクラスに持つエレメントをターゲットにします - ターゲットがスクリーンの表示域に入ると作動します
- progressivelyRevealText - "_progressively_reveal"をクラスに持つエレメントをターゲットにします - ターゲットがスクリーンの表示域に入ると作動します - テキストコンテンツの各文字をspanタグで囲みStaggerエフェクトで表示します
Change log
バージョン 0.1.0 - 初回リリース
- Cake UIライブラリの初版リリース
- ヘッダー、フッター、モーダルなどの基本コンポーネント
- fadeInやprogressivelyRevealTextなどのエフェクト
License
MITライセンス 本ソフトウェアおよび関連する文書ファイル（以下、「ソフトウェア」と呼ぶ）のコピーを入手するすべての人に対し、制限なくソフトウェアを扱う無償の権利が付与されます。これには、ソフトウェアを使用、コピー、変更、統合、公表、配布、サブライセンス、および/または販売する権利およびソフトウェアを提供される人々に同様の権利を許可する権利が含まれますが、これに限定されません。
上記の著作権表示および本許諾表示は、ソフトウェアのすべてのコピーまたは大部分に含まれなければなりません。
本ソフトウェアは「現状のまま」提供され、商品性、特定目的への適合性、および非侵害についての明示または暗黙の保証を含め、いかなる種類の保証も明示しないものとします。いかなる場合においても、著作権者または著作権保有者は、契約、不法行為またはその他の行動、ソフトウェアまたはソフトウェアの使用またはその他の取引に起因または関連して生じる請求、損害またはその他の責任について責任を負わないものとします。
12 months ago