Permalink
Browse files

Explain mixins

1 parent e66684c commit aaaa9d7902b1226de29b27fc2943d65da221e9e7 @jgthms committed Jan 4, 2017
@@ -14,7 +14,9 @@
<div class="control is-grouped">
<div class="control has-icon is-expanded">
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
- <i class="fa fa-envelope"></i>
+ <span class="icon is-small">
+ <i class="fa fa-envelope"></i>
+ </span>
</div>
<div class="control">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button is-white is-outlined">
@@ -10,15 +10,18 @@
<a class="nav-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modular/">
Modular
</a>
- <a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
- Variables
- </a>
<a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
Responsiveness
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
Functions
</a>
+ <a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
+ Variables
+ </a>
+ <a class="nav-item is-tab {% if page.doc-subtab == 'mixins' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/mixins/">
+ Mixins
+ </a>
</div>
</div>
</nav>
@@ -3,5 +3,6 @@
{% include head.html %}
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
{{ content }}
+ {% include footer.html %}
</body>
</html>
@@ -187,10 +187,15 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1)
animation-delay: 1.2s
#npm
+ align-items: center
animation: fadeIn 500ms both
animation-delay: 1.4s
+ background: none
+ display: flex
+ justify-content: center
margin: -10px 0 20px
code
+ background: $background
border-radius: $radius
color: $primary
display: inline-block
@@ -6525,12 +6525,17 @@ svg {
}
#npm {
+ align-items: center;
animation: fadeIn 500ms both;
animation-delay: 1.4s;
+ background: none;
+ display: flex;
+ justify-content: center;
margin: -10px 0 20px;
}
#npm code {
+ background: whitesmoke;
border-radius: 3px;
color: #00d1b2;
display: inline-block;
@@ -0,0 +1,71 @@
+---
+layout: documentation
+doc-tab: overview
+doc-subtab: mixins
+---
+
+{% include subnav-overview.html %}
+
+<section class="section">
+ <div class="container">
+ <h1 class="title">Mixins</h1>
+ <h2 class="subtitle">Utility mixins for custom elements and responsive helpers</h2>
+
+ <hr>
+
+<table class="table is-bordered">
+<tr>
+ <td><code>=arrow($color)</code></td>
+ <td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
+</tr>
+<tr>
+ <td><code>=block</code></td>
+ <td>Defines a margin-bottom of 1.5rem, expect when the element is the last child. Used for almost all block elements.</td>
+</tr>
+<tr>
+ <td><code>=clearfix</code></td>
+ <td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
+</tr>
+<tr>
+ <td><code>=center($size)</code></td>
+ <td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
+</tr>
+<tr>
+ <td><code>=delete</code></td>
+ <td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
+</tr>
+<tr>
+ <td><code>=fa($size, $dimensions)</code></td>
+ <td>Sets the style of a Font Awesome icon container.</td>
+</tr>
+<tr>
+ <td><code>=hamburger($dimensions)</code></td>
+ <td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
+</tr>
+<tr>
+ <td><code>=loader</code></td>
+ <td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
+</tr>
+<tr>
+ <td><code>=overflow-touch</code></td>
+ <td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
+</tr>
+<tr>
+ <td><code>=overlay($offset: 0)</code></td>
+ <td>Makes the element overlay its parent container, like the transparent modal background.</td>
+</tr>
+<tr>
+ <td><code>=placeholder</code></td>
+ <td>Sets the styles of an input placeholder.</td>
+</tr>
+<tr>
+ <td><code>=unselectable</code></td>
+ <td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
+</tr>
+</table>
+
+ <div class="content">
+ <p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
+ </div>
+ </div>
+</section>
View
@@ -24,7 +24,7 @@ <h2 id="modern-framework" class="subtitle">
</h2>
<pre id="npm"><code>npm install bulma</code></pre>
<div id="ghbtns" class="block">
- <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="150px" height="30px"></iframe>
+ <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
</div>
{% include carbon.html %}
@@ -163,18 +163,6 @@
&:#{$placeholder}-placeholder
@content
-=replace($background, $width, $height)
- background-color: $background
- background-position: center center
- background-repeat: no-repeat
- background-size: $width $height
- display: block
- height: $height
- outline: none
- overflow: hidden
- text-indent: -290486px
- width: $width
-
=unselectable
-webkit-touch-callout: none
-webkit-user-select: none

0 comments on commit aaaa9d7

Please sign in to comment.