buttons docs

_config.yml

@@ -20,7 +20,7 @@ author:
 plugins:
   - jekyll-tidy
   - jekyll-contentblocks
-  #- jekyll-toc
+  - jekyll-toc
 
 exclude:
   - regenerate-images.sh
@@ -88,6 +88,55 @@ theme-colors:
   light: '#f8f9fa'
   dark: '#343a40'
 
+button-types:
+  primary: 'Primary'
+  secondary: 'Secondary'
+  success: 'Success'
+  info: 'Info'
+  warning: 'Warning'
+  danger: 'Danger'
+
+social-buttons:
+  facebook:
+    icon: fa fa-facebook
+    title: Facebook
+  twitter:
+    icon: fa fa-twitter
+    title: Twitter
+  google:
+    icon: fa fa-google
+    title: Google
+  youtube:
+    icon: fa fa-youtube
+    title: Youtube
+  vimeo:
+    icon: fa fa-vimeo
+    title: Vimeo
+  dribbble:
+    icon: fa fa-dribbble
+    title: Dribble
+  github:
+    icon: fa fa-github
+    title: Github
+  instagram:
+    icon: fa fa-instagram
+    title: Instagram
+  pinterest:
+    icon: fa fa-pinterest
+    title: Pinterest
+  vk:
+    icon: fa fa-vk
+    title: VKontakte
+  rss:
+    icon: fa fa-rss
+    title: RSS
+  flickr:
+    icon: fa fa-flickr
+    title: Flickr
+  bitbucket:
+    icon: fa fa-bitbucket
+    title: Bitbucket
+
 google-maps-key: AIzaSyBEJy4UvF-JfcNciWlvlznyDlUckcspiD4
 google-maps-url: https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzPLFw8zGhQ750Xk
 

_data/menu.yml

@@ -41,6 +41,11 @@ components:
       icon: fe fe-shopping-cart
       url: blog.html
 
+forms:
+  name: Forms
+  icon: fe fe-check-square
+  url: form-elements.html
+
 profile:
   name: Profile
   icon: fe fe-user
@@ -51,12 +56,8 @@ gallery:
   icon: fe fe-image
   url: gallery.html
 
-forms:
-  name: Forms
-  icon: fe fe-check-square
-  url: form-elements.html
 
-#docs:
+docs:
-#  name: Docs
+  name: Docs
-#  icon: fe fe-file
+  icon: fe fe-file-text
-#  url: docs/index.html
+  url: docs/index.html

_docs/buttons.md

@@ -2,15 +2,120 @@
 title: Buttons
 ---
 
-### Pill buttons
+Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
 
-Add `.btn-pill` to any button to make them more rounded.
+### Button tag
+
+The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
 
 {% example html %}
-<a href="#" class="btn btn-pill btn-primary">Primary</a>
+<a href="#" class="btn btn-primary" role="button">Link</a>
-<a href="#" class="btn btn-pill btn-secondary">Secondary</a>
+<button class="btn btn-primary">Button</button>
-<a href="#" class="btn btn-pill btn-success">Success</a>
+<input type="button" class="btn btn-primary" value="Input" />
-<a href="#" class="btn btn-pill btn-info">Info</a>
+<input type="submit" class="btn btn-primary" value="Submit" />
-<a href="#" class="btn btn-pill btn-warning">Warning</a>
+<input type="reset" class="btn btn-primary" value="Reset" />
-<a href="#" class="btn btn-pill btn-danger">Danger</a>
+{% endexample %}
+
+### Button variations
+
+{% example html %}
+{% for button in site.button-types %}
+<a href="#" class="btn btn-{{ button[0] }}">{{ button[1] }}</a>
+{% endfor %}
+<a href="#" class="btn btn-link">Link</a>
+{% endexample %}
+
+
+### Color variations
+
+{% example html %}
+{% for button in site.colors %}
+<a href="#" class="btn btn-{{ button[0] }}">{{ button[0] }}</a>
+{% endfor %}
+{% endexample %}
+
+### Square buttons
+
+Add `.btn-square` to button to remove border-radius.
+
+{% example html %}
+{% for button in site.button-types %}
+<a href="#" class="btn btn-square btn-{{ button[0] }}">{{ button[1] }}</a>
+{% endfor %}
+{% endexample %}
+
+### Pill buttons
+
+Add `.btn-pill` class to any button to make them more rounded.
+
+{% example html %}
+{% for button in site.button-types %}
+<a href="#" class="btn btn-pill btn-{{ button[0] }}">{{ button[1] }}</a>
+{% endfor %}
+{% endexample %}
+
+### Outline buttons
+
+In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
+
+{% example html %}
+{% for button in site.button-types %}
+<a href="#" class="btn btn-outline-{{ button[0] }}">{{ button[1] }}</a>
+{% endfor %}
+{% endexample %}
+
+### Button size
+
+Add `.btn-lg` or `.btn-sm` for additional sizes.
+
+{% example html %}
+<button type="button" class="btn btn-primary btn-lg">Large button</button>
+<button type="button" class="btn btn-secondary btn-lg">Large button</button>
+{% endexample %}
+
+{% example html %}
+<button type="button" class="btn btn-primary btn-sm">Small button</button>
+<button type="button" class="btn btn-secondary btn-sm">Small button</button>
+{% endexample %}
+
+Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.
+
+{% example html %}
+<button type="button" class="btn btn-primary btn-block">Block level button</button>
+<button type="button" class="btn btn-secondary btn-block">Block level button</button>
+{% endexample %}
+
+### Button with icon
+
+Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons.
+
+{% example html wrapper=btn-list %}
+<button type="button" class="btn btn-dark"><i class="fe fe-upload mr-2"></i>Upload</button>
+<button type="button" class="btn btn-warning"><i class="fe fe-heart mr-2"></i>I like</button>
+<button type="button" class="btn btn-success"><i class="fe fe-check mr-2"></i>I agree</button>
+<button type="button" class="btn btn-outline-primary"><i class="fe fe-plus mr-2"></i>More</button>
+<button type="button" class="btn btn-danger"><i class="fe fe-link mr-2"></i>Link</button>
+<button type="button" class="btn btn-info"><i class="fe fe-message-circle mr-2"></i>Comment</button>
+{% endexample %}
+
+### Social buttons
+
+{% example html wrapper=btn-list %} 
+{% for button in site.social-buttons %}
+<button type="button" class="btn btn-{{ button[0] }}"><i class="{{ button[1].icon }} mr-2"></i>{{ button[1].title }}</button>
+{% endfor %}
+{% endexample %}
+
+### Icon buttons
+
+Icon only button. Add `.btn-icon` class to remove unnecessary padding from button.
+
+{% example html wrapper=btn-list %} 
+<button type="button" class="btn btn-icon btn-primary"><i class="fe fe-activity"></i></button>
+<button type="button" class="btn btn-icon btn-primary btn-github"><i class="fe fe-github"></i></button>
+<button type="button" class="btn btn-icon btn-primary btn-success"><i class="fe fe-bell"></i></button>
+<button type="button" class="btn btn-icon btn-primary btn-warning"><i class="fe fe-star"></i></button>
+<button type="button" class="btn btn-icon btn-primary btn-danger"><i class="fe fe-trash"></i></button>
+<button type="button" class="btn btn-icon btn-primary btn-purple"><i class="fe fe-bar-chart"></i></button>
+<button type="button" class="btn btn-icon btn-primary btn-secondary"><i class="fe fe-git-merge"></i></button>
 {% endexample %}

_plugins/jekyll-example.rb

@@ -55,7 +55,7 @@ eos
       end
 
       def example(output)
-        "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + "#{output}" + (@options[:columns] ? "</div>\n" : "") + "\n</div>"
+        "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + "#{output}" + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + "\n</div>"
       end
 
       def remove_example_classes(code)

assets/plugins/iconfonts/plugin.css

@@ -1472,22 +1472,27 @@
 }
 
 .wi-rotate-90 {
+  -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 
 .wi-rotate-180 {
+  -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 
 .wi-rotate-270 {
+  -webkit-transform: rotate(270deg);
   transform: rotate(270deg);
 }
 
 .wi-flip-horizontal {
+  -webkit-transform: scale(-1, 1);
   transform: scale(-1, 1);
 }
 
 .wi-flip-vertical {
+  -webkit-transform: scale(1, -1);
   transform: scale(1, -1);
 }
 

assets/plugins/iconfonts/plugin.min.css

@@ -1472,22 +1472,27 @@
 }
 
 .wi-rotate-90 {
+  -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 
 .wi-rotate-180 {
+  -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 
 .wi-rotate-270 {
+  -webkit-transform: rotate(270deg);
   transform: rotate(270deg);
 }
 
 .wi-flip-horizontal {
+  -webkit-transform: scale(-1, 1);
   transform: scale(-1, 1);
 }
 
 .wi-flip-vertical {
+  -webkit-transform: scale(1, -1);
   transform: scale(1, -1);
 }
 

assets/scss/_variables.scss

@@ -70,7 +70,7 @@ $white: #fff;
 $primary: $blue;
 $secondary: $gray-600;
 $success: $green;
-$info: $lime;
+$info: $azure;
 $warning: $yellow;
 $danger: $red;
 $light: $gray-100;
@@ -133,6 +133,8 @@ $kbd-bg: $gray-800;
 
 $pre-color: $gray-900;
 
+// Yiq
+$yiq-contrasted-threshold: 190;
 $yiq-text-dark: $body-color;
 $yiq-text-light: $white;
 

assets/scss/dashboard/_button.scss

@@ -4,6 +4,17 @@
 	letter-spacing: .03em;
 	font-size: px2rem(13px);
 	min-width: px2rem(38px);
+
+	i {
+		font-size: 1rem;
+		vertical-align: -2px;
+	}
+}
+
+.btn-icon {
+	padding-left: .5rem;
+	padding-right: .5rem;
+	text-align: center;
 }
 
 .btn-secondary {
@@ -15,12 +26,22 @@
 	border-radius: 10rem;
 }
 
+.btn-square {
+	border-radius: 0;
+}
+
 @each $vendor, $color in $social-colors {
 	.btn-#{$vendor} {
 		@include button-variant($color, $color);
 	}
 }
 
+@each $vendor, $color in $colors {
+	.btn-#{$vendor} {
+		@include button-variant($color, $color);
+	}
+}
+
 .btn-option {
 	background: transparent;
 	color: $text-muted;
@@ -45,3 +66,13 @@
 	min-width: px2rem(44px);
 	font-weight: 400;
 }
+
+.btn-list {
+	margin-bottom: -.5rem;
+	font-size: 0;
+
+	.btn {
+		margin-right: .5rem;
+		margin-bottom: .5rem;
+	}
+}