library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add documentation icons

Browse Source
This commit is contained in:
Jeremy Thomas 2018-04-10 22:38:00 +01:00
parent 999c284dcc
commit a88b024dcc
14 changed files with 139 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_data/icons.json
View File

@ -1,6 +1,6 @@
{
"fontawesome4": "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
"fontawesome5": "https://use.fontawesome.com/releases/v5.0.6/js/all.js",
"fontawesome5": "https://use.fontawesome.com/releases/v5.0.7/js/all.js",
"iconic": "https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css",
"ionicons": "https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css",
"mdi": "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css"

15
docs/_data/links.json
View File

@ -12,6 +12,8 @@
"overview": {
"name": "Overview",
"subtitle": "An overview of what Bulma as a <strong>framework</strong> is all about",
"color": "primary",
"icon": "eye",
"path": "/documentation/overview"
},
"overview-start": {
@ -62,6 +64,8 @@
"modifiers": {
"name": "Modifiers",
"subtitle": "An <strong>easy-to-read</strong> naming system designed for humans",
"color": "info",
"icon": "cogs",
"path": "/documentation/modifiers"
},
"modifiers-syntax": {
@ -92,6 +96,8 @@
"columns": {
"name": "Columns",
"subtitle": "The power of <strong>Flexbox</strong> in a simple interface",
"color": "star",
"icon": "columns",
"path": "/documentation/columns"
},
"columns-basics": {
@ -127,6 +133,8 @@
"layout": {
"name": "Layout",
"subtitle": "Design the <strong>structure</strong> of your webpage with these CSS classes",
"color": "success",
"icon": "warehouse",
"path": "/documentation/layout"
},
"layout-container": {
@ -167,6 +175,9 @@
"form": {
"name": "Form",
"subtitle": "The indispensable <strong>form controls</strong>, designed for maximum clarity",
"color": "link",
"icon_brand": "true",
"icon": "wpforms",
"path": "/documentation/form"
},
"form-general": {
@ -207,6 +218,8 @@
"elements": {
"name": "Elements",
"subtitle": "Essential interface elements that only require a <strong>single CSS class</strong>",
"color": "orange",
"icon": "cube",
"path": "/documentation/elements"
},
"elements-box": {
@ -267,6 +280,8 @@
"components": {
"name": "Components",
"subtitle": "Advanced multi-part components with lots of possibilities",
"color": "danger",
"icon": "cubes",
"path": "/documentation/components"
},
"components-breadcrumb": {

10
docs/_includes/components/links.html
View File

@ -15,7 +15,15 @@
{% endif %}
<a class="bd-link" href="{{ site.url }}{{ link.path }}">
<h2 class="bd-link-name">
<span class="bd-link-counter"></span>
<figure class="bd-link-figure">
{% if include.icons %}
<span class="bd-link-icon has-text-{{ link.color }}">
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
</span>
{% else %}
<span class="bd-link-counter"></span>
{% endif %}
</figure>
{{ link.name }}
</h2>
<p class="bd-link-subtitle">

43
docs/_includes/global/navbar.html
View File

@ -43,39 +43,38 @@
{% endfor %}
<div class="navbar-item has-dropdown is-hoverable">
<div class="navbar-link">
More
</div>
<div id="moreDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
{% for item in site.data.global.more_items %}
<a class="navbar-item {% if page.route == item.id %}is-active{% endif %}" href="{{ site.url }}/{{ item.id }}/">
<div class="media">
<div class="media-left">
<span class="icon is-large has-text-{{ item.color }}">
<i class="{{ item.fa_type }} {{ item.fa_icon }} fa-2x"></i>
</span>
</div>
<div class="media-content">
<p>
<strong>{{ item.title }}</strong>
<br>
<small>{{ item.description }}</small>
</p>
</div>
</div>
{% assign link = site.data.links.by_id['more'] %}
<a class="navbar-link" href="{{ site.url }}{{ link.path }}">
{{ link.name }}
</a>
<div id="moreDropdown" class="navbar-dropdown is-boxed">
{% for link_id in site.data.links.more %}
{% assign link = site.data.links.by_id[link_id] %}
<a class="navbar-item {% if page.route == link_id %}is-active{% endif %}" href="{{ site.url }}/{{ link.path }}">
<span>
<span class="icon has-text-{{ link.color }}">
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
</span>
<strong>{{ link.name }}</strong>
<br>
{{ link.subtitle }}
</span>
</a>
{% unless forloop.last %}
<hr class="navbar-divider">
{% endunless %}
{% endfor %}
</div>
</div>
</div>
<div class="navbar-end">
<a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.github }}" target="_blank">
<a class="navbar-item is-hidden-mobile" href="{{ site.data.meta.github }}" target="_blank">
<span class="icon" style="color: #333;">
<i class="fab fa-lg fa-github-alt"></i>
</span>
</a>
<a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.twitter }}" target="_blank">
<a class="navbar-item is-hidden-mobile" href="{{ site.data.meta.twitter }}" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fab fa-lg fa-twitter"></i>
</span>

7
docs/_includes/index/start.html
View File

@ -1,4 +1,4 @@
{% assign docs_link = site.data.links.by_id['documentation'] %}
{% assign docs_link = site.data.links.by_id['overview-start'] %}
{% assign docs_url = site.url | append: docs_link.path %}
<section class="section is-large">
@ -6,9 +6,12 @@
<header class="bd-index-header">
<h3 class="title is-3">
<a href="{{ docs_url }}">
And <strong>much more!</strong>
And so <strong>much more</strong>
</a>
</h3>
<h4 class="subtitle is-4">
Join more than <strong>100,000</strong> developers
</h4>
</header>
<div class="hero-buttons">

13
docs/_sass/header.sass
View File

@ -18,6 +18,17 @@
background-color: darken($twitter, 5%)
color: $white
#moreDropdown
.navbar-item
padding-left: 3em
position: relative
.icon
left: 1rem
position: absolute
text-align: center
top: 0.375rem
width: 1em
#moreDropdownBootstrap
.icon
color: $bootstrap
@ -32,7 +43,7 @@
.navbar-item
white-space: normal
#moreDropdown
width: 18rem
width: 14rem
.navbar-item
padding-right: 1rem
white-space: normal

19
docs/_sass/specific.sass
View File

@ -10,35 +10,38 @@
color: $text-light
display: block
font-size: $size-5
padding: 1rem 3rem 1.5rem
padding: 1rem 3rem 1.5rem 5rem
position: relative
transition-duration: $speed
transition-property: background-color, color
strong
font-weight: $weight-semibold
&:hover
background-color: $white-bis
&.bd-is-post
padding-left: 5rem
.bd-link-name
line-height: 1.25
margin-bottom: 0.25em
position: relative
.bd-link-figure
position: absolute
right: calc(100% + 0.5em)
text-align: center
top: 0
min-width: 1.5em
.bd-link-counter
color: $link
display: block
counter-increment: bd-links
font-weight: $weight-normal
position: absolute
right: calc(100% + 0.625em)
&::before
content: counter(bd-links)
.bd-link-icon
display: block
font-size: 2rem
position: absolute
right: calc(100% + 0.5em)
text-align: center
width: 1.5em
+desktop

3
docs/_sass/sponsors.sass
View File

@ -37,6 +37,9 @@
.bd-partners-list
align-items: flex-start
display: flex
margin-left: auto
margin-right: auto
max-width: 1130px
.bd-partner
&.bd-is-sponsor
flex-grow: 1

8
docs/blog.html
View File

@ -40,9 +40,11 @@ breadcrumb:
{% for post in site.posts %}
<a class="bd-link bd-is-post" href="{{ post.url }}">
<h2 class="bd-link-name">
<span class="bd-link-icon has-text-{{ post.color }}">
<i class="{% if post.icon_brand %}fab{% elsif post.icon_regular %}far{% else %}fas{% endif %} fa-{{ post.icon }}"></i>
</span>
<figure class="bd-link-figure">
<span class="bd-link-icon has-text-{{ post.color }}">
<i class="{% if post.icon_brand %}fab{% elsif post.icon_regular %}far{% else %}fas{% endif %} fa-{{ post.icon }}"></i>
</span>
</figure>
{{ post.name }}
</h2>
<time class="bd-link-subtitle" datetime="{{ post.date | date_to_xmlschema }}">

53
docs/css/bulma-docs.css
View File

@ -6426,6 +6426,10 @@ body.has-navbar-fixed-bottom {
min-height: 3.25rem;
}
.navbar-brand a.navbar-item:hover {
background-color: transparent;
}
.navbar-tabs {
-webkit-overflow-scrolling: touch;
max-width: 100vw;
@ -6510,7 +6514,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
}
.navbar-item {
display: flex;
display: block;
flex-grow: 0;
flex-shrink: 0;
}
@ -6573,10 +6577,10 @@ a.navbar-item:hover, a.navbar-item.is-active,
}
.navbar-divider {
background-color: #dbdbdb;
background-color: whitesmoke;
border: none;
display: none;
height: 1px;
height: 2px;
margin: 0.5rem 0;
}
@ -6664,6 +6668,9 @@ a.navbar-item:hover, a.navbar-item.is-active,
align-items: center;
display: flex;
}
.navbar-item {
display: flex;
}
.navbar-item.has-dropdown {
align-items: stretch;
}
@ -10623,6 +10630,19 @@ svg {
color: white;
}
#moreDropdown .navbar-item {
padding-left: 3em;
position: relative;
}
#moreDropdown .icon {
left: 1rem;
position: absolute;
text-align: center;
top: 0.375rem;
width: 1em;
}
#moreDropdownBootstrap .icon {
color: #6f5499;
}
@ -10639,7 +10659,7 @@ svg {
white-space: normal;
}
#moreDropdown {
width: 18rem;
width: 14rem;
}
#moreDropdown .navbar-item {
padding-right: 1rem;
@ -10916,7 +10936,8 @@ svg {
color: #7a7a7a;
display: block;
font-size: 1.25rem;
padding: 1rem 3rem 1.5rem;
padding: 1rem 3rem 1.5rem 5rem;
position: relative;
transition-duration: 86ms;
transition-property: background-color, color;
}
@ -10929,22 +10950,25 @@ svg {
background-color: #fafafa;
}
.bd-link.bd-is-post {
padding-left: 5rem;
}
.bd-link-name {
line-height: 1.25;
margin-bottom: 0.25em;
position: relative;
}
.bd-link-figure {
position: absolute;
right: calc(100% + 0.5em);
text-align: center;
top: 0;
min-width: 1.5em;
}
.bd-link-counter {
color: #3273dc;
display: block;
counter-increment: bd-links;
font-weight: 400;
position: absolute;
right: calc(100% + 0.625em);
}
.bd-link-counter::before {
@ -10952,10 +10976,8 @@ svg {
}
.bd-link-icon {
display: block;
font-size: 2rem;
position: absolute;
right: calc(100% + 0.5em);
text-align: center;
width: 1.5em;
}
@ -12480,6 +12502,9 @@ svg {
.bd-partners-list {
align-items: flex-start;
display: flex;
margin-left: auto;
margin-right: auto;
max-width: 1130px;
}
.bd-partner.bd-is-sponsor {
flex-grow: 1;

2
docs/documentation.html
View File

@ -6,4 +6,4 @@ breadcrumb:
- documentation
---
{% include components/links.html %}
{% include components/links.html icons=true %}

3
docs/made-with-bulma.html
View File

@ -45,7 +45,8 @@ images:
</a>
{% endcapture %}
<h2 class="title">6 badges available</h2>
{% include elements/anchor.html name="6 badges available" %}
<div class="content">
<p>
The <code>Made with Bulma</code> badge is available in <strong>6 different</strong> versions:

8
docs/more.html
View File

@ -35,9 +35,11 @@ breadcrumb:
{% assign link = site.data.links.by_id[link_id] %}
<a class="bd-link bd-is-post" href="{{ site.url }}{{ link.path }}">
<h2 class="bd-link-name">
<span class="bd-link-icon has-text-{{ link.color }}">
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
</span>
<figure class="bd-link-figure">
<span class="bd-link-icon has-text-{{ link.color }}">
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
</span>
</figure>
{{ link.name }}
</h2>
<p class="bd-link-subtitle">

13
sass/components/navbar.sass
View File

@ -33,7 +33,8 @@ $navbar-dropdown-item-hover-background-color: $background !default
$navbar-dropdown-item-active-color: $link !default
$navbar-dropdown-item-active-background-color: $background !default
$navbar-divider-background-color: $border !default
$navbar-divider-background-color: $background !default
$navbar-divider-height: 2px !default
=navbar-fixed
left: 0
@ -124,6 +125,11 @@ body
flex-shrink: 0
min-height: $navbar-height
.navbar-brand
a.navbar-item
&:hover
background-color: transparent
.navbar-tabs
+overflow-touch
max-width: 100vw
@ -155,7 +161,7 @@ a.navbar-item,
color: $navbar-item-hover-color
.navbar-item
display: flex
display: block
flex-grow: 0
flex-shrink: 0
img
@ -201,7 +207,7 @@ a.navbar-item,
background-color: $navbar-divider-background-color
border: none
display: none
height: 1px
height: $navbar-divider-height
margin: 0.5rem 0
+touch
@ -279,6 +285,7 @@ a.navbar-item,
align-items: center
display: flex
.navbar-item
display: flex
&.has-dropdown
align-items: stretch
&.has-dropdown-up