Bulma / Buefy

[hdknr]

Bulma

• Overview (Getting started, Customize, CSS Classes, Modularity, Responsiveness, Variables, Colors, Functions, Mixins,)
• Layout (Container, Level, Media Object, Hero, Section, Footer, Tiles,)
• Columns (Basics, Sizes, Responsiveness, Nesting, Gap, Options,)
• Components (Breadcrumb, Card, Dropdown, Menu, Message, Modal, Navbar, Pagination, Panel, Tabs,)
• Element (Box, Button, Content, Delete, Icon, Image, Notification, Progress bars, Table, Tag, Title,)
• Form (General, Input, Textarea, Select, Checkbox, Radio, File,)
• Modifiers (Syntax, Helpers, Responsive helpers, Color helpers, Typography helpers,)

Bulma Extensions

• Layout (Divider)
• Form (Checkradio, IconPicker, Slider, Swithc, TagsInput)
• Elements (Badge, Page-Loader, Tooltip )
• Components (Accordion,Calendar, Carousel, Pricing table, Quickview, Steps, Timeline)

Buefy

• datepicker
• select

Samples

• Free Bulma Templates

[hdknr]

Overview

• Colors (White, Black, Light, Dark, Primary, Link, Info, Success, Warning, Danger / Black bis, Black ter, Grey darker, Grey dark, Grey light, Grey lighter, White ter, White bis,

Columns

カラムレイアウト:

• 親にcolumns を付与
• 並べたい子供に column を付与
• モバイルには適応なし : 必要であれば、 親に columns is-mobile を付与

その他:

• サイズ
• ラッピング/ブレイク:is-multiline

Component

• Card (ヘッダー(タイトル,アイコン), イメージ, コンテンツ, フッター(アイテム))
• Panel (ヘッディング, タブ, ブロック(コントロール、インプット、ボタン, アイコン))
• Message (メッセージ)

Element

• Button (サイズ、色、アウトライン、反転、状態, アイコン, グループ、アドオン、ボタンリスト)
• Delete (Tag, Notification, Messageと使う)
• Icon (サイズ、色 / Font Awesome , Material Design Icons, Open Iconic, Ionicons)
• Box (単純コンテナ + 影|ボーダー|角丸|パディング)

Modifilers

• Helperクラス (float, spacing, other...)

[hdknr]

Buefy

• アイコンのデフォルトは Material Design Icons : 変えるには