Skip to content
This repository has been archived by the owner on Feb 7, 2023. It is now read-only.

Commit

Permalink
Continued to make patterns more dynamic with mustache
Browse files Browse the repository at this point in the history
  • Loading branch information
@frostyweather
frostyweather committed Dec 31, 2015
1 parent a861476 commit abc8457
Show file tree
Hide file tree
Showing 28 changed files with 296 additions and 257 deletions.
135 changes: 92 additions & 43 deletions dist/_data/data.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"text" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"url" : "#",
"cta" : "Call To Action",
"ariaLabel" : "Aria label",
"listItem" : "List Item",
"listItemNested" : "Nested List Item",
"term" : "Term",
Expand All @@ -16,8 +17,9 @@
"src" : "../../images/bootstrapthumb.jpg",
"alt" : "Bootstrap Thumbnail",
"caption" : "Caption Text",
"captionClass" : true,
"panelClass" : "panel-default",
"panelHeading" : false,
"panelFooter" : false,
"table" : {
"thead" : {
"th" : [
Expand All @@ -41,62 +43,109 @@
}
},
"wellClass" : "",
"wellText" : "Look I am in a well",
"mediaClass" : "",
"mediaLeft" : true,
"mediaRight" : false,
"mediaImage" : "../../images/bootstrapthumb64.jpg",
"embedClass" : "embed-responsive-16by9",
"mediaEmbed" : "//www.youtube.com/embed/zpOULjyy-n8?rel=0",
"inputClass" : "",
"inputAddon" : "Addon",
"inputAddonBefore" : "Addon",
"inputAddonAfter" : false,
"buttonClass" :"btn-default",
"breadcrumbs" : {
"breadList" : [
{ "listText" : "Link 1" },
{ "listText" : "Link 2" },
{ "listText" : "Link 3" }
]
},
"buttonDropdown" : {
"dropdownList" : [
{ "listText" : "Action" },
{ "listText" : "Another action" },
{ "listText" : "Something else here" },
{ "listText" : "Link 4" }
]
},
"breadcrumbs" : [
{
"url" : "#",
"text" : "Link 1"

},
{
"url" : "#",
"text" : "Link 2"
},
{
"url" : "#",
"text" : "Link 3"
}
],
"caret" : "caret",
"dropdownList" : [
{
"url" : "#",
"text" : "Action"
},
{
"url" : "#",
"text" : "Another action"
},
{
"url" : "#",
"text" : "Something else here"
},
{
"url" : "#",
"text" : "Link 4"
}
],
"navClass" : "",
"nav" : {
"navList" : [
{ "listText" : "Home" },
{ "listText" : "Profile" },
{ "listText" : "Link 3" }
]
},
"navList" : [
{
"url" : "#",
"text" : "Home"
},
{
"url" : "#",
"text" : "Profile"
},
{
"url" : "#",
"text" : "Messages"
}
],
"paginationClass" : "",
"pagination" : {
"paginationList" : [
{ "listText" : "1" },
{ "listText" : "2" },
{ "listText" : "3" },
{ "listText" : "4" },
{ "listText" : "5" }
]
},

"paginationList" : [
{
"url" : "#",
"text" : "1"
},
{
"url" : "#",
"text" : "2"
},
{
"url" : "#",
"text" : "3"
},
{
"url" : "#",
"text" : "4"
},
{
"url" : "#",
"text" : "5"
}
],
"pagerClass" : "",
"pager" : {
"pagerList" : [
{ "listText" : "Previous" },
{ "listText" : "Next" }
]
},

"pagerList" : [
{
"url" : "#",
"text" : "Previous"
},
{
"url" : "#",
"text" : "Next"
}
],
"buttonGroupClass" : "",
"buttonGroupList" : [
{ "text" : "Left" },
{ "text" : "Middle" },
{ "text" : "Right"}
],

"alertClass" : "",
"alertClass" : "alert-success",
"alertText" : "I am alerting you about something",
"dismissableAlert" : false,
"listGroupClass" : "",
"listGroup" : [
{ "text" : "Cras justo odio" },
Expand Down
3 changes: 1 addition & 2 deletions dist/_patterns/00-atoms/08-media/05-progress-bars-variants.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,8 @@
<p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
<div class="bs-example" data-example-id="animated-progress-bar">
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
</div>
<button type="button" class="btn btn-default bs-docs-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">Toggle animation</button>
</div>

<h2 id="progress-stacked">Stacked</h2>
Expand Down
6 changes: 6 additions & 0 deletions dist/_patterns/01-molecules/02-blocks/00-panels.mustache
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
<div class="panel {{panelClass}}">
{{# panelHeading }}
<div class="panel-heading">{{ panelHeading }}</h3></div>
{{/ panelHeading }}
<div class="panel-body">
{{ text }}
</div>
{{# panelFooter }}
<div class="panel-footer">{{ panelFooter}}</div>
{{/ panelFooter }}
</div>

2 changes: 1 addition & 1 deletion dist/_patterns/01-molecules/02-blocks/03-wells.mustache
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<div class="well {{ wellClass }}">
{{ wellText }}
{{ text }}
</div>
4 changes: 3 additions & 1 deletion dist/_patterns/01-molecules/03-media/00-jumbotron.mustache
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<div class="jumbotron">
<h1>{{ heading }}</h1>
<p>{{ text }}</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">{{ cta }}</a></p>
{{# cta }}
<p><a class="btn btn-primary btn-lg" href="{{ url }}" role="button">{{ cta }}</a></p>
{{/ cta }}
</div>

13 changes: 11 additions & 2 deletions dist/_patterns/01-molecules/03-media/01-media.mustache
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
<div class="media">
<div class="media-left">
<a href="#">
{{# mediaLeft }}
<div class="media-left {{ mediaClass }}">
<a href="{{ url }}">
<img class="media-object" src="{{ mediaImage }}" alt="{{ alt }}">
</a>
</div>
{{/ mediaLeft }}
<div class="media-body">
<h4 class="media-heading">{{ heading }}</h4>
{{ text }}
</div>
{{# mediaRight }}
<div class="media-right {{ mediaClass }}">
<a href="{{ url }}">
<img class="media-object" src="{{ mediaImage }}" alt="{{ alt }}">
</a>
</div>
{{/ mediaRight }}
</div>
56 changes: 1 addition & 55 deletions dist/_patterns/01-molecules/03-media/02-media-variants.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
</a>
</div>
</div>

<!-- Media Alignment -->
<p>The classes <code>.pull-left</code> and <code>.pull-right</code> also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to <code>.media-left</code> and <code>.media-right</code>, except that <code>.media-right</code> should be placed after the <code>.media-body</code> in the html.</p>
<h2 id="media-alignment">Media alignment</h2>
<p>The images or other media can be aligned top, middle, or bottom. The default is top aligned.</p>
Expand Down Expand Up @@ -88,58 +88,4 @@
<p>{{ text }}</p>
</div>
</div>
</div>

<h2 id="media-list">Media list</h2>
<p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
<div class="bs-example" data-example-id="media-list">
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="{{ mediaImage }}" alt="{{ alt }}">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{ heading }}</h4>
<p>{{ text }}</p>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="{{ mediaImage }}" alt="{{ alt }}">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
{{ text }}
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="{{ mediaImage }}" alt="{{ alt }}">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
{{ text }}
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="{{ mediaImage }}" alt="{{ alt }}">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
{{ text }}
</div>
</div>
</div>
</li>
</ul>
</div>
2 changes: 1 addition & 1 deletion dist/_patterns/01-molecules/03-media/03-responsive-embed.mustache
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<div class="embed-responsive embed-responsive-16by9">
<div class="embed-responsive {{ embedClass }}">
<iframe class="embed-responsive-item" src="{{ mediaEmbed }}" allowfullscreen></iframe>
</div>
4 changes: 2 additions & 2 deletions dist/_patterns/01-molecules/03-media/04-thumbnails-caption.mustache
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div class="thumbnail">
<img src="{{ src }}" alt="{{ alt }}">
{{# captionClass }}
{{# caption }}
<div class="caption">
{{{ caption }}}
</div>
{{/ captionClass }}
{{/ caption }}
</div>

9 changes: 7 additions & 2 deletions dist/_patterns/01-molecules/04-forms/00-input-groups.mustache
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
<div class="input-group {{inputClass}}">
<span class="input-group-addon" id="basic-addon1">{{ inputAddon }}</span>
<div class="input-group {{ inputClass }}">
{{# inputAddonBefore }}
<span class="input-group-addon">{{ inputAddonBefore }}</span>
{{/ inputAddonBefore }}
{{> atoms-input }}
{{# inputAddonAfter }}
<span class="input-group-addon">{{ inputAddonAfter }}</span>
{{/ inputAddonAfter }}
</div>


Expand Down
2 changes: 1 addition & 1 deletion dist/_patterns/01-molecules/04-forms/02-input-groups-checkbox.mustache
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="Checkbox for following text input">
<input type="checkbox" aria-label="{{ ariaLabel }}">
</span>
{{> atoms-input }}
</div><!-- /input-group -->
2 changes: 1 addition & 1 deletion dist/_patterns/01-molecules/04-forms/03-input-groups-radio.mustache
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="Radio button for following text input">
<input type="radio" aria-label="{{ ariaLabel }}">
</span>
{{> atoms-input }}
</div><!-- /input-group -->
Expand Down
9 changes: 4 additions & 5 deletions dist/_patterns/01-molecules/05-navigation/00-breadcrumbs.mustache
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
{{# breadcrumbs}}
<ol class="breadcrumb">
{{# breadList }}
<li><a href="#">{{ listText }}</a></li>
{{/ breadList }}
{{# breadcrumbs }}
<li><a href="{{ url }}">{{ text }}</a></li>
{{/ breadcrumbs }}
</ol>
{{/ breadcrumbs}}


8 changes: 4 additions & 4 deletions dist/_patterns/01-molecules/05-navigation/01-button-dropdown.mustache
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{{# buttonDropdown }}
<button type="button" class="btn {{ buttonClass }} dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ cta }} <span class="caret"></span></button>
<div class="btn-group">
<button type="button" class="btn {{ buttonClass }} dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ cta }} {{# caret }}<span class="{{ caret }}"></span>{{/ caret }}</button>
<ul class="dropdown-menu">
{{# dropdownList }}
<li><a href="#">{{ listText }}</a></li>
<li {{# separator }}role="separator"{{/ separator }} {{# listItemClass }} class="{{ listItemClass }}"{{/ listItemClass }}><a href="{{ url }}">{{ text }}</a></li>
{{/ dropdownList }}
</ul>
{{/ buttonDropdown }}
</div>
Loading

0 comments on commit abc8457

Please sign in to comment.