| Name | |
|---|---|
| 昔 | Foundation for Sites |
| 前回 | Spectre.css |
| 今回 | Vanilla Framework |
前回、完成した作品
今回、完成した作品
今回は、Vanilla Framework v2.23.0を使って、作ってみました。
ずっと前から試してみたいと思っていて、ようやく試すことが出来ました。
ドキュメント形式のサイトを作るのに適したCSS Frameworkって少ないと思いますが、Design Systemで探せば、いくつか良いのが見つかるかもしれません。
ポイント 1
文字数が多い場合、文字を丸めてくれるu-truncateというclassがあります。
<li class="u-truncate">の場合は、<ul>をlist-style-position: inside;にするのが、ポイントです。*1
ul { margin-left: 0; list-style-position: inside; }
ポイント 2
画面左側のSide navigationですが、背景色を濃い色にしました。
$theme-default-p-side-navigation: 'dark';
<div class="p-side-navigation is-dark">
ポイント 3
外部リンクの時は、文字の右側にアイコンが表示されます。
<a class="p-link--external" href="https://www.yahoo.co.jp/" rel="noopener noreferrer" target="_blank">Yahoo! JAPAN</a>
ポイント 4
Ubuntuを使っている人なら、font-familyのubuntuフォントは、インストール済みのはずです。
scss/_base_typography.scss
//@include vf-b-typography-fontfaces;
Webフォントを読みに行かなくなります。
