CSSフレームワークKube6.0覚書02

投稿者: ねこやま猫道Web関連
image

とりあえず、ねこやま猫道サイト風に以下の構成で作ってみることにしました。なんとか最低限の形にはなりました。

テストサイトは以下
http://nekoyama.webcrow.jp/kube6-test/test02/index.html

前回までのおさらい

  • Kube6.0をダウンロード
  • 独自スタイルも追加したいので、kube.scssをimportするmaster.scssをつくり、コンパイルしてmaster.cssを作れるようにした
  • index.htmlにKubeで提供するスタイルや要素を入れてみた（タブ、グリッド）

ページ構成

  • ヘッダ
  1. ナビゲーション（HOME INFO ABOUTへのページ内リンク）
  2. ヘッダ画像
  • メイン
  1. INFO（タブ2つ）
  2. ABOUT（二分割のエリア）
  • フッタ

 

補足

  • ヘッダ、ナビゲーション、フッタはKubeで用意されていないので一から作る
  • ナビゲーションはKubeのclass、stickyで常にトップに表示
  • ヘッダ画像はbackgroundでbackground-size:coverを指定
  • 独自に追加するスタイルのmarginやpaddingは、なるべくKubeで定義されている変数を使う（下記master.scssの中で使用している、$base-lineなど）

index.htmlおよびmaster.scssの内容

[index.html]
<!DOCTYPE html>
<html lang=“ja”>

<head>
<title>TEST for Kube6.0</title>

<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>

<!– Kube CSS –>
<link rel=“stylesheet” href=“dist/css/master.css”>

</head>

<body>
<div id=“header”>
<div class=“navi sticky”>
<nav>
<ul>
<li><a href=“#”>HOME</a></li>
<li><a href=“#info”>INFO</a></li>
<li><a href=“#about”>ABOUT</a></li>
</ul>
</nav>
</div>
<div class=“cover”>
<h1>TEST<br />Test for Kube6.0</h1>
</div>

</div>
<div id=“main”>
<a name=“info”></a>
<h2 class=“section”>INFO</h2>
<div class=“row”>
<div class=“col col-12”>
<nav class=“tabs” data-component=“tabs”>
<ul>
<li class=“active”><a href=“#tab1”>TAB1</a></li>
<li><a href=“#tab2”>TAB2</a></li>
</ul>
</nav>
<div id=“tab1”>
<p>TAB1</p>
<p>…</p>
</div>
<div id=“tab2”>
<p>TAB2</p>
<p>…</p>
</div>
</div>

</div>
<a name=“about”></a>
<h2 class=“section”>ABOUT</h2>
<div class=“row”>
<div class=“col col-6”>
<p>…</p>
</div>
<div class=“col col-6”>
<p>…</p>
</div>
</div>
</div>
<div id=“footer”>
<div class=“row”>
<div class=“col col-12”>
<p class=“centered”>TEST for Kube6.0</p>
</div>
</div>

</div>
<!– Kube JS + jQuery are used for some functionality, but are not required for the basic setup –>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>
<script src=“dist/js/kube.js”></script>
</body>

</html>

[master.scss]

@import “kube.scss”;

/*
* STYLE
*/

#header {
.navi {
padding: $base-line-smaller $base-line;
background: rgba(255, 255, 255, 0.92);
border-bottom: 1px solid rgba(0, 0, 0, .05);
nav li {
display: inline-block;
margin-left: $base-line;
a {
text-decoration: none;
}
}
}
.cover {
position: relative;
background: #FFF url(cover.jpg) no-repeat fixed center center;
background-size: cover;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
min-height: 100%;
h1 {
padding-top: 10em;
color: #FFF;
text-align: center;
}
}
}

#main {
padding: 0 $base-line*2;
.section {
margin-top: $ui-height;
}
}

#footer {
margin-top: $ui-height-big;
padding: $base-line $base-line*2;
border-top: 1px solid rgba(0, 0, 0, .05);
}

今後の予定

  • headingのフォントを変えたい
  • ナビゲーションの表示をスマホの場合に変えたい
  • Kubeで新たに用意されたjavascript observerを使ってみたい

[参考]kube.scssコンパイル後の内容

  • アニメーション
  • htmlタグ初期設定
  • GRID（row col）
  • table
  • input select textarea fieldset
  • form
  • button label
  • alert
  • message
  • tab
  • breadcrumb
  • pagination
  • dropdown
  • modal
  • float
  • hide show
  • 装飾（visible、状態色、uppercase、font-weight、border-radius、closeボタンなど）
  • width関連
  • position関連
  • search関連
  • menu、offcanvas関連
  • print