Navigation for adaptive web experiences can be tricky. Top navigations are typical on desktop sites, but mobile screen sizes don't give us the luxury of space. We're dealing with this situation by creating a simple menu anchor that toggles the main navigation on small screens. This is just one method. Bagcheck and Contents Magazine add an anchor in the header that jumps users to the navigation which is placed in the footer. This solution works well because it doesn't require any Javascript in order to work. Other methods exist too. For example, ESPN's mobile navigation overlays the main content of the page.
The nav is only hidden when a certain level of javascript is supported in order to ensure that users with little/poor javascript support can still access the navigation. Once the screen size is large enough to accommodate the nav, we show the main navigation links and hide the menu anchor.
Search is an incredibly important priority, especially for mobile. It is a great idea to give users the ability to jump directly to what they are looking for without forcing them to wade through your site's navigation. Check out the Burton and Yelp mobile sites for great examples of experiences that prioritize search.
The article header should be no more than 140 characters.
"
27 | },
28 | {
29 | "el": ".block-hero",
30 | "title" : "Hero",
31 | "comment": "The hero area highlights one major story using a large image and a captivating headline.
"
32 | }
33 | ]
34 | };
--------------------------------------------------------------------------------
/dist/_data/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "title" : "Pattern Lab",
3 | "heading" : "Page Header",
4 | "subheading" : "Subtext For Header",
5 | "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.",
6 | "placeholder" : "Placeholder Text",
7 | "url" : "#",
8 | "cta" : "Call To Action",
9 | "ariaLabel" : "Aria label",
10 | "listItem" : "List Item",
11 | "listItemNested" : "Nested List Item",
12 | "term" : "Term",
13 | "definition" : "This is the definition of the term.",
14 | "badge" : "23",
15 | "label" : "New Label",
16 | "labelClass" : "label-default",
17 | "progressBarClass" : "",
18 | "progressCompleteText" : "60% Complete",
19 | "progressMinWidth" : false,
20 | "removeProgressText" : true,
21 | "ariaMin" : 0,
22 | "ariaMax" : 100,
23 | "ariaNow" : 60,
24 | "src" : "../../images/bootstrapthumb.jpg",
25 | "alt" : "Bootstrap Thumbnail",
26 | "caption" : "Caption Text",
27 | "panelClass" : "panel-default",
28 | "panelHeading" : false,
29 | "panelFooter" : false,
30 | "table" : {
31 | "thead" : {
32 | "th" : [
33 | { "title" : "Table Heading 1" },
34 | { "title" : "Table Heading 2" },
35 | { "title" : "Table Heading 3" },
36 | { "title" : "Table Heading 4" }
37 | ]
38 | },
39 | "tbody" : {
40 | "tr" : [
41 | {
42 | "td" : [
43 | { "text" : "row 1 cell 1" },
44 | { "text" : "row 1 cell 2" },
45 | { "text" : "row 1 cell 3" },
46 | { "text" : "row 1 cell 4" }
47 | ]
48 | }
49 | ]
50 | }
51 | },
52 | "wellClass" : "",
53 | "mediaClass" : "",
54 | "mediaLeft" : true,
55 | "mediaRight" : false,
56 | "mediaImage" : "../../images/bootstrapthumb64.jpg",
57 | "embedClass" : "embed-responsive-16by9",
58 | "mediaEmbed" : "//www.youtube.com/embed/zpOULjyy-n8?rel=0",
59 | "inputClass" : "",
60 | "inputAddonBefore" : "Addon",
61 | "inputAddonAfter" : false,
62 | "buttonClass" :"btn-default",
63 | "breadcrumbs" : [
64 | {
65 | "url" : "#",
66 | "text" : "Link 1"
67 |
68 | },
69 | {
70 | "url" : "#",
71 | "text" : "Link 2"
72 | },
73 | {
74 | "url" : "#",
75 | "text" : "Link 3"
76 | }
77 | ],
78 | "caret" : "caret",
79 | "dropdownClass" : "dropdown",
80 | "dropdownList" : [
81 | {
82 | "url" : "#",
83 | "text" : "Action"
84 | },
85 | {
86 | "url" : "#",
87 | "text" : "Another action"
88 | },
89 | {
90 | "url" : "#",
91 | "text" : "Something else here"
92 | },
93 | {
94 | "url" : "#",
95 | "text" : "Link 4"
96 | }
97 | ],
98 | "navClass" : "",
99 | "navList" : [
100 | {
101 | "url" : "#",
102 | "text" : "Home"
103 | },
104 | {
105 | "url" : "#",
106 | "text" : "Profile"
107 | },
108 | {
109 | "url" : "#",
110 | "text" : "Messages"
111 | }
112 | ],
113 | "paginationClass" : "",
114 | "paginationList" : [
115 | {
116 | "url" : "#",
117 | "text" : "1"
118 | },
119 | {
120 | "url" : "#",
121 | "text" : "2"
122 | },
123 | {
124 | "url" : "#",
125 | "text" : "3"
126 | },
127 | {
128 | "url" : "#",
129 | "text" : "4"
130 | },
131 | {
132 | "url" : "#",
133 | "text" : "5"
134 | }
135 | ],
136 | "pagerClass" : "",
137 | "pagerList" : [
138 | {
139 | "url" : "#",
140 | "text" : "Previous"
141 | },
142 | {
143 | "url" : "#",
144 | "text" : "Next"
145 | }
146 | ],
147 | "buttonGroupClass" : "",
148 | "buttonGroupList" : [
149 | { "text" : "Left" },
150 | { "text" : "Middle" },
151 | { "text" : "Right"}
152 | ],
153 |
154 | "alertClass" : "alert-success",
155 | "alertText" : "I am alerting you about something",
156 | "dismissableAlert" : false,
157 | "listGroupClass" : "",
158 | "listGroup" : [
159 | { "text" : "Cras justo odio" },
160 | { "text" : "Dapibus ac facilisis in" },
161 | { "text" : "Morbi leo risus" },
162 | { "text" : "Porta ac consectetur ac" },
163 | { "text" : "Vestibulum at eros" }
164 | ],
165 | "navbarBrandText" : "Pattern Lab",
166 | "navbarNavClass" : "",
167 | "navbarNavFirst" : true,
168 | "navbarNavLast" : {
169 | "navbarNavClass" : "navbar-right"
170 | },
171 | "navbarNav" : [
172 | {
173 | "url" : "#",
174 | "text" : "Link"
175 | },
176 | {
177 | "url" : "#",
178 | "text" : "Link"
179 | },
180 | {
181 | "url" : "#",
182 | "text" : "Dropdown",
183 | "hasDropdown" : true,
184 | "dropdownMenu" : [
185 | {
186 | "url" : "#",
187 | "text" : "Action"
188 | },
189 | {
190 | "url" : "#",
191 | "text" : "Another action"
192 | },
193 | {
194 | "url" : "#",
195 | "text" : "Something else here"
196 | },
197 | {
198 | "separator" : "true"
199 | },
200 | {
201 | "url" : "#",
202 | "text" : "Link 4"
203 | }
204 |
205 | ]
206 | }
207 | ],
208 | "navbarFormClass" : "navbar-left",
209 | "navbarClass" : "navbar-default",
210 | "mediaList" : [
211 | {
212 | "mediaLeft" : true,
213 | "mediaRight" : false,
214 | "nestedMedia" : [
215 | {
216 | "mediaLeft" : false,
217 | "mediaRight" : true
218 | },
219 | {
220 | "mediaLeft" : true,
221 | "mediaRight" : false
222 | }
223 | ]
224 |
225 | },
226 | {
227 | "heading" : "Item 2",
228 | "text" : "This is the second item that is not nested.",
229 | "mediaLeft" : true,
230 | "mediaRight" : false,
231 | "nestedMedia" : [
232 | {
233 | "heading" : "Nested Item 1",
234 | "text" : "This is the first nested item of the list.",
235 | "mediaLeft" : true,
236 | "mediaRight" : false
237 | },
238 | {
239 | "heading" : "Nested Item 2",
240 | "text" : "This is the second nested item of the list",
241 | "mediaLeft" : false,
242 | "mediaRight" : true
243 | }
244 | ]
245 | }
246 | ]
247 | }
--------------------------------------------------------------------------------
/dist/_data/listitems.json:
--------------------------------------------------------------------------------
1 | {
2 | "1": {
3 | "title": "Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.",
4 | "img": {
5 | "avatar": {
6 | "src": "http://placeimg.com/100/100/people",
7 | "alt": "Avatar"
8 | },
9 | "square": {
10 | "src": "http://placeimg.com/300/300/nature",
11 | "alt": "Square"
12 | },
13 | "rectangle": {
14 | "src": "http://placeimg.com/400/300/tech",
15 | "alt": "Rectangle"
16 | },
17 | "landscape-4x3": {
18 | "src": "http://placeimg.com/400/300/tech",
19 | "alt": "4x3 Image"
20 | },
21 | "landscape-16x9": {
22 | "src": "http://placeimg.com/640/360/tech",
23 | "alt": "16x9 Image"
24 | }
25 | },
26 | "headline": {
27 | "short": "Lorizzle pimpin' dolizzle sit amet I",
28 | "medium": "Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my"
29 | },
30 | "excerpt": {
31 | "short": "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
32 | "medium": "Izzle crazy tempizzle sizzle. We gonna chung gangsta get down get down fo shizzle turpizzle. Away break it down black. Pellentesque bling bling rhoncus fo shizzle. In hac the bizzle platea dictumst. Black dapibizzle. Crackalackin.",
33 | "long": "Curabitizzle fo shizzle diam quizzle nisi nizzle mollizzle. Suspendisse boofron. Morbi odio. Sure pizzle. Crazy orci. Shut the shizzle up maurizzle get down get down, check out this a, go to hizzle sit amizzle, malesuada izzle, pede. Pellentesque gravida. Vestibulizzle check it out mi, volutpat izzle, shiz sed, shiznit sempizzle, da bomb. Funky fresh in ipsum. Da bomb volutpat felis vizzle daahng dawg. Crizzle quis dope izzle fo shizzle my ni."
34 | },
35 | "description": "Fizzle crazy tortor. Sed rizzle. Ass pimpin' dolor dapibizzle turpis tempizzle fo shizzle my nizzle. Maurizzle pellentesque its fo rizzle izzle turpis. Get down get down we gonna chung nizzle. Shizzlin dizzle eleifend rhoncizzle break it down. In yo ghetto platea dictumst. Bling bling dapibizzle. Curabitur break yo neck, yall fo, pretizzle eu, go to hizzle dope, own yo' vitae, nunc. Bizzle suscipizzle. Ass semper velit sizzle fo.",
36 | "url": "http://lorizzle.nl/",
37 | "name": {
38 | "first": "Junius",
39 | "firsti": "J",
40 | "middle": "Marius",
41 | "middlei": "M",
42 | "last": "Koolen",
43 | "lasti": "K"
44 | },
45 | "year": {
46 | "long": "2013",
47 | "short": "13"
48 | },
49 | "month": {
50 | "long": "January",
51 | "short": "Jan",
52 | "digit": "01"
53 | },
54 | "dayofweek": {
55 | "long": "Sunday",
56 | "short": "Sun"
57 | },
58 | "day": {
59 | "long": "01",
60 | "short": "1",
61 | "ordinal": "st"
62 | },
63 | "hour": {
64 | "long": "06",
65 | "short": "6",
66 | "military": "06",
67 | "ampm": "am"
68 | },
69 | "minute": {
70 | "long": "20",
71 | "short": "20"
72 | },
73 | "seconds": "31"
74 | },
75 | "2": {
76 | "title": "Veggies sunt bona vobis, proinde vos postulo",
77 | "img": {
78 | "avatar": {
79 | "src": "http://placeimg.com/100/100/nature",
80 | "alt": "Avatar"
81 | },
82 | "square": {
83 | "src": "http://placeimg.com/300/300/tech",
84 | "alt": "Square"
85 | },
86 | "rectangle": {
87 | "src": "http://placeimg.com/400/300/people",
88 | "alt": "Rectangle"
89 | },
90 | "landscape-4x3": {
91 | "src": "http://placeimg.com/400/300/people",
92 | "alt": "4x3 Image"
93 | },
94 | "landscape-16x9": {
95 | "src": "http://placeimg.com/640/360/people",
96 | "alt": "16x9 Image"
97 | }
98 | },
99 | "headline": {
100 | "short": "Veggies sunt bona vobis, proinde vos",
101 | "medium": "Postulo esse magis azuki bean burdock brussels sprout quandong komatsun"
102 | },
103 | "excerpt": {
104 | "short": "A fava bean collard greens endive tomatillo lotus root okra winter purslane zucchini parsley spinach artichoke. Brussels sprout pea turnip catsear.",
105 | "medium": "Bush tomato gumbo potato garbanzo ricebean burdock daikon coriander kale quandong. Bok choy celery leek avocado shallot horseradish aubergine parsley. Bok choy bell pepper kale celery desert raisin kakadu plum bok choy bunya nuts.",
106 | "long": "Spinach tigernut. Corn cucumber grape black-eyed pea asparagus spinach avocado dulse bunya nuts epazote celery desert raisin celtuce burdock plantain yarrow napa cabbage. Plantain okra seakale endive tigernut pea sprouts asparagus corn chard peanut beet greens groundnut radicchio carrot coriander gumbo gram celtuce. Jícama nori bamboo shoot collard greens okra radicchio tomato. Catsear mustard corn tigernut celery kale water spinach bok choy."
107 | },
108 | "description": "Mung bean squash sorrel taro coriander collard greens gumbo bitterleaf tomato. Taro water chestnut celtuce turnip yarrow celery endive scallion black-eyed pea onion. Aubergine dulse turnip greens mustard salsify garlic soybean parsley bitterleaf desert raisin courgette.",
109 | "url": "http://veggieipsum.com",
110 | "name": {
111 | "first": "Siguror",
112 | "firsti": "S",
113 | "middle": "Aron",
114 | "middlei": "A",
115 | "last": "Hanigan",
116 | "lasti": "H"
117 | },
118 | "year": {
119 | "long": "2013",
120 | "short": "13"
121 | },
122 | "month": {
123 | "long": "February",
124 | "short": "Feb",
125 | "digit": "02"
126 | },
127 | "dayofweek": {
128 | "long": "Monday",
129 | "short": "Mon"
130 | },
131 | "day": {
132 | "long": "10",
133 | "short": "10",
134 | "ordinal": "th"
135 | },
136 | "hour": {
137 | "long": "01",
138 | "short": "1",
139 | "military": "13",
140 | "ampm": "pm"
141 | },
142 | "minute": {
143 | "long": "20",
144 | "short": "20"
145 | },
146 | "seconds": "31"
147 | },
148 | "3": {
149 | "title": "Bacon ipsum dolor sit amet turducken strip steak beef ribs shank",
150 | "img": {
151 | "avatar": {
152 | "src": "http://placeimg.com/100/100/tech",
153 | "alt": "Avatar"
154 | },
155 | "square": {
156 | "src": "http://placeimg.com/300/300/people",
157 | "alt": "Square"
158 | },
159 | "rectangle": {
160 | "src": "http://placeimg.com/400/300/nature",
161 | "alt": "Rectangle"
162 | },
163 | "landscape-4x3": {
164 | "src": "http://placeimg.com/400/300/nature",
165 | "alt": "4x3 Image"
166 | },
167 | "landscape-16x9": {
168 | "src": "http://placeimg.com/640/360/nature",
169 | "alt": "16x9 Image"
170 | }
171 | },
172 | "headline": {
173 | "short": "Bacon ipsum dolor sit amet spare rib",
174 | "medium": "Tongue pancetta short ribs bacon. Kielbasa ball tip cow bresaola, capic"
175 | },
176 | "excerpt": {
177 | "short": "Tail jerky rump shoulder t-bone meatball meatloaf salami. Filet mignon shank t-bone venison, ham hock ribeye drumstick bresaola kielbasa. Frankfurter.",
178 | "medium": "Doner biltong turducken leberkas. Rump swine pork loin ribeye ball tip meatloaf, pork chop ground round pig pancetta cow biltong brisket. Beef corned beef beef ribs, bacon pork belly sausage meatball boudin doner ham hock. Swine gro.",
179 | "long": "Und round meatball, bacon pig leberkas corned beef tongue shoulder. Drumstick pork loin prosciutto ball tip shank pancetta spare ribs jowl pastrami. Frankfurter boudin filet mignon ribeye. Pig hamburger strip steak ham turducken prosciutto bresaola ground round pancetta frankfurter jowl. Frankfurter tongue brisket tenderloin, beef ribs pastrami biltong tail bresaola flank. Biltong pork chop beef boudin hamburger bacon. Capicola bresaola sausage."
180 | },
181 | "description": "Boudin sausage jerky pastrami ground round salami biltong. Sausage fatback strip steak doner pork loin, pork belly drumstick ham short loin hamburger shankle. Short ribs sirloin rump tri-tip beef biltong. Meatball pig salami, jowl pork loin fatback short loin drumstick andouille.",
182 | "url": "http://baconipsum.com/",
183 | "name": {
184 | "first": "Teun",
185 | "firsti": "T",
186 | "middle": "Jodocus",
187 | "middlei": "J",
188 | "last": "Richard",
189 | "lasti": "R"
190 | },
191 | "year": {
192 | "long": "2013",
193 | "short": "13"
194 | },
195 | "month": {
196 | "long": "March",
197 | "short": "Mar",
198 | "digit": "03"
199 | },
200 | "dayofweek": {
201 | "long": "Tuesday",
202 | "short": "Tue"
203 | },
204 | "day": {
205 | "long": "22",
206 | "short": "22",
207 | "ordinal": "nd"
208 | },
209 | "hour": {
210 | "long": "04",
211 | "short": "4",
212 | "military": "16",
213 | "ampm": "pm"
214 | },
215 | "minute": {
216 | "long": "45",
217 | "short": "45"
218 | },
219 | "seconds": "11"
220 | },
221 | "4": {
222 | "title": "Whatever swag accusamus occupy, gentrify butcher tote bag",
223 | "img": {
224 | "avatar": {
225 | "src": "http://placeimg.com/100/100/animals",
226 | "alt": "Avatar"
227 | },
228 | "square": {
229 | "src": "http://placeimg.com/300/300/arch",
230 | "alt": "Square"
231 | },
232 | "rectangle": {
233 | "src": "http://placeimg.com/400/300/people/grayscale",
234 | "alt": "Rectangle"
235 | },
236 | "landscape-4x3": {
237 | "src": "http://placeimg.com/400/300/people/greyscale",
238 | "alt": "4x3 Image"
239 | },
240 | "landscape-16x9": {
241 | "src": "http://placeimg.com/640/360/people/greyscale",
242 | "alt": "16x9 Image"
243 | }
244 | },
245 | "headline": {
246 | "short": "Nesciunt sunt cillum keytar Pitchfork",
247 | "medium": "Tote bag mixtape PBR Helvetica scenester forage four loko. Irure Tonx"
248 | },
249 | "excerpt": {
250 | "short": "Golf quis +1, Wes Anderson church-key lo-fi keffiyeh selvage culpa authentic Brooklyn fap chambray. Id synth yr, 3 wolf moon locavore +1 mixtape do.",
251 | "medium": "Sed single-origin coffee anim eu. Bicycle rights Neutra Truffaut pop-up. Paleo hella irure meh Banksy, Wes Anderson typewriter VHS jean shorts yr. Eiusmod officia banjo Thundercats, odio laborum magna deep v cornhole nostrud kitsch.",
252 | "long": "Tattooed Williamsburg. Jean shorts proident kogi laboris. Non tote bag pariatur elit slow-carb, Vice irure eu Echo Park ea aliqua chillwave. Cornhole Etsy quinoa Pinterest cardigan. Excepteur quis forage, Blue Bottle keffiyeh velit hoodie direct trade typewriter Etsy. Fingerstache squid non, sriracha drinking vinegar Shoreditch pork belly. Paleo sartorial mollit 3 wolf moon chambray whatever, sed tote bag small batch freegan. Master cleanse."
253 | },
254 | "description": "Fanny pack ullamco et veniam semiotics. Shoreditch PBR reprehenderit cliche, magna Tonx aesthetic. Narwhal photo booth DIY aute post-ironic anim. Vice cliche brunch est before they sold out fap, street art Odd Future fashion axe messenger bag nihil Tonx tattooed. Nihil hashtag incididunt, do eu art party Banksy jean shorts four loko typewriter.",
255 | "url": "http://hipsteripsum.me/",
256 | "name": {
257 | "first": "Duane",
258 | "firsti": "D",
259 | "middle": "Edvin",
260 | "middlei": "E",
261 | "last": "Wilms",
262 | "lasti": "W"
263 | },
264 | "year": {
265 | "long": "2013",
266 | "short": "13"
267 | },
268 | "month": {
269 | "long": "April",
270 | "short": "Apr",
271 | "digit": "04"
272 | },
273 | "dayofweek": {
274 | "long": "Wednesday",
275 | "short": "Wed"
276 | },
277 | "day": {
278 | "long": "13",
279 | "short": "13",
280 | "ordinal": "th"
281 | },
282 | "hour": {
283 | "long": "10",
284 | "short": "10",
285 | "military": "10",
286 | "ampm": "am"
287 | },
288 | "minute": {
289 | "long": "14",
290 | "short": "14"
291 | },
292 | "seconds": "52"
293 | },
294 | "5": {
295 | "title": "Marshall McLuhan Colbert bump backpack journalist vast wasteland Romenesko CPM",
296 | "img": {
297 | "avatar": {
298 | "src": "http://placeimg.com/100/100/people/grayscale",
299 | "alt": "Avatar"
300 | },
301 | "square": {
302 | "src": "http://placeimg.com/300/300/animals",
303 | "alt": "Square"
304 | },
305 | "rectangle": {
306 | "src": "http://placeimg.com/400/300/arch",
307 | "alt": "Rectangle"
308 | },
309 | "landscape-4x3": {
310 | "src": "http://placeimg.com/400/300/arch",
311 | "alt": "4x3 Image"
312 | },
313 | "landscape-16x9": {
314 | "src": "http://placeimg.com/640/360/arch",
315 | "alt": "16x9 Image"
316 | }
317 | },
318 | "headline": {
319 | "short": "Blog meme masthead DocumentCloud Fou",
320 | "medium": "Square tabloid Andy Carvin stupid commenters, Nick Denton mathewi semip"
321 | },
322 | "excerpt": {
323 | "short": "I love the Weather & Opera section Groupon copyright in the slot, Journal Register open newsroom analytics future totally blowing up on Twitter AOL.",
324 | "medium": "CTR mthomps Flipboard do what you do best and link to the rest Buttry media bias Journal Register RT, newspaper strike do what you do best and link to the rest semipermeable learnings cognitive surplus mathewi, Encyclo Google News.",
325 | "long": "Pulse mathewi Project Thunderdome digital first. HuffPo social media optimization try PR dying the notion of the public monetization data visualization audience atomization overcome community, libel lawyer twitterati should isn't a business model fair use innovation Facebook AOL, Walter Cronkite died for your sins horse-race coverage crowdfunding Patch but what's the business model rubber cement horse-race coverage. Lucius Nieman content farm."
326 | },
327 | "description": "Like button audience atomization overcome Colbert bump Free Darko inverted pyramid we will make them pay, digital circulation strategy Like button totally blowing up on Twitter church of the savvy. Pictures of Goats section open source discuss Frontline analog thinking filters paidContent.",
328 | "url": "http://www.niemanlab.org/journo-ipsum/",
329 | "name": {
330 | "first": "Frans",
331 | "firsti": "F",
332 | "middle": "Fabius",
333 | "middlei": "F",
334 | "last": "Keegan",
335 | "lasti": "K"
336 | },
337 | "year": {
338 | "long": "2013",
339 | "short": "13"
340 | },
341 | "month": {
342 | "long": "May",
343 | "short": "May",
344 | "digit": "05"
345 | },
346 | "dayofweek": {
347 | "long": "Thursday",
348 | "short": "Thu"
349 | },
350 | "day": {
351 | "long": "26",
352 | "short": "26",
353 | "ordinal": "th"
354 | },
355 | "hour": {
356 | "long": "06",
357 | "short": "6",
358 | "military": "18",
359 | "ampm": "pm"
360 | },
361 | "minute": {
362 | "long": "37",
363 | "short": "37"
364 | },
365 | "seconds": "24"
366 | },
367 | "6": {
368 | "title": "Thunder, thunder, thundercats, Ho!",
369 | "img": {
370 | "avatar": {
371 | "src": "http://placeimg.com/100/100/arch",
372 | "alt": "Avatar"
373 | },
374 | "square": {
375 | "src": "http://placeimg.com/300/300/animals",
376 | "alt": "Square"
377 | },
378 | "rectangle": {
379 | "src": "http://placeimg.com/400/300/people/grayscale",
380 | "alt": "Rectangle"
381 | },
382 | "landscape-4x3": {
383 | "src": "http://placeimg.com/400/300/people/grayscale",
384 | "alt": "4x3 Image"
385 | },
386 | "landscape-16x9": {
387 | "src": "http://placeimg.com/640/360/people/grayscale",
388 | "alt": "16x9 Image"
389 | }
390 | },
391 | "headline": {
392 | "short": "Hong Kong Phooey, number one super g",
393 | "medium": "Hong Kong Phooey, quicker than the human eye. He's got style, a groovy"
394 | },
395 | "excerpt": {
396 | "short": "Style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number.",
397 | "medium": "One super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic! One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one.",
398 | "long": "It's a pretty story. Sharing everything with fun, that's the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you've got a problem chum, think how it could be. This is my boss, Jonathan Hart, a self-made millionaire, he's quite a guy. This is Mrs H., she's gorgeous, she's one lady who knows how to take care of herself."
399 | },
400 | "description": "Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.",
401 | "url": "http://www.malevole.com/mv/misc/text/",
402 | "name": {
403 | "first": "Fergus",
404 | "firsti": "F",
405 | "middle": "Jon",
406 | "middlei": "J",
407 | "last": "Althuis",
408 | "lasti": "A"
409 | },
410 | "year": {
411 | "long": "2013",
412 | "short": "13"
413 | },
414 | "month": {
415 | "long": "June",
416 | "short": "Jun",
417 | "digit": "06"
418 | },
419 | "dayofweek": {
420 | "long": "Friday",
421 | "short": "Fri"
422 | },
423 | "day": {
424 | "long": "08",
425 | "short": "8",
426 | "ordinal": "th"
427 | },
428 | "hour": {
429 | "long": "11",
430 | "short": "11",
431 | "military": "23",
432 | "ampm": "pm"
433 | },
434 | "minute": {
435 | "long": "37",
436 | "short": "37"
437 | },
438 | "seconds": "33"
439 | },
440 | "7": {
441 | "title": "Yeah, I like animals better than people sometimes",
442 | "img": {
443 | "avatar": {
444 | "src": "http://placeimg.com/100/100/any",
445 | "alt": "Avatar"
446 | },
447 | "square": {
448 | "src": "http://placeimg.com/300/300/any",
449 | "alt": "Square"
450 | },
451 | "rectangle": {
452 | "src": "http://placeimg.com/400/300/any",
453 | "alt": "Rectangle"
454 | },
455 | "landscape-4x3": {
456 | "src": "http://placeimg.com/400/300/any",
457 | "alt": "4x3 Image"
458 | },
459 | "landscape-16x9": {
460 | "src": "http://placeimg.com/640/360/any",
461 | "alt": "16x9 Image"
462 | }
463 | },
464 | "headline": {
465 | "short": "Now that we know who you are, I know",
466 | "medium": "Who I am. I'm not a mistake! It all makes sense! In a comic, you know"
467 | },
468 | "excerpt": {
469 | "short": "How you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me.",
470 | "medium": "The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amin.",
471 | "long": "Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. Acid lysine. Unless they're."
472 | },
473 | "description": "Especially dogs. Dogs are the best. Every time you come home, they act like they haven't seen you in a year. And the good thing about dogs... is they got different dogs for different people. Like pit bulls. The dog of dogs. Pit bull can be the right man's best friend... or the wrong man's worst enemy. You going to give me a dog for a pet, give me a pit bull.",
474 | "url": "http://slipsum.com/lite/",
475 | "name": {
476 | "first": "Bertil",
477 | "firsti": "B",
478 | "middle": "Pier",
479 | "middlei": "P",
480 | "last": "Aaij",
481 | "lasti": "A"
482 | },
483 | "year": {
484 | "long": "2013",
485 | "short": "13"
486 | },
487 | "month": {
488 | "long": "July",
489 | "short": "Jul",
490 | "digit": "07"
491 | },
492 | "dayofweek": {
493 | "long": "Saturday",
494 | "short": "Sat"
495 | },
496 | "day": {
497 | "long": "22",
498 | "short": "22",
499 | "ordinal": "nd"
500 | },
501 | "hour": {
502 | "long": "11",
503 | "short": "11",
504 | "military": "11",
505 | "ampm": "am"
506 | },
507 | "minute": {
508 | "long": "12",
509 | "short": "12"
510 | },
511 | "seconds": "47"
512 | },
513 | "8": {
514 | "title": "Webtwo ipsum dolor sit amet, eskobo chumby doostang bebo",
515 | "img": {
516 | "avatar": {
517 | "src": "http://placeimg.com/100/100/any/grayscale",
518 | "alt": "Avatar"
519 | },
520 | "square": {
521 | "src": "http://placeimg.com/300/300/any/grayscale",
522 | "alt": "Square"
523 | },
524 | "rectangle": {
525 | "src": "http://placeimg.com/400/300/any/grayscale",
526 | "alt": "Rectangle"
527 | },
528 | "landscape-4x3": {
529 | "src": "http://placeimg.com/400/300/any/grayscale",
530 | "alt": "4x3 Image"
531 | },
532 | "landscape-16x9": {
533 | "src": "http://placeimg.com/640/360/any/grayscale",
534 | "alt": "16x9 Image"
535 | }
536 | },
537 | "headline": {
538 | "short": "Webtwo ipsum dolor sit amet, eskobo",
539 | "medium": "Chumby doostang bebo. Wakoopa oooj geni zoho loopt eskobo sifteo chart"
540 | },
541 | "excerpt": {
542 | "short": "Dropio, chumby waze dopplr plugg oooj yammer jibjab imvu yuntaa knewton, mobly trulia airbnb bitly chegg tivo empressr knewton. Plickers spock voxy.",
543 | "medium": "Zooomr kippt voxy zinch appjet napster trulia, zappos wufoo zapier spotify mzinga jaiku fleck, disqus lijit voxy voki yoono. Dogster elgg jibjab xobni kazaa bebo udemy sifteo kiko, elgg knewton skype mog octopart zoodles kazaa udem.",
544 | "long": "Appjet spock handango empressr lijit palantir weebly dropio jibjab revver kaboodle spotify orkut mobly chegg akismet, handango ebay woopra revver joukuu kosmix unigo oooooc wufoo zanga kno zinch spock knewton. Balihoo greplin bebo squidoo skype kaboodle meebo disqus joost gooru, zlio tumblr edmodo palantir eskobo shopify kiko gsnap. Greplin balihoo chartly plugg imeem diigo trulia plickers qeyno wikia akismet, palantir grockit prezi jabber zo."
545 | },
546 | "description": "Wufoo diigo grockit sifteo divvyshot, unigo zooomr revver. Edmodo appjet joyent skype bubbli jajah zoodles joukuu xobni hojoki edmodo appjet, mozy mzinga akismet yuntaa joost yuntaa geni tivo insala yoono chumby, grockit sococo loopt zanga etsy cloudera koofers empressr jiglu blippy. Omgpop lanyrd joukuu sococo zimbra airbnb movity jibjab, foodzie.",
547 | "url": "http://web20ipsum.com",
548 | "name": {
549 | "first": "Freyr",
550 | "firsti": "F",
551 | "middle": "Ninian",
552 | "middlei": "N",
553 | "last": "Hines",
554 | "lasti": "H"
555 | },
556 | "year": {
557 | "long": "2013",
558 | "short": "13"
559 | },
560 | "month": {
561 | "long": "August",
562 | "short": "Aug",
563 | "digit": "08"
564 | },
565 | "dayofweek": {
566 | "long": "Sunday",
567 | "short": "Sun"
568 | },
569 | "day": {
570 | "long": "31",
571 | "short": "31",
572 | "ordinal": "st"
573 | },
574 | "hour": {
575 | "long": "03",
576 | "short": "3",
577 | "military": "15",
578 | "ampm": "pm"
579 | },
580 | "minute": {
581 | "long": "42",
582 | "short": "42"
583 | },
584 | "seconds": "21"
585 | },
586 | "9": {
587 | "title": "Rebel Mission to Ord Mantell",
588 | "img": {
589 | "avatar": {
590 | "src": "http://placeimg.com/100/100/any/sepia",
591 | "alt": "Avatar"
592 | },
593 | "square": {
594 | "src": "http://placeimg.com/300/300/any/sepia",
595 | "alt": "Square"
596 | },
597 | "rectangle": {
598 | "src": "http://placeimg.com/400/300/any/sepia",
599 | "alt": "Rectangle"
600 | },
601 | "landscape-4x3": {
602 | "src": "http://placeimg.com/400/300/any/sepia",
603 | "alt": "4x3 Image"
604 | },
605 | "landscape-16x9": {
606 | "src": "http://placeimg.com/640/360/any/sepia",
607 | "alt": "16x9 Image"
608 | }
609 | },
610 | "headline": {
611 | "short": "All right. Well, take care of yourself, Han",
612 | "medium": "You don't believe in the Force, do you? The Force is strong with this one"
613 | },
614 | "excerpt": {
615 | "short": "I'm trying not to, kid. I find your lack of faith disturbing. You are a part of the Rebel Alliance and a traitor! Take her away! I want to come with.",
616 | "medium": "I'm surprised you had the courage to take the responsibility yourself. Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. You don't be.",
617 | "long": "A tremor in the Force. The last time I felt it was in the presence of my old master. You don't believe in the Force, do you? I have traced the Rebel spies to her. Now she is my only link to finding their secret base. A tremor in the Force. The last time I felt it was in the presence of my old master. I'm trying not to, kid. The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. There's nothing for me here."
618 | },
619 | "description": "I find your lack of faith disturbing. A tremor in the Force. The last time I felt it was in the presence of my old master. Don't act so surprised, Your Highness. You weren't on any mercy mission this time. Several transmissions were beamed to this ship by Rebel spies. I want to know what happened to the plans they sent you. The plans you refer to will soon be back in our hands.",
620 | "url": "http://chrisvalleskey.com/fillerama/",
621 | "name": {
622 | "first": "Jacobus",
623 | "firsti": "J",
624 | "middle": "Domitianus",
625 | "middlei": "D",
626 | "last": "Sneiders",
627 | "lasti": "S"
628 | },
629 | "year": {
630 | "long": "2013",
631 | "short": "13"
632 | },
633 | "month": {
634 | "long": "September",
635 | "short": "Sep",
636 | "digit": "09"
637 | },
638 | "dayofweek": {
639 | "long": "Monday",
640 | "short": "Mon"
641 | },
642 | "day": {
643 | "long": "04",
644 | "short": "4",
645 | "ordinal": "th"
646 | },
647 | "hour": {
648 | "long": "09",
649 | "short": "9",
650 | "military": "09",
651 | "ampm": "am"
652 | },
653 | "minute": {
654 | "long": "04",
655 | "short": "4"
656 | },
657 | "seconds": "37"
658 | },
659 | "10": {
660 | "title": "Help, help, I'm being repressed!",
661 | "img": {
662 | "avatar": {
663 | "src": "http://placeimg.com/100/100/tech/grayscale",
664 | "alt": "Avatar"
665 | },
666 | "square": {
667 | "src": "http://placeimg.com/300/300/nature/grayscale",
668 | "alt": "Square"
669 | },
670 | "rectangle": {
671 | "src": "http://placeimg.com/400/300/arch/grayscale",
672 | "alt": "Rectangle"
673 | },
674 | "landscape-4x3": {
675 | "src": "http://placeimg.com/400/300/arch/grayscale",
676 | "alt": "4x3 Image"
677 | },
678 | "landscape-16x9": {
679 | "src": "http://placeimg.com/640/360/arch/grayscale",
680 | "alt": "16x9 Image"
681 | }
682 | },
683 | "headline": {
684 | "short": "The swallow may fly south with the sun",
685 | "medium": "On second thoughts, let's not go there. It is a silly place. You don't"
686 | },
687 | "excerpt": {
688 | "short": "The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.",
689 | "medium": "The Knights Who Say Ni demand a sacrifice! Found them? In Mercia?! The coconut's tropical! Where'd you get the coconuts? Why do you think that she is a witch? I am your king. You don't vote for kings. But you are dressed as one. Oh, ow!",
690 | "long": "Well, I didn't vote for you. Burn her! Be quiet! He hasn't got shit all over him. Where'd you get the coconuts? The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land. No! Yes, yes. A bit. But she's got a wart. Shut up! Will you shut up?! I have to push the pram a lot. Now, look here, my good man. Frighten us, English pig-dogs! Go and boil your bottoms."
691 | },
692 | "description": "The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!",
693 | "url": "http://chrisvalleskey.com/fillerama/",
694 | "name": {
695 | "first": "Plinius",
696 | "firsti": "P",
697 | "middle": "Varinius",
698 | "middlei": "V",
699 | "last": "Sloane",
700 | "lasti": "S"
701 | },
702 | "year": {
703 | "long": "2013",
704 | "short": "13"
705 | },
706 | "month": {
707 | "long": "October",
708 | "short": "Oct",
709 | "digit": "10"
710 | },
711 | "dayofweek": {
712 | "long": "Tuesday",
713 | "short": "Tue"
714 | },
715 | "day": {
716 | "long": "25",
717 | "short": "25",
718 | "ordinal": "th"
719 | },
720 | "hour": {
721 | "long": "03",
722 | "short": "3",
723 | "military": "03",
724 | "ampm": "am"
725 | },
726 | "minute": {
727 | "long": "51",
728 | "short": "51"
729 | },
730 | "second": "19"
731 | },
732 | "11": {
733 | "title": "Danish danish candy canes bonbon cheesecake danish marzipan",
734 | "img": {
735 | "avatar": {
736 | "src": "http://placeimg.com/100/100/tech/sepia",
737 | "alt": "Avatar"
738 | },
739 | "square": {
740 | "src": "http://placeimg.com/300/300/animals/sepia",
741 | "alt": "Square"
742 | },
743 | "rectangle": {
744 | "src": "http://placeimg.com/400/300/arch/sepia",
745 | "alt": "Rectangle"
746 | },
747 | "landscape-4x3": {
748 | "src": "http://placeimg.com/400/300/arch/sepia",
749 | "alt": "4x3 Image"
750 | },
751 | "landscape-16x9": {
752 | "src": "http://placeimg.com/640/360/arch/sepia",
753 | "alt": "16x9 Image"
754 | }
755 | },
756 | "headline": {
757 | "short": "Carrot cake fruitcake dessert apple",
758 | "medium": "Pie powder lemon drops sesame snaps cake brownie. Biscuit ice cream gin"
759 | },
760 | "excerpt": {
761 | "short": "Bread cotton candy marzipan. Baker too go gingerbread topping cupcake donut. Fruitcake marzipan bear claw tart toffee candy cheesecake. Lemon drops.",
762 | "medium": "Cupcake chupa chups pudding gummies. Unerdwear.com cupcake candy soufflé sesame snaps macaroon sesame snaps. Tart dragée muffin. Sweet roll gummi bears caramels fruitcake candy cake. Cotton candy carrot cake tart cotton candy. Jelly.",
763 | "long": "Gingerbread candy icing pastry cake bonbon fruitcake donut. Powder liquorice dessert tart croissant cake. Dessert chocolate cake sweet roll candy candy sesame snaps tiramisu ice cream. Candy candy canes marzipan biscuit cupcake pie pudding. Donut cotton candy muffin. Pastry bear claw icing halvah. Gingerbread cotton candy sweet roll toffee chocolate jujubes. Wafer jujubes danish ice cream lemon drops wafer. Sesame snaps cupcake gummies browni."
764 | },
765 | "description": "Sugar plum wafer soufflé ice cream. Wafer topping biscuit pie gummi bears topping. Gummies toffee powder applicake oat cake cookie. Bear claw candy tootsie roll fruitcake danish applicake candy canes macaroon. Liquorice tiramisu danish cotton candy gummies. Tiramisu dessert gummi bears macaroon sweet roll jelly-o gummi bears marzipan.",
766 | "url": "http://cupcakeipsum.com/",
767 | "name": {
768 | "first": "Matthias",
769 | "firsti": "M",
770 | "middle": "Brady",
771 | "middlei": "B",
772 | "last": "Macguinness",
773 | "lasti": "M"
774 | },
775 | "year": {
776 | "long": "2013",
777 | "short": "13"
778 | },
779 | "month": {
780 | "long": "November",
781 | "short": "Nov",
782 | "digit": "11"
783 | },
784 | "dayofweek": {
785 | "long": "Wednesday",
786 | "short": "Wed"
787 | },
788 | "day": {
789 | "long": "19",
790 | "short": "19",
791 | "ordinal": "th"
792 | },
793 | "hour": {
794 | "long": "11",
795 | "short": "11",
796 | "military": "23",
797 | "ampm": "pm"
798 | },
799 | "minute": {
800 | "long": "55",
801 | "short": "55"
802 | },
803 | "seconds": "12"
804 | },
805 | "12": {
806 | "title": "Cottage cheese brie lancashire. Boursin when the cheese comes out.",
807 | "img": {
808 | "avatar": {
809 | "src": "http://placeimg.com/100/100/people/sepia",
810 | "alt": "Avatar"
811 | },
812 | "square": {
813 | "src": "http://placeimg.com/300/300/people/sepia",
814 | "alt": "Square"
815 | },
816 | "rectangle": {
817 | "src": "http://placeimg.com/400/300/people/sepia",
818 | "alt": "Rectangle"
819 | },
820 | "landscape-4x3": {
821 | "src": "http://placeimg.com/400/300/people/sepia",
822 | "alt": "4x3 Image"
823 | },
824 | "landscape-16x9": {
825 | "src": "http://placeimg.com/640/360/people/sepia",
826 | "alt": "16x9 Image"
827 | }
828 | },
829 | "headline": {
830 | "short": "Cauliflower cheese cream cheese baby",
831 | "medium": "Lancashire cheesy feet rubber cheese cheese and wine gouda the big chee"
832 | },
833 | "excerpt": {
834 | "short": "Queso fromage. Taleggio boursin bavarian bergkase cream cheese when the cheese comes out everybody's happy port-salut halloumi pecorino. Caerphilly cut the cheese manchego camembert de normandie goat melted cheese cheese and biscuit.",
835 | "medium": "Pecorino queso lancashire. Manchego lancashire cheesy feet emmental babybel cheese strings dolcelatte bavarian bergkase. Ricotta cheese slices cheesy grin cow cheesecake smelly cheese mascarpone lancashire. Cow say cheese babybel do.",
836 | "long": "Cheesy grin macaroni cheese airedale. Fromage frais airedale cheese and wine brie cow swiss swiss mozzarella. Emmental cheese triangles edam rubber cheese pepper jack ricotta airedale airedale. Brie parmesan smelly cheese cheese strings stinking bishop cheese strings taleggio. Bocconcini blue castello gouda. Everyone loves caerphilly rubber cheese halloumi smelly cheese melted cheese melted cheese bavarian bergkase. Rubber cheese ricotta emm."
837 | },
838 | "description": "Queso caerphilly cheesecake. Parmesan chalk and cheese port-salut port-salut babybel cottage cheese cheesy grin pepper jack. Croque monsieur paneer st. agur blue cheese emmental airedale monterey jack bavarian bergkase cheese triangles. Halloumi parmesan.",
839 | "url": "http://www.cheeseipsum.co.uk/",
840 | "name": {
841 | "first": "Aquila",
842 | "firsti": "A",
843 | "middle": "Gaius",
844 | "middlei": "G",
845 | "last": "Achterkamp",
846 | "lasti": "A"
847 | },
848 | "year": {
849 | "long": "2013",
850 | "short": "13"
851 | },
852 | "month": {
853 | "long": "December",
854 | "short": "Dec",
855 | "digit": "12"
856 | },
857 | "dayofweek": {
858 | "long": "Thursday",
859 | "short": "Thu"
860 | },
861 | "day": {
862 | "long": "28",
863 | "short": "28",
864 | "ordinal": "th"
865 | },
866 | "hour": {
867 | "long": "08",
868 | "short": "8",
869 | "military": "08",
870 | "ampm": "am"
871 | },
872 | "minute": {
873 | "long": "34",
874 | "short": "34"
875 | },
876 | "seconds": "56"
877 | }
878 | }
--------------------------------------------------------------------------------
/dist/_meta/_00-head.mustache:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
--------------------------------------------------------------------------------
/dist/_patterns/00-atoms/02-text/02-blockquote.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Blockquote
3 | ---
--------------------------------------------------------------------------------
/dist/_patterns/00-atoms/02-text/02-blockquote.mustache:
--------------------------------------------------------------------------------
1 | to links, Bootstrap navs, and more.
6 |
7 | Self collapsing
8 | When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.
9 |
10 |
11 |
Cross-browser compatibility
12 |
Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.
13 |
Adapts to active nav states
16 | Built-in styles are included for placing badges in active states in pill navigations.
--------------------------------------------------------------------------------
/dist/_patterns/00-atoms/07-media/00-badges.mustache:
--------------------------------------------------------------------------------
1 | {{ badge }}
2 |
3 |
4 |
--------------------------------------------------------------------------------
/dist/_patterns/00-atoms/07-media/02-labels.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Labels
3 | ---
--------------------------------------------------------------------------------
/dist/_patterns/00-atoms/07-media/02-labels.mustache:
--------------------------------------------------------------------------------
1 | {{ label }}
2 |
3 |
--------------------------------------------------------------------------------
/dist/_patterns/00-atoms/07-media/03-labels-variants.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Labels Variants
3 | ---
4 |
5 | Add any of the below mentioned modifier classes to change the appearance of a label.
6 |
7 | Have tons of labels?
8 | Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own inline-block element (like an icon). The way around this is setting display: inline-block;. For context and an example, see #13219 .
--------------------------------------------------------------------------------
/dist/_patterns/00-atoms/07-media/03-labels-variants.mustache:
--------------------------------------------------------------------------------
1 | {{ heading }} {{ label }}
2 | {{ heading }} {{ label }}
3 | {{ heading }} {{ label }}
4 | {{ heading }} {{ label }}
5 | {{ heading }} {{ label }}
6 | {{ heading }} {{ label }}
7 |
8 | Primary
9 | Success
10 | Info
11 | Warning
12 | Danger
13 |
--------------------------------------------------------------------------------
/dist/_patterns/00-atoms/07-media/04-progress-bars.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Progress Bars
3 | ---
4 |
5 | Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
6 |
7 | Cross-browser compatibility
8 | Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
--------------------------------------------------------------------------------
/dist/_patterns/00-atoms/07-media/04-progress-bars.mustache:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{# removeProgressText }}{{/ removeProgressText }}{{ progressCompleteText }}{{# removeProgressText }} {{/ removeProgressText }}
4 |
5 |
With label
2 | Remove the <span> with .sr-only class from within the progress bar to show a visible percentage.
3 |
8 |
9 | To ensure that the label text remains legible even for low percentages, consider adding a min-width to the progress bar.
10 |
15 |
20 |
21 | Contextual alternatives
22 | Progress bars use some of the same button and alert classes for consistent styles.
23 |
24 |
25 | 40% Complete (success)
26 |
27 |
29 |
30 | 20% Complete
31 |
32 |
34 |
35 | 60% Complete (warning)
36 |
37 |
39 |
40 | 80% Complete (danger)
41 |
42 |
Striped
46 | Uses a gradient to create a striped effect. Not available in IE9 and below.
47 |
48 |
49 | 40% Complete (success)
50 |
51 |
53 |
54 | 20% Complete
55 |
56 |
58 |
59 | 60% Complete (warning)
60 |
61 |
63 |
64 | 80% Complete (danger)
65 |
66 |
Animated
69 | Add .active to .progress-bar-striped to animate the stripes right to left. Not available in IE9 and below.
70 |
73 |
74 |
75 | Stacked
76 | Place multiple bars into the same .progress to stack them.
77 |
78 |
79 | 35% Complete (success)
80 |
81 |
82 | 20% Complete (warning)
83 |
84 |
85 | 10% Complete (danger)
86 |
87 |
grid system with the thumbnail component to easily display grids of images, videos, text, and more.
6 | If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as Masonry , Isotope , or Salvattore .
7 |
8 | Default example
9 | By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
--------------------------------------------------------------------------------
/dist/_patterns/00-atoms/07-media/06-thumbnails.mustache:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
--------------------------------------------------------------------------------
/dist/_patterns/00-atoms/09-glyphicons/00-glyphicons.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Glyphicons
3 | ---
4 |
5 | Available glyphs
6 | Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.
7 |
8 | How to use
9 | For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.
10 |
11 |
Don't mix with other components
12 |
Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.
13 |
15 |
Only for use on empty elements
16 |
Icon classes should only be used on elements that contain no text content and have no child elements.
17 |
19 |
Changing the icon font location
20 |
Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:
21 |
22 | Change the @icon-font-path and/or @icon-font-name variables in the source Less files.
23 | Utilize the relative URLs option provided by the Less compiler.
24 | Change the url() paths in the compiled CSS.
25 |
26 |
Use whatever option best suits your specific development setup.
27 |
29 |
Accessible icons
30 |
Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden="true" attribute.
31 |
If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.
32 |
If you're creating controls with no other text (such as a <button> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.
33 |
Basic example
8 | By default, all the .panel does is apply some basic border and padding to contain some content.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/00-blocks/00-panels.mustache:
--------------------------------------------------------------------------------
1 |
2 | {{# panelHeading }}
3 |
{{ panelHeading }}
4 | {{/ panelHeading }}
5 |
6 | {{ text }}
7 |
8 | {{# panelFooter }}
9 |
10 | {{/ panelFooter }}
11 |
Panel with heading
2 | Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading.
3 | For proper link coloring, be sure to place links in headings within .panel-title.
4 |
5 |
Panel heading without title
6 |
7 | Panel content
8 |
9 |
11 |
12 |
Panel title
13 |
14 |
15 | Panel content
16 |
17 |
Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.
20 |
21 |
22 | Panel content
23 |
24 |
25 |
Contextual alternatives
27 | Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
28 |
29 |
30 |
Panel title
31 |
32 |
33 | Panel content
34 |
35 |
37 |
38 |
Panel title
39 |
40 |
41 | Panel content
42 |
43 |
45 |
46 |
Panel title
47 |
48 |
49 | Panel content
50 |
51 |
53 |
54 |
Panel title
55 |
56 |
57 | Panel content
58 |
59 |
61 |
62 |
Panel title
63 |
64 |
65 | Panel content
66 |
67 |
2 | {{ text }}
3 |
4 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/00-blocks/03-wells-variants.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Wells
3 | ---
4 |
5 | Optional classes
6 | Control padding and rounded corners with two optional modifier classes.
7 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/00-blocks/03-wells-variants.mustache:
--------------------------------------------------------------------------------
1 |
2 | Look, I'm in a large well!
3 |
4 |
5 | Look, I'm in a small well!
6 |
7 |
8 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/01-media/00-jumbotron.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Jumbotron
3 | ---
4 |
5 | A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
6 | To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/01-media/00-jumbotron.mustache:
--------------------------------------------------------------------------------
1 |
2 |
{{ heading }}
3 |
{{ text }}
4 | {{# cta }}
5 |
{{ cta }}
6 | {{/ cta }}
7 |
The classes .pull-left and .pull-right 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 .media-left and .media-right, except that .media-right should be placed after the .media-body in the html.
52 |
53 | The images or other media can be aligned top, middle, or bottom. The default is top aligned.
54 |
66 |
78 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/01-media/03-responsive-embed.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Responsive Embed
3 | ---
4 |
5 | Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
6 | Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.
7 | Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/01-media/03-responsive-embed.mustache:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/01-media/04-thumbnails-caption.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Thumbnails Caption
3 | ---
4 |
5 | Custom content
6 | With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/01-media/04-thumbnails-caption.mustache:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{# caption }}
4 |
5 | {{{ caption }}}
6 |
7 | {{/ caption }}
8 |
Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.
6 |
7 | Textual <input>s only
8 | Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
9 | Avoid using <textarea> elements here as their rows attribute will not be respected in some cases.
10 |
11 | Tooltips & popovers in input groups require special setting
12 | When using tooltips or popovers on elements within an .input-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).
13 |
14 | Don't mix with other components
15 | Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.
16 |
17 | Always add labels
18 | Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.
19 | The exact technique to be used (<label> elements hidden using the .sr-only class, or use of the aria-label, aria-labelledby, aria-describedby, title or placeholder attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.
20 |
21 |
22 | Place one add-on or button on either side of an input. You may also place one on both sides of an input.
23 | We do not support multiple add-ons on a single side.
24 | We do not support multiple form-controls in a single input group.
25 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/02-forms/00-input-groups.mustache:
--------------------------------------------------------------------------------
1 |
2 | {{# inputAddonBefore }}
3 | {{ inputAddonBefore }}
4 | {{/ inputAddonBefore }}
5 | {{> atoms-input }}
6 | {{# inputAddonAfter }}
7 | {{ inputAddonAfter }}
8 | {{/ inputAddonAfter }}
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/02-forms/01-input-groups-variants.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Input Groups Variants
3 | ---
4 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/02-forms/01-input-groups-variants.mustache:
--------------------------------------------------------------------------------
1 |
2 | @
3 |
5 |
7 | @
8 |
10 |
12 | @
13 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/02-forms/02-input-groups-checkbox.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Input Groups Checkbox
3 | ---
4 |
5 |
6 | Place any checkbox option within an input group's addon instead of text.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/02-forms/02-input-groups-checkbox.mustache:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 | {{> atoms-input }}
6 |
7 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/02-forms/03-input-groups-radio.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Input Groups Checkbox
3 | ---
4 |
5 |
6 | Place any radio option within an input group's addon instead of text.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/02-forms/03-input-groups-radio.mustache:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 | {{> atoms-input }}
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/02-forms/04-input-groups-button.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Input Groups Button
3 | ---
4 |
5 |
6 | Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/02-forms/04-input-groups-button.mustache:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{> atoms-button }}
4 |
5 | {{> atoms-input }}
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/00-breadcrumbs.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Breadcrumbs
3 | ---
4 |
5 | Indicate the current page's location within a navigational hierarchy.
6 | Separators are automatically added in CSS through :before and content.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/00-breadcrumbs.mustache:
--------------------------------------------------------------------------------
1 |
2 | {{# breadcrumbs }}
3 | {{ text }}
6 |
7 |
8 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/01-button-dropdown.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button Dropdown
3 | ---
4 |
5 | Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
6 |
7 |
8 |
Plugin dependency
9 |
Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.
10 |
Turn a button into a dropdown toggle with some basic markup changes.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/01-button-dropdown.mustache:
--------------------------------------------------------------------------------
1 |
2 | {{ cta }} {{# caret }}
3 |
8 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/02-button-dropdown-variants.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button Dropdown
3 | ---
4 |
5 | Turn a button into a dropdown toggle with some basic markup changes.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/02-button-dropdown-variants.mustache:
--------------------------------------------------------------------------------
1 | Single button dropdowns
2 |
3 |
4 | Primary
5 |
12 |
13 |
14 |
15 | Success
16 |
23 |
24 |
25 |
26 | Info
27 |
34 |
35 |
36 |
37 | Warning
38 |
45 |
46 |
47 |
48 | Danger
49 |
56 |
57 |
58 | Sizing
59 | Button dropdowns work with buttons of all sizes.
60 |
61 |
62 | Large button
64 |
71 |
72 |
73 |
74 |
75 | Small button
77 |
84 |
85 |
86 |
87 |
88 | Extra small button
90 |
97 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/03-button-dropdown-split.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button Dropdown Split
3 | ---
4 |
5 | Split button dropdowns
6 | Similarly, create split button dropdowns with the same markup changes, only with a separate button.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/03-button-dropdown-split.mustache:
--------------------------------------------------------------------------------
1 |
2 | {{> atoms-button }}
3 |
4 | {{# caret }}{{ cta }}
6 |
7 |
12 |
13 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/04-button-dropdown-split-variants.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button Dropdown Split Variants
3 | ---
4 |
5 | Split button dropdowns
6 | Similarly, create split button dropdowns with the same markup changes, only with a separate button.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/04-button-dropdown-split-variants.mustache:
--------------------------------------------------------------------------------
1 |
2 | Primary
3 |
4 | Toggle Dropdown
6 |
7 |
14 |
15 |
16 | Success
17 |
18 | Toggle Dropdown
20 |
21 |
28 |
29 |
30 | Info
31 |
32 | Toggle Dropdown
34 |
35 |
42 |
43 |
44 | Warning
45 |
46 | Toggle Dropdown
48 |
49 |
56 |
57 |
58 | Danger
59 |
60 | Toggle Dropdown
62 |
63 |
70 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/05-button-dropup.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button Dropup
3 | ---
4 |
5 | Dropup variation
6 | Trigger dropdown menus above elements by adding .dropup to the parent.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/05-button-dropup.mustache:
--------------------------------------------------------------------------------
1 |
2 | {{> atoms-button }}
3 |
4 | {{# caret }}
6 |
11 |
12 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/06-button-dropup-variants.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button Dropup Variants
3 | ---
4 |
5 | Dropup variation
6 | Trigger dropdown menus above elements by adding .dropup to the parent.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/06-button-dropup-variants.mustache:
--------------------------------------------------------------------------------
1 |
2 | Right dropup
3 |
4 |
6 |
13 |
14 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/07-dropdown.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Dropdown
3 | ---
4 |
5 |
6 |
7 | Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin .
8 |
9 | Example
10 | Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.
11 |
12 | Alignment
13 | By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
14 |
15 |
May require additional positioning
16 |
Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain overflow properties or appear out of bounds of the viewport. Address these issues on your own as they arise.
17 |
19 |
Deprecated .pull-right alignment
20 |
As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.
21 |
2 |
6 |
11 |
12 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/08-dropdown-variants.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Dropdown Header
3 | ---
4 |
5 |
6 | Add a header to label sections of actions in any dropdown menu.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/08-dropdown-variants.mustache:
--------------------------------------------------------------------------------
1 | Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup to the parent.
2 |
3 |
7 |
12 |
13 |
14 |
15 | Add a header to label sections of actions in any dropdown menu.
16 |
32 |
33 | Divider
34 | Add a divider to separate series of links in a dropdown menu.
35 |
50 |
51 | Disabled menu items
52 | Add .disabled to a <li> in the dropdown to disable the link.
53 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/09-navs.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Navs
3 | ---
4 |
5 | Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.
6 |
7 |
8 |
Using navs for tab panels requires JavaScript tabs plugin
9 |
For tabs with tabbable areas, you must use the tabs JavaScript plugin . The markup will also require additional role and ARIA attributes – see the plugin's example markup for further details.
10 |
13 |
Make navs used as navigation accessible
14 |
If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.
15 |
2 | {{# navList }}
3 | {{ text }}
6 |
7 |
8 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/10-navs-variants.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Navs
3 | ---
4 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/10-navs-variants.mustache:
--------------------------------------------------------------------------------
1 | Tabs
2 | Note the .nav-tabs class requires the .nav base class.
3 |
8 | Pills
9 | Take that same HTML, but use .nav-pills instead:
10 |
15 |
16 | Pills are also vertically stackable. Just add .nav-stacked.
17 |
22 | Justified
23 | Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.
24 | Justified navbar nav links are currently not supported.
25 | Safari and responsive justified navs
26 | As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example .
27 |
28 |
33 |
38 |
39 | Disabled links
40 | For any nav component (tabs or pills), add .disabled for gray links and no hover effects .
41 |
42 | Link functionality not impacted
43 | This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.
44 |
45 |
50 |
51 | Tabs with dropdowns
52 |
68 | Pills with dropdowns
69 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/12-pagination.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Pagination
3 | ---
4 |
5 | Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative .
6 |
7 |
8 | Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/12-pagination.mustache:
--------------------------------------------------------------------------------
1 |
2 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/13-pagination-variants.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Pagination
3 | ---
4 |
5 | Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative .
6 |
7 |
8 | Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/13-pagination-variants.mustache:
--------------------------------------------------------------------------------
1 | Disabled and active states
2 | Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.
3 |
4 |
13 |
14 |
15 | You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.
16 | Sizing
17 | Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.
18 |
19 |
28 |
29 |
30 |
39 |
40 |
41 |
50 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/14-pager.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Pager
3 | ---
4 |
5 |
6 | Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/14-pager.mustache:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/15-pager-variants.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Pager Variants
3 | ---
4 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/15-pager-variants.mustache:
--------------------------------------------------------------------------------
1 | Aligned links
2 | Alternatively, you can align each link to the sides:
3 |
4 |
8 |
9 | Optional disabled state
10 | Pager links also use the general .disabled utility class from the pagination.
11 |
12 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/16-navbar-nav.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Navbar Nav
3 | ---
4 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/16-navbar-nav.mustache:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/17-navbar-form.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Navbar Form
3 | ---
4 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/03-navigation/17-navbar-form.mustache:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/04-components/00-button-groups.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button Groups
3 | ---
4 |
5 | Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin .
6 |
7 |
11 |
12 |
13 |
Ensure correct role and provide a label
14 |
In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate role attribute needs to be provided. For button groups, this would be role="group", while toolbars should have a role="toolbar".
15 |
One exception are groups which only contain a single control (for instance the justified button groups with <button> elements) or a dropdown.
16 |
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use aria-label, but alternatives such as aria-labelledby can also be used.
17 |
Basic example
20 | Wrap a series of buttons with .btn in .btn-group.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/04-components/00-button-groups.mustache:
--------------------------------------------------------------------------------
1 |
2 | {{# buttonGroupList }}
3 | {{> atoms-button }}
4 | {{/ buttonGroupList }}
5 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/04-components/01-button-groups-variants.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button Groups
3 | ---
4 |
5 | Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin .
6 |
7 |
11 |
12 |
13 |
Ensure correct role and provide a label
14 |
In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate role attribute needs to be provided. For button groups, this would be role="group", while toolbars should have a role="toolbar".
15 |
One exception are groups which only contain a single control (for instance the justified button groups with <button> elements) or a dropdown.
16 |
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use aria-label, but alternatives such as aria-labelledby can also be used.
17 |
Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.
3 |
4 | 1
5 | 2
6 | 3
7 | 4
8 |
9 |
10 | 5
11 | 6
12 | 7
13 |
14 |
15 | 8
16 |
17 | Sizing
18 | Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including when nesting multiple groups.
19 |
20 | Left
21 | Middle
22 | Right
23 |
24 |
26 | Left
27 | Middle
28 | Right
29 |
30 |
32 | Left
33 | Middle
34 | Right
35 |
36 |
38 | Left
39 | Middle
40 | Right
41 |
42 |
43 | Nesting
44 | Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.
45 |
46 |
1
47 |
2
48 |
49 |
50 | Dropdown
51 |
53 |
57 |
58 |
Vertical variation
61 | Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
62 |
63 |
Button
64 |
Button
65 |
66 |
67 | Dropdown
68 |
70 |
74 |
75 |
Button
76 |
Button
77 |
78 |
79 | Dropdown
80 |
82 |
86 |
87 |
88 |
89 | Dropdown
90 |
92 |
96 |
97 |
98 |
99 | Dropdown
100 |
102 |
106 |
107 |
Justified button groups
110 | Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.
111 | Handling borders
112 | Due to the specific HTML and CSS used to justify buttons (namely display: table-cell), the borders between them are doubled. In regular button groups, margin-left: -1px is used to stack the borders instead of removing them. However, margin doesn't work with display: table-cell. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.
113 | IE8 and borders
114 | Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <a> or <button> elements. To get around that, wrap each button in another .btn-group.
115 | See #12476 for more information.
116 |
117 |
118 | With <a> elements
119 | Just wrap a series of .btns in .btn-group.btn-group-justified.
120 |
125 | Links acting as buttons
144 | If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".
145 | With <button> elements
146 | To use justified button groups with <button> elements, you must wrap each button in a button group . Most browsers don't properly apply our CSS for justification to <button> elements, but since we support button dropdowns, we can work around that.
147 |
148 |
149 | Left
150 |
151 |
152 | Middle
153 |
154 |
155 | Right
156 |
157 |
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
6 |
7 | Examples
8 | Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.
9 |
10 |
11 |
No default class
12 |
Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.
13 |
2 | {{ alertText }}
3 | {{# dismissableAlert }}
4 | ×
7 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/05-messaging/01-alerts-variants.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Alerts
3 | ---
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/05-messaging/01-alerts-variants.mustache:
--------------------------------------------------------------------------------
1 |
2 | Well done! You successfully read this important alert message.
3 |
4 |
5 | Heads up! This alert needs your attention, but it's not super important.
6 |
7 |
8 | Warning! Better check yourself, you're not looking too good.
9 |
10 |
11 | Oh snap! Change a few things up and try submitting again.
12 |
13 |
14 | Dismissible alerts
15 | Build on any alert by adding an optional .alert-dismissible and close button.
16 |
17 | Requires JavaScript alert plugin
18 | For fully functioning, dismissible alerts, you must use the alerts JavaScript plugin .
19 |
20 | × Warning! Better check yourself, you're not looking too good.
22 |
23 |
24 | Ensure proper behavior across all devices
25 | Be sure to use the <button> element with the data-dismiss="alert" data attribute.
26 |
27 | Links in alerts
28 | Use the .alert-link utility class to quickly provide matching colored links within any alert.
29 |
30 |
33 |
36 |
39 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/06-list-groups/03-list-group.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: List Group
3 | ---
4 |
5 | List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
6 |
7 | Basic example
8 | The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/06-list-groups/03-list-group.mustache:
--------------------------------------------------------------------------------
1 |
2 | {{# listGroup }}
3 | {{{ text }}}
4 | {{# badge }}{{> atoms-badges }}{{/ badge }}
5 |
6 | {{/ listGroup }}
7 |
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/06-list-groups/04-list-group-variants.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: List Group
3 | ---
4 |
5 | List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
--------------------------------------------------------------------------------
/dist/_patterns/01-molecules/06-list-groups/04-list-group-variants.mustache:
--------------------------------------------------------------------------------
1 | Badges
2 | Add the badges component to any list group item and it will automatically be positioned on the right.
3 |
4 |
5 | 14
6 | Cras justo odio
7 |
8 |
9 | 2
10 | Dapibus ac facilisis in
11 |
12 |
13 | 1
14 | Morbi leo risus
15 |
16 |
17 |
18 | Linked items
19 | Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.
20 |
29 |
30 |
31 | List group items may be buttons instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element. Don't use the standard .btn classes here.
32 |
33 | Cras justo odio
34 | Dapibus ac facilisis in
35 | Morbi leo risus
36 | Porta ac consectetur ac
37 | Vestibulum at eros
38 |
39 |
40 | Disabled items
41 | Add .disabled to a .list-group-item to gray it out to appear disabled.
42 |
51 |
52 | Contextual classes
53 | Use contextual classes to style list items, default or linked. Also includes .active state.
54 |
55 | Dapibus ac facilisis in
56 | Cras sit amet nibh libero
57 | Porta ac consectetur ac
58 | Vestibulum at eros
59 |
60 |
66 |
67 | Custom content
68 | Add nearly any HTML within, even for linked list groups like the one below.
69 |
--------------------------------------------------------------------------------
/dist/_patterns/02-organisms/00-navigation/00-navbar.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Navigation Bar
3 | ---
4 |
5 | Default navbar
6 | Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.
7 | Justified navbar nav links are currently not supported.
8 |
9 | Overflowing content
10 | Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
11 |
12 | Reduce the amount or width of navbar items.
13 | Hide certain navbar items at certain screen sizes using responsive utility classes .
14 | Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.
15 |
16 |
17 | If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.
18 | The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.
19 |
20 | Changing the collapsed mobile navbar breakpoint
21 | The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
22 |
23 | Make navbars accessible
24 | Be sure to use a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
--------------------------------------------------------------------------------
/dist/_patterns/02-organisms/00-navigation/00-navbar.mustache:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
13 |
14 | {{# navbarNavFirst }}
15 | {{> molecules-navbar-nav }}
16 | {{/ navbarNavFirst }}
17 | {{> molecules-navbar-form }}
18 | {{# navbarNavLast }}
19 | {{> molecules-navbar-nav }}
20 | {{/ navbarNavLast }}
21 |
22 |
--------------------------------------------------------------------------------
/dist/_patterns/02-organisms/00-navigation/01-navbar-variants.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Navigation Bar
3 | ---
--------------------------------------------------------------------------------
/dist/_patterns/02-organisms/00-navigation/01-navbar-variants.mustache:
--------------------------------------------------------------------------------
1 | Inverted navbar
2 | Modify the look of the navbar by adding .navbar-inverse.
3 |
4 |
5 |
6 |
15 |
16 |
17 |
24 |
26 |
27 |
--------------------------------------------------------------------------------
/dist/_patterns/02-organisms/01-forms/00-input-groups-dropdown.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Input Groups Dropdown
3 | ---
4 |
--------------------------------------------------------------------------------
/dist/_patterns/02-organisms/01-forms/00-input-groups-dropdown.mustache:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/dist/_patterns/02-organisms/01-forms/01-input-groups-segmented.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Input Groups Dropdown
3 | ---
4 |
--------------------------------------------------------------------------------
/dist/_patterns/02-organisms/01-forms/01-input-groups-segmented.mustache:
--------------------------------------------------------------------------------
1 |
16 |
17 |
--------------------------------------------------------------------------------
/dist/_patterns/02-organisms/02-media/00-media-object.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Media Object
3 | ---
4 |
--------------------------------------------------------------------------------
/dist/_patterns/02-organisms/02-media/00-media-object.mustache:
--------------------------------------------------------------------------------
1 |
24 |
25 |
--------------------------------------------------------------------------------
/dist/_patterns/02-organisms/02-media/01-media-list.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Media List
3 | ---
4 |
5 | With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
--------------------------------------------------------------------------------
/dist/_patterns/02-organisms/02-media/01-media-list.mustache:
--------------------------------------------------------------------------------
1 |
2 |
9 |
--------------------------------------------------------------------------------
/dist/css/bootstrap-theme.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap v3.3.5 (http://getbootstrap.com)
3 | * Copyright 2011-2015 Twitter, Inc.
4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
5 | */
6 | .btn-default,
7 | .btn-primary,
8 | .btn-success,
9 | .btn-info,
10 | .btn-warning,
11 | .btn-danger {
12 | text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
13 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
14 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
15 | }
16 | .btn-default:active,
17 | .btn-primary:active,
18 | .btn-success:active,
19 | .btn-info:active,
20 | .btn-warning:active,
21 | .btn-danger:active,
22 | .btn-default.active,
23 | .btn-primary.active,
24 | .btn-success.active,
25 | .btn-info.active,
26 | .btn-warning.active,
27 | .btn-danger.active {
28 | -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
29 | box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
30 | }
31 | .btn-default.disabled,
32 | .btn-primary.disabled,
33 | .btn-success.disabled,
34 | .btn-info.disabled,
35 | .btn-warning.disabled,
36 | .btn-danger.disabled,
37 | .btn-default[disabled],
38 | .btn-primary[disabled],
39 | .btn-success[disabled],
40 | .btn-info[disabled],
41 | .btn-warning[disabled],
42 | .btn-danger[disabled],
43 | fieldset[disabled] .btn-default,
44 | fieldset[disabled] .btn-primary,
45 | fieldset[disabled] .btn-success,
46 | fieldset[disabled] .btn-info,
47 | fieldset[disabled] .btn-warning,
48 | fieldset[disabled] .btn-danger {
49 | -webkit-box-shadow: none;
50 | box-shadow: none;
51 | }
52 | .btn-default .badge,
53 | .btn-primary .badge,
54 | .btn-success .badge,
55 | .btn-info .badge,
56 | .btn-warning .badge,
57 | .btn-danger .badge {
58 | text-shadow: none;
59 | }
60 | .btn:active,
61 | .btn.active {
62 | background-image: none;
63 | }
64 | .btn-default {
65 | text-shadow: 0 1px 0 #fff;
66 | background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
67 | background-image: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
68 | background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
69 | background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
70 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
71 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
72 | background-repeat: repeat-x;
73 | border-color: #dbdbdb;
74 | border-color: #ccc;
75 | }
76 | .btn-default:hover,
77 | .btn-default:focus {
78 | background-color: #e0e0e0;
79 | background-position: 0 -15px;
80 | }
81 | .btn-default:active,
82 | .btn-default.active {
83 | background-color: #e0e0e0;
84 | border-color: #dbdbdb;
85 | }
86 | .btn-default.disabled,
87 | .btn-default[disabled],
88 | fieldset[disabled] .btn-default,
89 | .btn-default.disabled:hover,
90 | .btn-default[disabled]:hover,
91 | fieldset[disabled] .btn-default:hover,
92 | .btn-default.disabled:focus,
93 | .btn-default[disabled]:focus,
94 | fieldset[disabled] .btn-default:focus,
95 | .btn-default.disabled.focus,
96 | .btn-default[disabled].focus,
97 | fieldset[disabled] .btn-default.focus,
98 | .btn-default.disabled:active,
99 | .btn-default[disabled]:active,
100 | fieldset[disabled] .btn-default:active,
101 | .btn-default.disabled.active,
102 | .btn-default[disabled].active,
103 | fieldset[disabled] .btn-default.active {
104 | background-color: #e0e0e0;
105 | background-image: none;
106 | }
107 | .btn-primary {
108 | background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
109 | background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
110 | background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
111 | background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
112 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
113 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
114 | background-repeat: repeat-x;
115 | border-color: #245580;
116 | }
117 | .btn-primary:hover,
118 | .btn-primary:focus {
119 | background-color: #265a88;
120 | background-position: 0 -15px;
121 | }
122 | .btn-primary:active,
123 | .btn-primary.active {
124 | background-color: #265a88;
125 | border-color: #245580;
126 | }
127 | .btn-primary.disabled,
128 | .btn-primary[disabled],
129 | fieldset[disabled] .btn-primary,
130 | .btn-primary.disabled:hover,
131 | .btn-primary[disabled]:hover,
132 | fieldset[disabled] .btn-primary:hover,
133 | .btn-primary.disabled:focus,
134 | .btn-primary[disabled]:focus,
135 | fieldset[disabled] .btn-primary:focus,
136 | .btn-primary.disabled.focus,
137 | .btn-primary[disabled].focus,
138 | fieldset[disabled] .btn-primary.focus,
139 | .btn-primary.disabled:active,
140 | .btn-primary[disabled]:active,
141 | fieldset[disabled] .btn-primary:active,
142 | .btn-primary.disabled.active,
143 | .btn-primary[disabled].active,
144 | fieldset[disabled] .btn-primary.active {
145 | background-color: #265a88;
146 | background-image: none;
147 | }
148 | .btn-success {
149 | background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
150 | background-image: -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
151 | background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641));
152 | background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
153 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
154 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
155 | background-repeat: repeat-x;
156 | border-color: #3e8f3e;
157 | }
158 | .btn-success:hover,
159 | .btn-success:focus {
160 | background-color: #419641;
161 | background-position: 0 -15px;
162 | }
163 | .btn-success:active,
164 | .btn-success.active {
165 | background-color: #419641;
166 | border-color: #3e8f3e;
167 | }
168 | .btn-success.disabled,
169 | .btn-success[disabled],
170 | fieldset[disabled] .btn-success,
171 | .btn-success.disabled:hover,
172 | .btn-success[disabled]:hover,
173 | fieldset[disabled] .btn-success:hover,
174 | .btn-success.disabled:focus,
175 | .btn-success[disabled]:focus,
176 | fieldset[disabled] .btn-success:focus,
177 | .btn-success.disabled.focus,
178 | .btn-success[disabled].focus,
179 | fieldset[disabled] .btn-success.focus,
180 | .btn-success.disabled:active,
181 | .btn-success[disabled]:active,
182 | fieldset[disabled] .btn-success:active,
183 | .btn-success.disabled.active,
184 | .btn-success[disabled].active,
185 | fieldset[disabled] .btn-success.active {
186 | background-color: #419641;
187 | background-image: none;
188 | }
189 | .btn-info {
190 | background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
191 | background-image: -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
192 | background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2));
193 | background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
194 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
195 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
196 | background-repeat: repeat-x;
197 | border-color: #28a4c9;
198 | }
199 | .btn-info:hover,
200 | .btn-info:focus {
201 | background-color: #2aabd2;
202 | background-position: 0 -15px;
203 | }
204 | .btn-info:active,
205 | .btn-info.active {
206 | background-color: #2aabd2;
207 | border-color: #28a4c9;
208 | }
209 | .btn-info.disabled,
210 | .btn-info[disabled],
211 | fieldset[disabled] .btn-info,
212 | .btn-info.disabled:hover,
213 | .btn-info[disabled]:hover,
214 | fieldset[disabled] .btn-info:hover,
215 | .btn-info.disabled:focus,
216 | .btn-info[disabled]:focus,
217 | fieldset[disabled] .btn-info:focus,
218 | .btn-info.disabled.focus,
219 | .btn-info[disabled].focus,
220 | fieldset[disabled] .btn-info.focus,
221 | .btn-info.disabled:active,
222 | .btn-info[disabled]:active,
223 | fieldset[disabled] .btn-info:active,
224 | .btn-info.disabled.active,
225 | .btn-info[disabled].active,
226 | fieldset[disabled] .btn-info.active {
227 | background-color: #2aabd2;
228 | background-image: none;
229 | }
230 | .btn-warning {
231 | background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
232 | background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
233 | background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316));
234 | background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
235 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
236 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
237 | background-repeat: repeat-x;
238 | border-color: #e38d13;
239 | }
240 | .btn-warning:hover,
241 | .btn-warning:focus {
242 | background-color: #eb9316;
243 | background-position: 0 -15px;
244 | }
245 | .btn-warning:active,
246 | .btn-warning.active {
247 | background-color: #eb9316;
248 | border-color: #e38d13;
249 | }
250 | .btn-warning.disabled,
251 | .btn-warning[disabled],
252 | fieldset[disabled] .btn-warning,
253 | .btn-warning.disabled:hover,
254 | .btn-warning[disabled]:hover,
255 | fieldset[disabled] .btn-warning:hover,
256 | .btn-warning.disabled:focus,
257 | .btn-warning[disabled]:focus,
258 | fieldset[disabled] .btn-warning:focus,
259 | .btn-warning.disabled.focus,
260 | .btn-warning[disabled].focus,
261 | fieldset[disabled] .btn-warning.focus,
262 | .btn-warning.disabled:active,
263 | .btn-warning[disabled]:active,
264 | fieldset[disabled] .btn-warning:active,
265 | .btn-warning.disabled.active,
266 | .btn-warning[disabled].active,
267 | fieldset[disabled] .btn-warning.active {
268 | background-color: #eb9316;
269 | background-image: none;
270 | }
271 | .btn-danger {
272 | background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
273 | background-image: -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
274 | background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a));
275 | background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
276 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
277 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
278 | background-repeat: repeat-x;
279 | border-color: #b92c28;
280 | }
281 | .btn-danger:hover,
282 | .btn-danger:focus {
283 | background-color: #c12e2a;
284 | background-position: 0 -15px;
285 | }
286 | .btn-danger:active,
287 | .btn-danger.active {
288 | background-color: #c12e2a;
289 | border-color: #b92c28;
290 | }
291 | .btn-danger.disabled,
292 | .btn-danger[disabled],
293 | fieldset[disabled] .btn-danger,
294 | .btn-danger.disabled:hover,
295 | .btn-danger[disabled]:hover,
296 | fieldset[disabled] .btn-danger:hover,
297 | .btn-danger.disabled:focus,
298 | .btn-danger[disabled]:focus,
299 | fieldset[disabled] .btn-danger:focus,
300 | .btn-danger.disabled.focus,
301 | .btn-danger[disabled].focus,
302 | fieldset[disabled] .btn-danger.focus,
303 | .btn-danger.disabled:active,
304 | .btn-danger[disabled]:active,
305 | fieldset[disabled] .btn-danger:active,
306 | .btn-danger.disabled.active,
307 | .btn-danger[disabled].active,
308 | fieldset[disabled] .btn-danger.active {
309 | background-color: #c12e2a;
310 | background-image: none;
311 | }
312 | .thumbnail,
313 | .img-thumbnail {
314 | -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
315 | box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
316 | }
317 | .dropdown-menu > li > a:hover,
318 | .dropdown-menu > li > a:focus {
319 | background-color: #e8e8e8;
320 | background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
321 | background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
322 | background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
323 | background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
324 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
325 | background-repeat: repeat-x;
326 | }
327 | .dropdown-menu > .active > a,
328 | .dropdown-menu > .active > a:hover,
329 | .dropdown-menu > .active > a:focus {
330 | background-color: #2e6da4;
331 | background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
332 | background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
333 | background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
334 | background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
335 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
336 | background-repeat: repeat-x;
337 | }
338 | .navbar-default {
339 | background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%);
340 | background-image: -o-linear-gradient(top, #fff 0%, #f8f8f8 100%);
341 | background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8f8f8));
342 | background-image: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
343 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
344 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
345 | background-repeat: repeat-x;
346 | border-radius: 4px;
347 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
348 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
349 | }
350 | .navbar-default .navbar-nav > .open > a,
351 | .navbar-default .navbar-nav > .active > a {
352 | background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
353 | background-image: -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
354 | background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2));
355 | background-image: linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%);
356 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);
357 | background-repeat: repeat-x;
358 | -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
359 | box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
360 | }
361 | .navbar-brand,
362 | .navbar-nav > li > a {
363 | text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
364 | }
365 | .navbar-inverse {
366 | background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
367 | background-image: -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
368 | background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222));
369 | background-image: linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
370 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
371 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
372 | background-repeat: repeat-x;
373 | border-radius: 4px;
374 | }
375 | .navbar-inverse .navbar-nav > .open > a,
376 | .navbar-inverse .navbar-nav > .active > a {
377 | background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%);
378 | background-image: -o-linear-gradient(top, #080808 0%, #0f0f0f 100%);
379 | background-image: -webkit-gradient(linear, left top, left bottom, from(#080808), to(#0f0f0f));
380 | background-image: linear-gradient(to bottom, #080808 0%, #0f0f0f 100%);
381 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
382 | background-repeat: repeat-x;
383 | -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
384 | box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
385 | }
386 | .navbar-inverse .navbar-brand,
387 | .navbar-inverse .navbar-nav > li > a {
388 | text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
389 | }
390 | .navbar-static-top,
391 | .navbar-fixed-top,
392 | .navbar-fixed-bottom {
393 | border-radius: 0;
394 | }
395 | @media (max-width: 767px) {
396 | .navbar .navbar-nav .open .dropdown-menu > .active > a,
397 | .navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
398 | .navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
399 | color: #fff;
400 | background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
401 | background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
402 | background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
403 | background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
404 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
405 | background-repeat: repeat-x;
406 | }
407 | }
408 | .alert {
409 | text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
410 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
411 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
412 | }
413 | .alert-success {
414 | background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
415 | background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
416 | background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
417 | background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
418 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
419 | background-repeat: repeat-x;
420 | border-color: #b2dba1;
421 | }
422 | .alert-info {
423 | background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
424 | background-image: -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
425 | background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
426 | background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
427 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
428 | background-repeat: repeat-x;
429 | border-color: #9acfea;
430 | }
431 | .alert-warning {
432 | background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
433 | background-image: -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
434 | background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0));
435 | background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
436 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
437 | background-repeat: repeat-x;
438 | border-color: #f5e79e;
439 | }
440 | .alert-danger {
441 | background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
442 | background-image: -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
443 | background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
444 | background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
445 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
446 | background-repeat: repeat-x;
447 | border-color: #dca7a7;
448 | }
449 | .progress {
450 | background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
451 | background-image: -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
452 | background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5));
453 | background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
454 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
455 | background-repeat: repeat-x;
456 | }
457 | .progress-bar {
458 | background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%);
459 | background-image: -o-linear-gradient(top, #337ab7 0%, #286090 100%);
460 | background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090));
461 | background-image: linear-gradient(to bottom, #337ab7 0%, #286090 100%);
462 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
463 | background-repeat: repeat-x;
464 | }
465 | .progress-bar-success {
466 | background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
467 | background-image: -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
468 | background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44));
469 | background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
470 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
471 | background-repeat: repeat-x;
472 | }
473 | .progress-bar-info {
474 | background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
475 | background-image: -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
476 | background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5));
477 | background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
478 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
479 | background-repeat: repeat-x;
480 | }
481 | .progress-bar-warning {
482 | background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
483 | background-image: -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
484 | background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f));
485 | background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
486 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
487 | background-repeat: repeat-x;
488 | }
489 | .progress-bar-danger {
490 | background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
491 | background-image: -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
492 | background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c));
493 | background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
494 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
495 | background-repeat: repeat-x;
496 | }
497 | .progress-bar-striped {
498 | background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
499 | background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
500 | background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
501 | }
502 | .list-group {
503 | border-radius: 4px;
504 | -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
505 | box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
506 | }
507 | .list-group-item.active,
508 | .list-group-item.active:hover,
509 | .list-group-item.active:focus {
510 | text-shadow: 0 -1px 0 #286090;
511 | background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%);
512 | background-image: -o-linear-gradient(top, #337ab7 0%, #2b669a 100%);
513 | background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
514 | background-image: linear-gradient(to bottom, #337ab7 0%, #2b669a 100%);
515 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
516 | background-repeat: repeat-x;
517 | border-color: #2b669a;
518 | }
519 | .list-group-item.active .badge,
520 | .list-group-item.active:hover .badge,
521 | .list-group-item.active:focus .badge {
522 | text-shadow: none;
523 | }
524 | .panel {
525 | -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
526 | box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
527 | }
528 | .panel-default > .panel-heading {
529 | background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
530 | background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
531 | background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
532 | background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
533 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
534 | background-repeat: repeat-x;
535 | }
536 | .panel-primary > .panel-heading {
537 | background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
538 | background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
539 | background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
540 | background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
541 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
542 | background-repeat: repeat-x;
543 | }
544 | .panel-success > .panel-heading {
545 | background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
546 | background-image: -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
547 | background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6));
548 | background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
549 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
550 | background-repeat: repeat-x;
551 | }
552 | .panel-info > .panel-heading {
553 | background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
554 | background-image: -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
555 | background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3));
556 | background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
557 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
558 | background-repeat: repeat-x;
559 | }
560 | .panel-warning > .panel-heading {
561 | background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
562 | background-image: -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
563 | background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc));
564 | background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
565 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
566 | background-repeat: repeat-x;
567 | }
568 | .panel-danger > .panel-heading {
569 | background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
570 | background-image: -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
571 | background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc));
572 | background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
573 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
574 | background-repeat: repeat-x;
575 | }
576 | .well {
577 | background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
578 | background-image: -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
579 | background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5));
580 | background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
581 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
582 | background-repeat: repeat-x;
583 | border-color: #dcdcdc;
584 | -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
585 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
586 | }
587 | /*# sourceMappingURL=bootstrap-theme.css.map */
588 |
--------------------------------------------------------------------------------
/dist/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/favicon.ico
--------------------------------------------------------------------------------
/dist/fonts/icons.dev.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | This is a custom SVG font generated by IcoMoon.
6 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/dist/fonts/icons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/fonts/icons.eot
--------------------------------------------------------------------------------
/dist/fonts/icons.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | This is a custom SVG font generated by IcoMoon.
6 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/dist/fonts/icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/fonts/icons.ttf
--------------------------------------------------------------------------------
/dist/fonts/icons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/fonts/icons.woff
--------------------------------------------------------------------------------
/dist/images/ajax-loader.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/ajax-loader.gif
--------------------------------------------------------------------------------
/dist/images/bootstrapthumb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/bootstrapthumb.jpg
--------------------------------------------------------------------------------
/dist/images/bootstrapthumb64.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/bootstrapthumb64.jpg
--------------------------------------------------------------------------------
/dist/images/favicon_16x16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/favicon_16x16.jpg
--------------------------------------------------------------------------------
/dist/images/favicon_32x32.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/favicon_32x32.jpg
--------------------------------------------------------------------------------
/dist/images/fpo_16x9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/fpo_16x9.png
--------------------------------------------------------------------------------
/dist/images/fpo_4x3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/fpo_4x3.png
--------------------------------------------------------------------------------
/dist/images/fpo_avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/fpo_avatar.png
--------------------------------------------------------------------------------
/dist/images/fpo_square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/fpo_square.png
--------------------------------------------------------------------------------
/dist/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/logo.png
--------------------------------------------------------------------------------
/dist/images/sample/landscape-16x9-mountains.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/sample/landscape-16x9-mountains.jpg
--------------------------------------------------------------------------------
/dist/images/sample/thumb-square-fire.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/sample/thumb-square-fire.jpg
--------------------------------------------------------------------------------
/dist/images/sample/thumb-square-gear.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/sample/thumb-square-gear.jpg
--------------------------------------------------------------------------------
/dist/images/sample/thumb-square-ivy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/sample/thumb-square-ivy.jpg
--------------------------------------------------------------------------------
/dist/images/sample/thumb-square-river.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/sample/thumb-square-river.jpg
--------------------------------------------------------------------------------
/dist/images/sample/thumb-square-yosemite.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/sample/thumb-square-yosemite.jpg
--------------------------------------------------------------------------------
/dist/images/sample/tout-4x3-climber.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/sample/tout-4x3-climber.jpg
--------------------------------------------------------------------------------
/dist/images/sample/tout-4x3-climbers.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/sample/tout-4x3-climbers.jpg
--------------------------------------------------------------------------------
/dist/images/sample/tout-4x3-stream.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattern-lab/starterkit-mustache-bootstrap/5ba5f3c79c590c6137293e1a5a72385a4b5381a9/dist/images/sample/tout-4x3-stream.jpg
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "starterkit-mustache-bootstrap",
3 | "version": "0.1.1",
4 | "description": "A Bootstrap starter kit for Pattern Lab",
5 | "main": "README.md",
6 | "repository": {
7 | "type": "git",
8 | "url": "git+https://github.com/pattern-lab/starterkit-mustache-bootstrap.git"
9 | },
10 | "keywords": [
11 | "Pattern Lab",
12 | "Atomic Design",
13 | "Mustache",
14 | "Bootstrap",
15 | "Starterkit"
16 | ],
17 | "author": "Ian Frost",
18 | "license": "MIT",
19 | "bugs": {
20 | "url": "https://github.com/pattern-lab/starterkit-mustache-bootstrap/issues"
21 | },
22 | "homepage": "https://github.com/pattern-lab/starterkit-mustache-bootstrap#readme"
23 | }
24 |
--------------------------------------------------------------------------------