Skip to content

Commit

Permalink
feat(doc): bootswatch sidemenu
Browse files Browse the repository at this point in the history 
externalized each section
back to top button, shows on scroll
sidemenu becomes fixed when page header disappears
  • Loading branch information
@ygatesoupe
ygatesoupe committed Jan 12, 2016
1 parent e29c12d commit d3ddfa7
Show file tree
Hide file tree
Showing 17 changed files with 996 additions and 809 deletions.
9 changes: 8 additions & 1 deletion Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,13 @@ module.exports = function (grunt) {
],
dest: 'dist/js/<%= pkg.name %>.js'
},
docsJs: {
src: [
'.tmpdocs/assets/js/src/application.js',
'.tmpdocs/assets/js/src/application-orange.js'
],
dest: '.tmpdocs/assets/js/src/application.js'
}
/* end mod */
},

Expand Down Expand Up @@ -653,7 +660,7 @@ module.exports = function (grunt) {
// Docs task.
/* boosted mod */
grunt.registerTask('docs-css', ['sass:docs','postcss:docs', 'postcss:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
grunt.registerTask('docs-js', ['replace:docsOrangeJs', 'uglify:docsJs']);
grunt.registerTask('docs-js', [/*'replace:docsOrangeJs',*/ 'concat:docsJs', 'uglify:docsJs']);
/* end mod */
grunt.registerTask('lint-docs-js', ['jscs:assets']);
/* boosted mod */
Expand Down
171 changes: 171 additions & 0 deletions docs-orange/_includes/boostwatch/buttons.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
<!-- Buttons
================================================== -->

<h2 id="buttons" class="">Buttons</h2>
<h3>Default</h3>
<p class="">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>

<h3>Hover</h3>
<p class="">
<button type="button" class="btn btn-default hover">Default</button>
<button type="button" class="btn btn-primary hover">Primary</button>
<button type="button" class="btn btn-success hover">Success</button>
<button type="button" class="btn btn-info hover">Info</button>
<button type="button" class="btn btn-warning hover">Warning</button>
<button type="button" class="btn btn-danger hover">Danger</button>
<button type="button" class="btn btn-link hover">Link</button>
</p>

<h3>Pressed</h3>
<p class="">
<button type="button" class="btn btn-default active">Default</button>
<button type="button" class="btn btn-primary active">Primary</button>
<button type="button" class="btn btn-success active">Success</button>
<button type="button" class="btn btn-info active">Info</button>
<button type="button" class="btn btn-warning active">Warning</button>
<button type="button" class="btn btn-danger active">Danger</button>
<button type="button" class="btn btn-link active">Link</button>
</p>

<h3>Disabled</h3>
<p class="">
<button type="button" class="btn btn-default disabled">Default</button>
<button type="button" class="btn btn-primary disabled">Primary</button>
<button type="button" class="btn btn-success disabled">Success</button>
<button type="button" class="btn btn-info disabled">Info</button>
<button type="button" class="btn btn-warning disabled">Warning</button>
<button type="button" class="btn btn-danger disabled">Danger</button>
<button type="button" class="btn btn-link disabled">Link</button>
</p>

<h3>Dropdowns</h3>
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret" aria-hidden="true"></span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>

<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret" aria-hidden="true"></span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>

<div class="btn-group">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret" aria-hidden="true"></span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>

<div class="btn-group">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret" aria-hidden="true"></span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>

<div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret" aria-hidden="true"></span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>

<h3>Sizes</h3>
<p class="">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
</p>

<p class="">
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>


<p class="">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default">Left</a>
<a href="#" class="btn btn-default">Middle</a>
<a href="#" class="btn btn-default">Right</a>
</div>
</p>

<p class="">
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>

<div class="btn-group">
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-default">7</button>
</div>

<div class="btn-group">
<button type="button" class="btn btn-default">8</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</div>
</p>

<p class="">
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
</div>
</p>
16 changes: 16 additions & 0 deletions docs-orange/_includes/boostwatch/containers.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!-- Containers
================================================== -->
<h2 id="container" class="">Containers</h2>
<h3>Cards</h3>
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
42 changes: 42 additions & 0 deletions docs-orange/_includes/boostwatch/dialogs.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!-- Dialogs
================================================== -->
<h2 id="dialogs" class="">Dialogs</h2>
<div class="row">
<div class="col-lg-10 col-lg-offset-2">
<h3>Popovers</h3>
<div class="">
<button title="" data-original-title="" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>

<button title="" data-original-title="" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>

<button title="" data-original-title="" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>

<button title="" data-original-title="" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
</div>
<h3>Tooltips</h3>
<div class="">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
</div>
</div>
</div>

<div id="source-modal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Source Code</h4>
</div>
<div class="modal-body">
<pre></pre>
</div>
</div>
</div>
</div>
Loading

0 comments on commit d3ddfa7

Please sign in to comment.