###### tags: `framework`,`abisu`,`css`
# 使用方法

## ダウンロード
https://github.com/up-codes/abisu-css/archive/master.zip

### 各ファイル説明
**太字**は必須ファイルです。

html
┣ css
┃ ┣ **abisu.css**　　編集画面でのみ機能するクラス群
┃ ┣ **base.css**　　リセット+「up-」で始まるcssフレームワーク
┃ ┣ components.css　　components.htmlで使用　不要
┃ ┣ jquery.datetimepicker.min.css　　フォームでカレンダーによる入力をする際に使用
┃ ┣ slick-theme.css　　スリックスライダーのテーマ
┃ ┣ slick.css　　スリックスライダー用
┃ ┗ **style.css**　　実際にスタイルを記述していくcss
┣ font
┃ ┣ slick.eot　　スリックスライダー用
┃ ┣ slick.svg　　スリックスライダー用
┃ ┣ slick.ttf　　スリックスライダー用
┃ ┗ slick.woff　　スリックスライダー用
┣ images
┃ ┗ ajax-loader.gif　　スリックスライダー用
┣ js
┃ ┣ **common.js**　　基本js
┃ ┣ components.js　　components.htmlで使用　不要
┃ ┣ datepick_option.js　　フォームでカレンダーによる入力をする際に使用
┃ ┣ **heightline.js**　　heightLine用
┃ ┣ juery.datetimepicker.full.nmin.js　　フォームでカレンダーによる入力をする際に使用
┃ ┣ slick.min.js　　スリックスライダー用
┃ ┗ slick_option.js　　スリックスライダー用
┣ stylus　　不要
┃
┣ article.html　　記事一覧のテンプレート
┣ article_detail.html　　記事詳細のテンプレート
┣ component.html　　要素集
┣ form.html　　フォームのテンプレート
┣ gallery.html　　ギャラリーのテンプレート
┣ gallery_detail.html　　ギャラリー詳細のテンプレート
┗ index.html　　トップページのテンプレート

### GitHub
https://github.com/up-codes/abisu-css

<br>
<br>

## レスポンシブ

### ブレイクポイント
タブレット（TB）とスマートフォン（SP）の２つ

/* タブレット（TB） */
@media only screen and (max-width: 1024px) {

}
/* スマートフォン（SP） */
@media only screen and (max-width: 599px) {

}

### レスポンシブクラス (@tb,@sp)
タブレット(tb)/スマホ(sp)時で基本クラスを適用させる場合は、クラスの末尾に<b>@tb,@sp</b>を付ける。

例１）フォントサイズ　PC：30px、TB：24px、SP：20px

<h2 class="head up-fz-30 up-fz-24@tb up-fz-20@sp">タイトルが入ります</h2>

例２）一般的なレイアウト
<iframe height="335" style="width: 100%;" scrolling="no" title="ExKMwxb" src="https://codepen.io/unisonplanet/embed/ExKMwxb?height=335&theme-id=dark&default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/unisonplanet/pen/ExKMwxb'>ExKMwxb</a> by unison
(<a href='https://codepen.io/unisonplanet'>@unisonplanet</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

<br>
<br>

## 表記について

### x,y,t,r,b,l,c,p
up-my-30, up-obf-c, up-w-30%など
- x: (x軸)横方向
- y: (y軸)縦方向
- t: (top)上
- r: (right)右
- b: (bottom)下
- l: (left)左
- c: (center)真ん中
- p: (percent)パーセント

<style>
thead {
width: 100%;
}
td:first-child {
width: 300px;
}
td:last-child {
width: 60%;
}
</style>