独学者Fossa

独学していることなど

Bookmark (2)

fossa-hobby.hatenablog.com

Name
Foundation for Sites
前回 Spectre.css
今回 Vanilla Framework

前回、完成した作品

イメージ図
イメージ図

今回、完成した作品

イメージ図
イメージ図

今回は、Vanilla Framework v2.23.0を使って、作ってみました。
ずっと前から試してみたいと思っていて、ようやく試すことが出来ました。

ドキュメント形式のサイトを作るのに適したCSS Frameworkって少ないと思いますが、Design Systemで探せば、いくつか良いのが見つかるかもしれません。

vanillaframework.io

ポイント 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 is-sticky">

is-stickyを入れたけど、うまく表示してくれません。

ポイント 3

外部リンクの時は、文字の右側にアイコンが表示されます。

<a class="p-link--external" href="https://www.yahoo.co.jp/" rel="noopener noreferrer" target="_blank">Yahoo! JAPAN</a>

実際の表示は、下記のExampleで確認してください。

vanillaframework.io

ポイント 4

Ubuntuを使っている人なら、font-familyubuntuフォントは、インストール済みのはずです。

scss/_base_typography.scss

//@include vf-b-typography-fontfaces;

Webフォントを読みに行かなくなります。

*1:前回のSpectre.cssにもあったと思います