1<!-- 2 _ _ _ _ 3 | | | (_) | | 4 | |__| |_ _ __ ___ _ __ ___ ___| | 5 | __ | | '__/ _ \ | '_ ` _ \ / _ \ | 6 | | | | | | | __/ | | | | | | __/_| 7 |_| |_|_|_| \___| |_| |_| |_|\___(_) 8 9Need a Front End Developer? Take my card. 10http://matt-harris.net/take-my-card.html 11--> 12<!DOCTYPE html> 13<html lang="en"> 14 <head> 15 <meta charset="utf-8" /> 16 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 17 <title>Outline - The clean & simple responsive CSS framework.</title> 18 <meta name="description" content="" /> 19 <meta name="viewport" content="width=device-width, initial-scale=1" /> 20 <!-- favicon --> 21 <link rel="shortcut icon" href="favicon.ico" /> 22 <link rel="apple-touch-icon-precomposed" href="favicon-152.png" /> 23 <meta name="msapplication-TileColor" content="#38a1d6" /> 24 <meta name="msapplication-TileImage" content="favicon-152.png" /> 25 <!-- google fonts --> 26 <link 27 href="//fonts.googleapis.com/css?family=Lato:400,700,900|Merriweather:400,400italic,700,700italic" 28 rel="stylesheet" 29 type="text/css" 30 /> 31 <!-- site style --> 32 <link href="css/outline.min.css" media="all" rel="stylesheet" type="text/css" /> 33
33<script src="js/min/modernizr.custom.js"></script>
33 34 </head> 35 <body> 36 <div class="clearfix" role="main"> 37 <div class="sidebar hide-for-medium-down"> 38 <a class="logo" href="/"> 39 <img src="img/min/logo.png" width="200" alt="Outline CSS framework" /> 40 </a> 41 42 <nav> 43 <ul class="sidebar__nav list--unstyled"> 44 <li> 45 <a href="#get-started" data-scroll>Get started</a> 46 <ul> 47 <li> 48 <a href="#overview" data-scroll>Overview</a> 49 </li> 50 </ul> 51 </li> 52 <li> 53 <a href="#susy" data-scroll>Susy</a> 54 </li> 55 <li> 56 <a href="#colours" data-scroll>Colours</a> 57 </li> 58 <li> 59 <a href="#breakpoints" data-scroll>Breakpoints</a> 60 </li> 61 <li> 62 <a href="#typography" data-scroll>Typography</a> 63 <ul> 64 <li> 65 <a href="#headings" data-scroll>Headings</a> 66 </li> 67 <li> 68 <a href="#fonts" data-scroll>Fonts</a> 69 </li> 70 <li> 71 <a href="#body" data-scroll>Body</a> 72 </li> 73 <li> 74 <a href="#links" data-scroll>Links</a> 75 </li> 76 <li> 77 <a href="#hr" data-scroll>Horizonal line</a> 78 </li> 79 <li> 80 <a href="#blockquote" data-scroll>Blockquote</a> 81 </li> 82 <li> 83 <a href="#figure" data-scroll>Figure</a> 84 </li> 85 </ul> 86 </li> 87 <li> 88 <a href="#components" data-scroll>Components</a> 89 <ul> 90 <li> 91 <a href="#buttons" data-scroll>Buttons</a> 92 </li> 93 <li> 94 <a href="#code" data-scroll>Code</a> 95 </li> 96 <li> 97 <a href="#embed" data-scroll>Embed</a> 98 </li> 99 <li> 100 <a href="#forms" data-scroll>Forms</a> 101 </li> 102 <li> 103 <a href="#lists" data-scroll>Lists</a> 104 </li> 105 <li> 106 <a href="#media-objects" data-scroll>Media objects</a> 107 </li> 108 <li> 109 <a href="#pagination" data-scroll>Pagination</a> 110 </li> 111 <li> 112 <a href="#tables" data-scroll>Tables</a> 113 </li> 114 </ul> 115 </li> 116 <li> 117 <a href="#utilities" data-scroll>Utilities</a> 118 <ul> 119 <li> 120 <a href="#variables" data-scroll>Variables</a> 121 </li> 122 <li> 123 <a href="#helpers" data-scroll>Helpers</a> 124 </li> 125 <li> 126 <a href="#mixins" data-scroll>Mixins</a> 127 </li> 128 <li> 129 <a href="#functions" data-scroll>Functions</a> 130 </li> 131 </ul> 132 </li> 133 <li> 134 <a href="#vendor" data-scroll>Vendor</a> 135 <ul> 136 <li> 137 <a href="#font-awesome" data-scroll>Font awesome</a> 138 </li> 139 </ul> 140 </li> 141 </ul> 142 </nav> 143 </div> 144 145 <div class="docs"> 146 <div class="nav-bar clearfix"> 147 <a class="logo hide-for-medium-up float-left" href="/"> 148 <img src="img/min/logo.png" alt="Outline CSS framework" /> 149 </a> 150 151 <i class="nav-icon" id="trigger-overlay"></i> 152 153 <div class="nav-overlay"> 154 <i class="nav-close"></i> 155 <nav class="nav"> 156 <ul> 157 <li class="nav__item"> 158 <a href="/">Home</a> 159 </li> 160 <li class="nav__item"> 161 <a href="get-started.html">Get started</a> 162 </li> 163 <li class="nav__item"> 164 <a href="https://github.com/matt-harris/outline">View on GitHub</a> 165 </li> 166 <li class="nav__item"> 167 <a href="http://outline-mail.surge.sh/" target="_blank" 168 >Outline Email framework</a 169 > 170 </li> 171 </ul> 172 </nav> 173 </div> 174 </div> 175 176 <div class="docs__content clearfix"> 177 <section class="docs__item" id="get-started"> 178 <h1 class="docs__heading">Get started</h1> 179 180 <p>There are a few ways to get started with Outline.</p> 181 182 <p> 183 Download the 184 <a href="https://github.com/matt-harris/outline/archive/master.zip">latest release</a> 185 from GitHub. 186 </p> 187 188 <p>Install with Bower</p> 189 190 <pre><code>bower install outline</code></pre> 191 192 <p> 193 To clone the <a href="https://github.com/matt-harris/outline">git repository</a>. Just 194 run the following command. 195 </p> 196 197 <pre><code>[sudo] git clone [email protected]:matt-harris/outline.git</code></pre> 198 </section> 199 200 <section class="docs__item" id="overview"> 201 <h2 class="docs__heading">Overview</h2> 202 203 <h4>Compiling Sass</h4> 204 205 <p> 206 You will need a Sass compiler to watch and compile your Sass files into a CSS file. 207 </p> 208 209 <p> 210 Outline uses <a href="http://gulpjs.com/">gulp.js</a>
210 to watch and compile the Sass 211 files but also makes use of build tasks including 212 <a href="https://github.com/postcss/autoprefixer">autoprefixer</a>, minifying files, 213 JS file concatenation, image compression and browser refresh. Outline comes with a 214 fully commented <code>gulpfile.js</code> and <code>package.json</code> file which 215 lists the plugins used. For more information about getting sarted with gulp read this 216 excellent 217 <a href="http://markgoodyear.com/2014/01/getting-started-with-gulp/" 218 >intro by Mark Goodyear</a 219 > 220 </p> 221 222 <p> 223 Of course you can also use a compiler / build tool of your choice. A couple of the 224 more popular options are:- 225 </p> 226 227 <ul> 228 <li><a href="https://prepros.io/">Prepros</a></li> 229 <li><a href="https://incident57.com/codekit/">CodeKit</a></li> 230 <li><a href="http://gruntjs.com/">Grunt</a></li> 231 </ul> 232 233 <h4>Writing CSS</h4> 234 235 <p> 236 Outline follows the BEM (Block, Element, Modifier) method for writing & organising 237 CSS. BEM helps keep CSS logical and predictable. The naming convention follows this 238 pattern: 239 </p> 240 241 <pre><code>.block {} 242.block__element {} 243.block__element--modifier {} 244</code></pre> 245 246 <ul> 247 <li>.block represents the higher level of an abstraction or component.</li> 248 <li> 249 .block__element represents a descendent of .block that helps form .block as a whole. 250 </li> 251 <li>.block--modifier represents a different state or version of .block.</li> 252 </ul> 253 254 <p> 255 For more information about BEM, read 256 <a 257 href="http://www.csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/" 258 >this</a 259 > 260 and <a href="https://css-tricks.com/bem-101/">this</a>. 261 </p> 262 263 <h4>Writing Sass</h4> 264 265 <p> 266 Have a read of the excellent <a href="http://sass-guidelin.es/">Sass guidelines</a>. 267 It's a styleguide for Sass that helps everyone to write maintainable and scalable 268 Sass. 269 </p> 270 271 <h4>Start creating your HTML</h4> 272 273 <p>Iâve included <code>index.html</code> as a starting point.</p> 274 </section> 275 276 <hr class="hr-alt" /> 277 278 <section class="docs__item" id="susy"> 279 <h2 class="docs__heading">Susy</h2> 280 281 <p> 282 <a href="http://susy.oddbird.net/">Susy</a> [soo-zee], is a Sass add on for grids. 283 Susy allows you to build custom responsive grids on demand, rather than a framework. 284 This allows you to:- 285 </p> 286 287 <ul> 288 <li>Separate style from markup</li> 289 <li>Simple modular maintenance</li> 290 <li>Only need to write necessary CSS (No bloat)</li> 291 </ul> 292 293 <p> 294 I have created a 295 <a href="http://codepen.io/collection/DKpqjq/">Codepen collection</a> of example Susy 296 layouts. 297 </p> 298 299 <blockquote> 300 <p>I like the idea of grids-on-demand, rather than a strict framework.</p> 301 <cite>â Chris Coyier, CodePen</cite> 302 </blockquote> 303 304 <h4>Resources</h4> 305 306 <ul> 307 <li> 308 <a href="http://susy.oddbird.net/demos/">A list of Susy tutorials</a> 309 </li> 310 <li> 311 <a href="http://leveluptuts.com/tutorials/susy-tutorials" 312 >Susy Tutorials - 11 Parts (video)</a 313 > 314 </li> 315 <li> 316 <a href="http://css-tricks.com/build-web-layouts-easily-susy/" 317 >Build Web Layouts Easily with Susy</a 318 > 319 </li> 320 </ul> 321 </section> 322 323 <hr class="hr-alt" /> 324 325 <section class="docs__item" id="colours"> 326 <h2 class="docs__heading">Colours</h2> 327 328 <h4>Palette</h4> 329 330 <div class="swatch"> 331 <div class="swatch__colour bg-primary"></div> 332 <div class="swatch__text">Primary</div> 333 </div> 334 335 <div class="swatch"> 336 <div class="swatch__colour bg-secondary"></div> 337 <div class="swatch__text">Secondary</div> 338 </div> 339 340 <div class="swatch"> 341 <div class="swatch__colour bg-tertiary"></div> 342 <div class="swatch__text">Tertiary</div> 343 </div> 344 345 <div class="swatch"> 346 <div class="swatch__colour bg-grey"></div> 347 <div class="swatch__text">Grey</div> 348 </div> 349 350 <div class="swatch"> 351 <div class="swatch__colour bg-grey-light"></div> 352 <div class="swatch__text">Light grey</div> 353 </div> 354 355 <div class="swatch"> 356 <div class="swatch__colour bg-grey-dark"></div> 357 <div class="swatch__text">Dark grey</div> 358 </div> 359 360 <h4>Helper colours</h4> 361 362 <p> 363 You add background and text colours to your project. You can add these classes to a 364 tag e.g <code>.bg-primary</code> or use <code>@extend</code> e.g. 365 <code>@extend %bg-primary</code>. 366 </p> 367 368 <pre><code>// background colours 369.bg-primary // $color-primary 370.bg-secondary // $color-secondary 371.bg-tertiary // $color-tertiary 372.bg-grey // $color-grey 373.bg-grey-light // $color-grey-light 374.bg-grey-dark // $color-grey-dark 375.bg-white // #fff 376 377// text colours 378.text-primary // $color-primary 379.text-secondary // $color-secondary 380.text-tertiary // $color-tertiary 381.text-grey // $color-grey 382.text-grey-light // $color-grey-light 383.text-white // #fff 384</code></pre> 385 </section> 386 387 <hr class="hr-alt" /> 388 389 <section class="docs__item" id="breakpoints"> 390 <h2 class="docs__heading">Breakpoints</h2> 391 392 <p> 393 Outline uses the following breakpoints as a starting point. To add new breakpoints go 394 into the <code>utils/_variables.scss</code> file and add a new breakpoint variable. 395 </p> 396 397 <pre><code>$mobile-landscape: 30rem; // 480px 398$tablet: 40rem; // 640px 399$tablet-wide: 48rem; // 768px 400$desktop: 64rem; // 1024px 401$widescreen: 71.25rem; // 1140px 402</code></pre> 403 </section> 404 405 <hr class="hr-alt" /> 406 407 <section class="docs__item" id="typography"> 408 <h2 class="docs__heading">Typography <code>base/_typography.scss</code></h2> 409 </section> 410 411 <section class="docs__item" id="headings"> 412 <h1>Heading 1</h1> 413 <h2>Heading 2</h2> 414 <h3>Heading 3</h3> 415 <h4>Heading 4</h4> 416 <h5>Heading 5</h5> 417 <h6>Heading 6</h6> 418 419 <pre><code><h1>Heading 1</h1> 420<h2>Heading 2</h2> 421<h3>Heading 3</h3> 422<h4>Heading 4</h4> 423<h5>Heading 5</h5> 424<h6>Heading 6</h6> 425</code></pre> 426 </section> 427 428 <section class="docs__item" id="fonts"> 429 <h2 class="docs__heading">Fonts</h2> 430 431 <p>Outline uses a google font combination of Lato and Merriweather.</p> 432 433 <p class="font-primary">This is the Merriweather font included in Outline.</p> 434 435 <p class="font-secondary">This is the Lato font included in Outline.</p> 436 437 <p> 438 To change the fonts goto <a href="http://www.google.com/fonts">Google fonts</a>, 439 select the fonts you require and then replace the following code on your website with 440 the new code provided. 441 </p> 442 443 <pre><code><link href="//fonts.googleapis.com/css?family=Lato:400,700,900|Merriweather:400,400italic,700,700italic" rel="stylesheet" type="text/css"> 444</code></pre> 445 </section> 446 447 <section class="docs__item" id="body"> 448 <h2 class="docs__heading">Body</h2> 449 450 <h4>Paragragh</h4> 451 452 <p> 453 All right me luvver ipsum dolor sit amet dolor dolore non gashead jammer veniam, me 454 luvver tamorra dint aute as-dal. Dint fugiat ut culpa jammy cheers drive. In warter 455 wheres attoo ut oozee idut, ceptible irure. Yer discolated ginormous, bemmie you gone 456 and done it hark at ee fornbree excepteur glider me babber. 457 </p> 458 459 <pre><code><p>All right me luvver ipsum dolor sit amet dolor dolore non gashead jammer veniam, me luvver tamorra dint aute as-dal. Dint fugiat ut culpa jammy cheers drive. In warter wheres attoo ut oozee idut, ceptible irure. Yer discolated ginormous, bemmie you gone and done it hark at ee fornbree excepteur glider me babber.</p> 460</code></pre> 461 462 <h4>Lead text</h4> 463 464 <p class="lead"> 465 All right me luvver ipsum dolor sit amet dolor dolore non gashead jammer veniam, me 466 luvver tamorra dint aute as-dal. 467 </p> 468 469 <pre><code><p class="lead">...</p> 470</code></pre> 471 472 <h4>Small</h4> 473 474 <small>This text is small.</small> 475 476 <p class="text-small">This text is small.</p> 477 478 <pre><code><small>This text is small.</small> 479<p class="text-small">This text is small</p> 480</code></pre> 481 482 <h4>Muted</h4> 483 484 <p class="text-muted">This text is muted.</p> 485 486 <pre><code><p class="text-muted">This text is muted.</p> 487</code></pre> 488 489 <h4>Hyphenate</h4> 490 491 <h6 class="hyphenate">ThisIsAReallyLongWordAndDoesNotBreakLayout</h6> 492 493 <pre><code><h3 class="hyphenate">ThisIsAReallyLongWordAndDoesNotBreakLayout</h3> 494</code></pre> 495 496 <h4>Strong</h4> 497 498 <p>This text is <strong>strong</strong>.</p> 499 500 <pre><code><p>This text is <strong>strong</strong>.</p> 501</code></pre> 502 503 <h4>
503Emphasis</h4> 504 505 <p>This text is <em>emphasised</em>.</p> 506 507 <pre><code><p>This text is <em>emphasised</em>.</p> 508</code></pre> 509 510 <h4>Subscript & Superscript</h4> 511 512 <p>This text is <sub>subscripted</sub></p> 513 514 <p>This text is <sup>superscripted</sup></p> 515 516 <pre><code><p>This text is <sub>subscripted</sub></p> 517<p>This text is <sup>superscripted</sup></p> 518</code></pre> 519 520 <h4>Mark</h4> 521 522 <p>The <code><mark></code> element is used to <mark>highlight</mark> text.</p> 523 524 <pre><code><p>The <code><mark></code> element is used to <mark>highlight</mark> text.</p> 525</code></pre> 526 </section> 527 528 <section class="docs__item" id="links"> 529 <h2 class="docs__heading">Links</h2> 530 531 <p> 532 This is the <a href="#">link</a> style. Text hyperlinks are used for 533 <a href="#">destinations</a>, or moving from one page to <a href="#">another</a>. 534 </p> 535 536 <pre><code><p>This is the <a href="#">link</a> style. Text hyperlinks are used for <a href="#">destinations</a>, or moving from one page to <a href="#">another</a>.</p> 537</code></pre> 538 </section> 539 540 <section class="docs__item" id="hr"> 541 <h2 class="docs__heading">Horizontal line</h2> 542 543 <hr /> 544 545 <pre><code><hr></code></pre> 546 </section> 547 548 <section class="docs__item" id="blockquote"> 549 <h2 class="docs__heading">Blockquote</h2> 550 551 <blockquote> 552 <p> 553 Ginormous hark at ee mint in it casnt. Hark at ee idut ceptible, mint in it lectric 554 me eds erting i didnt do nothing dinnum gashead bemminser eadfit inchew glider. 555 </p> 556 <cite>Brizzle Ipsum, Made in Bristol</cite> 557 </blockquote> 558 559 <pre><code><blockquote> 560 <p>Ginormous hark at ee mint in it casnt. Hark at ee idut ceptible, mint in it lectric me eds erting i didnt do nothing dinnum gashead bemminser eadfit inchew glider.</p> 561 <cite>Brizzle Ipsum, Made in Bristol</cite> 562</blockquote> 563</code></pre> 564 </section> 565 566 <section class="docs__item" id="figure"> 567 <h2 class="docs__heading">Figure</h2> 568 569 <figure> 570 <img src="img/min/16x9-img-placholder.png" /> 571 <figcaption>This is a caption for the above image.</figcaption> 572 </figure> 573 574 <pre><code><figure> 575 <img src="img/min/16x9-img-placholder.png" > 576 <figcaption>This is a caption for the above image.</figcaption> 577</figure> 578</code></pre> 579 </section> 580 581 <hr class="hr-alt" /> 582 583 <section class="docs__item" id="components"> 584 <h2 class="docs__heading">Components</h2> 585 </section> 586 587 <section class="docs__item" id="buttons"> 588 <h2 class="docs__heading">Buttons <code>components/_buttons.scss</code></h2> 589 590 <p> 591 Buttons are created using the <code>button</code> element or adding the 592 <code>.btn</code> class to any element. You can add some of the following classes 593 below to get different design combinations. 594 </p> 595 596 <button type="button">Default</button> 597 <a class="btn" href="#" role="button">Default</a> 598 599 <pre><code><button type="button">Default</button> 600<a class="btn" href="#" role="button">Default</a> 601</code></pre> 602 603 <h4>Colours</h4> 604 605 <button class="btn--primary" type="button">Colour Primary</button> 606 <button class="btn--secondary" type="button">Colour Secondary</button> 607 <button class="btn--tertiary" type="button">Colour Tertiary</button> 608 <button class="btn--grey" type="button">Colour Grey</button> 609 610 <pre><code><button class="btn--primary" type="button">Colour Primary</button> 611<button class="btn--secondary" type="button">Colour Secondary</button> 612<button class="btn--tertiary" type="button">Colour Tertiary</button> 613<button class="btn--grey" type="button">Colour Grey</button> 614</code></pre> 615 616 <h4>Sizes</h4> 617 618 <button class="btn--small" type="button">Small</button> 619 <button class="btn" type="button">Default</button> 620 <button class="btn--large" type="button">Large</button> 621 <button class="btn--xlarge" type="button">Xtra Large</button> 622 623 <pre><code><button class="btn--small" type="button">Small</button> 624<button class="btn" type="button">Default</button> 625<button class="btn--large" type="button">Large</button> 626<button class="btn--xlarge" type="button">Xtra Large</button> 627</code></pre> 628 629 <h4>Styles</h4> 630 631 <button class="btn--rounded" type="button">Rounded</button> 632 <button class="btn--pill" type="button">Pill</button>
633 <button class="btn--ghost" type="button">Ghost</button> 634 635 <pre><code><button class="btn--rounded" type="button">Rounded</button> 636<button class="btn--pill" type="button">Pill</button> 637<button class="btn--ghost" type="button">Ghost</button> 638</code></pre> 639 640 <h4>Block</h4> 641 642 <button class="btn--block" type="button">Block</button> 643 644 <pre><code><button class="btn--block" type="button">Block</button> 645</code></pre> 646 </section> 647 648 <section class="docs__item" id="code"> 649 <h2 class="docs__heading">Code <code>components/_code.scss</code></h2> 650 651 <p> 652 A block of code should be contained within <code><pre></code> and 653 <code><code></code> tags. 654 </p> 655 656 <pre><code><pre><code>.text { 657 color: red; 658} 659 660.footer .text { 661 color: blue; 662}</code></pre> 663</code></pre> 664 665 <p> 666 Wrap inline code within the <code><code></code> element e.g. This is a 667 <code><table></code> tag. 668 </p> 669 670 <pre><code><p>This is a <code>table</code> tag.</p> 671</code></pre> 672 </section> 673 674 <section class="docs__item" id="embed"> 675 <h2 class="docs__heading">Embed <code>components/_embed.scss</code></h2> 676 677 <p> 678 To make embedded content responsive wrap it with the class <code>.embed-wrap</code>. 679 </p> 680 681 <pre><code><div class="embed-wrap"> 682 embedded content goes here... 683</div> 684</code></pre> 685 686 <h4>YouTube example</h4> 687 688 <div class="embed-wrap"> 689 <iframe 690 width="853" 691 height="480" 692 src="https://www.youtube.com/embed/kRmbVOI6oIM?rel=0" 693 frameborder="0" 694 allowfullscreen 695 ></iframe> 696 </div> 697 698 <pre><code><div class="embed-wrap"> 699 <iframe width="853" height="480" src="https://www.youtube.com/embed/kRmbVOI6oIM?rel=0" frameborder="0" allowfullscreen></iframe> 700</div> 701</code></pre> 702 703 <h4>Vimeo example</h4> 704 705 <div class="embed-wrap"> 706 <iframe 707 src="https://player.vimeo.com/video/67476280" 708 width="500" 709 height="281" 710 frameborder="0" 711 webkitallowfullscreen 712 mozallowfullscreen 713 allowfullscreen 714 ></iframe> 715 </div> 716 717 <pre><code><div class="embed-wrap"> 718 <iframe src="https://player.vimeo.com/video/67476280" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 719</div> 720</code></pre> 721 722 <h4>Google Maps</h4> 723 724 <div class="embed-wrap"> 725 <iframe 726 width="425" 727 height="350" 728 frameborder="0" 729 scrolling="no" 730 marginheight="0" 731 marginwidth="0" 732 src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=bristol&aq=&sll=51.468489,-2.590709&sspn=0.321233,0.837021&ie=UTF8&hq=&hnear=Bristol,+City+of+Bristol,+United+Kingdom&ll=51.468552,-2.590714&spn=0.321332,0.837021&t=m&z=11&output=embed&iwloc=near" 733 ></iframe> 734 </div> 735 736 <pre><code><div class="embed-wrap"> 737 <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=bristol&aq=&sll=51.468489,-2.590709&sspn=0.321233,0.837021&ie=UTF8&hq=&hnear=Bristol,+City+of+Bristol,+United+Kingdom&ll=51.468552,-2.590714&spn=0.321332,0.837021&t=m&z=11&output=embed&iwloc=near"></iframe> 738</div> 739</code></pre> 740 741 <h4>Generic iFrame</h4> 742 743 <div class="embed-wrap"> 744 <iframe 745 src="http://alistapart.com/article/responsive-web-design/" 746 style="border: 0" 747 ></iframe> 748 </div> 749 750 <pre><code><div class="embed-wrap"> 751 <iframe src="http://alistapart.com/article/responsive-web-design/" style="border:0"></iframe> 752</div> 753</code></pre> 754 </section> 755 756 <section class="docs__item" id="forms"> 757 <h2 class="docs__heading">Forms <code>components/_forms.scss</code></h2> 758 759 <p> 760 Default styles of form elements including labels, inputs, checkbox and radio controls, 761 selects, fieldsets and legends. 762 </p> 763 764 <h4>Fieldset</h4> 765 766 <form> 767 <fieldset> 768 <legend>Legend</legend> 769 <div class="form__row"> 770 <label for="fieldset-example">label:</label> 771 <input type="text" id="fieldset-example" placeholder="Placeholder text example" /> 772 </div> 773 </fieldset> 774 </form> 775 776 <pre><code><form> 777 <fieldset> 778 <legend>Legend</legend> 779 <div class="form__row"> 780 <label for="fieldset-example">label:</label> 781 <input type="text" id="fieldset-example" placeholder="Placeholder text example"> 782 </div> 783 </fieldset> 784</form> 785</code></pre> 786 787 <h4>Form elements</h4> 788 789 <form> 790 <div class="form__row"> 791 <label for="text-input">Text input:</label> 792 <input type="text" id="text-input" placeholder="Text input" /> 793 </div> 794 795 <div class="form__row"> 796 <label for="date-input">Date input:</label> 797 <input type="date" id="date-input" placeholder="Date input" /> 798 </div> 799 800 <div class="form__row"> 801 <label for="email-input">Email input:</label> 802 <input type="email" id="email-input" placeholder="Email input" /> 803 </div> 804 805 <div class="form__row"> 806 <label for="number-input">Number input:</label> 807 <input type="number" id="number-input" placeholder="Number input" /> 808 </div> 809 810 <div class="form__row"> 811 <label for="password-input">Password input:</label> 812 <input type="password" id="password-input" placeholder="Password input" /> 813 </div> 814 815 <div class="form__row"> 816 <label for="search-input">Search input:</label> 817 <input type="search" id="search-input" placeholder="Search input" /> 818 </div> 819 820 <div class="form__row"> 821 <label for="tel-input">Telephone input:</label> 822 <input type="tel" id="tel-input" placeholder="Telephone input" /> 823 </div> 824 825 <div class="form__row"> 826 <label for="url-input">URL input:</label> 827 <input type="url" id="url-input" placeholder="URL input" /> 828 </div> 829 830 <div class="form__row"> 831 <label for="disabled-input">Disabled:</label> 832 <input type="text" id="disabled-input" disabled placeholder="Disabled" /> 833 </div> 834 835 <div class="form__row"> 836 <label for="textarea">Text area:</label> 837 <textarea id="textarea" placeholder="Write your message..."></textarea> 838 </div> 839 840 <div class="form__row"> 841 <label>Select an option:</label> 842 <select> 843 <option>Option 1</option> 844 <option>Option 2</option> 845 <option>Option 3</option> 846 </select> 847 </div> 848 849 <div class="form__row"> 850 <label> 851 <input type="checkbox" /> 852 Check box option 853 </label> 854 </div> 855 856 <div class="form__row"> 857 <label> 858 <input type="radio" name="radio" /> 859 Radio option 860 </label> 861 </div> 862 863 <input type="submit" value="Submit" /> 864 </form> 865 866 <pre><code><form> 867 <div class="form__row"> 868 <label for="text-input">Text input:</label> 869 <input type="text" id="text-input" placeholder="Text input"> 870 </div> 871 872 <div class="form__row"> 873 <label for="date-input">Date input:</label> 874 <input type="date" id="date-input" placeholder="Date input"> 875 </div> 876 877 <div class="form__row"> 878 <label for="email-input">Email input:</label> 879 <input type="email" id="email-input" placeholder="Email input"> 880 </div> 881 882 <div class="form__row"> 883 <label for="number-input">Number input:</label> 884 <input type="number" id="number-input" placeholder="Number input"> 885 </div> 886 887 <div class="form__row"> 888 <label for="password-input">Password input:</label> 889 <input type="password" id="password-input" placeholder="Password input"> 890 </div> 891 892 <div class="form__row"> 893 <label for="search-input">Search input:</label> 894 <input type="search" id="search-input" placeholder="Search input"> 895 </div> 896 897 <div class="form__row"> 898 <label for="tel-input">Telephone input:</label> 899 <input type="tel" id="tel-input" placeholder="Telephone input"> 900 </div> 901 902 <div class="form__row"> 903 <label for="url-input">URL input:</label> 904 <input type="url" id="url-input" placeholder="URL input"> 905 </div> 906 907 <div class="form__row"> 908 <label for="disabled-input">Disabled:</label> 909 <input type="text" id="disabled-input" disabled placeholder="Disabled"> 910 </div> 911 912 <div class="form__row"> 913 <label for="textarea">Text area:</label> 914 <textarea id="textarea" placeholder="Write your message..."></textarea> 915 </div> 916 917 <div class="form__row"> 918 <label>Select an option:</label> 919 <select> 920 <option>Option 1</option> 921 <option>Option 2</option> 922 <option>Option 3</option> 923 </select> 924 </div> 925 926 <div class="form__row"> 927 <label> 928 <input type="checkbox"> 929 Check box option 930 </label> 931 </div> 932 933 <div class="form__row"> 934 <label> 935 <input type="radio" name="radio"> 936 Radio option 937 </label> 938 </div> 939 940 <input type="submit" value="Submit"> 941</form> 942</code></pre> 943 944 <h4>Form Inline</h4> 945 946 <form class="form--inline"> 947 <div class="form__row"> 948 <label for="inline-input">Name</label> 949 <input type="text" id="inline-input" placeholder="Your name" /> 950 </div> 951 952 <div class="form__row"> 953 <label for="inline-input2">Email</label> 954 <input type="text" id="inline-input2" placeholder="Your email" /> 955 </div> 956 957 <div class="form__row--controls"> 958 <label> 959 <input type="checkbox" /> 960 Check box option 961 </label> 962 </div> 963 964 <div class="form__row--actions"> 965 <input type="submit" value="Submit" /> 966 </div> 967 </form> 968 969 <pre><code><form class="form--inline"> 970 <div class="form__row"> 971 <label for="inline-input">Name</label> 972 <input type="text" id="inline-input" placeholder="Your name"> 973 </div> 974 975 <div class="form__row"> 976 <label for="inline-input2">Email</label> 977 <input type="text" id="inline-input2" placeholder="Your email"> 978 </div> 979 980 <div class="form__row--controls"> 981 <label> 982 <input type="checkbox"> 983 Check box option 984 </label> 985 </div> 986 987 <div class="form__row--actions"> 988 <input type="submit" value="Submit"> 989 </div> 990</form> 991</code></pre> 992 </section> 993 994 <section class="docs__item" id="lists"> 995 <h2 class="docs__heading">Lists <code>components/_lists.scss</code></h2> 996 997 <h4>Unordered</h4> 998 999 <ul> 1000 <li> 1001 One 1002 <ul> 1003 <li>One nested</li> 1004 <li> 1005 Two nested 1006 <ul> 1007 <li>One nested</li> 1008 <li>Two nested</li> 1009 </ul> 1010 </li> 1011 </ul> 1012 </li> 1013 <li>Two</li> 1014 <li>Three</li> 1015 </ul> 1016 1017 <pre><code><ul> 1018 <li>...</li> 1019</ul> 1020</code></pre> 1021 1022 <h4>Ordered</h4> 1023 1024 <ol> 1025 <li> 1026 One 1027 <ol> 1028 <li>One nested</li> 1029 <li> 1030 Two nested 1031 <ol> 1032 <li>One nested</li> 1033 <li>Two nested</li> 1034 </ol> 1035 </li> 1036 </ol> 1037 </li> 1038 <li>Two</li> 1039 <li>Three</li> 1040 </ol> 1041 1042 <pre><code><ol> 1043 <li>...</li> 1044</ol> 1045</code></pre> 1046 1047 <h4>Definition</h4> 1048 1049 <dl> 1050 <dt>Term 1</dt> 1051 <dd>Definition of term 1</dd> 1052 <dt>Term 2</dt> 1053 <dd>Definition of term 2</dd> 1054 <dt>Term 3</dt> 1055 <dd>Definition of term 3</dd> 1056 </dl> 1057 1058 <pre><code><dl> 1059 <dt>...</dt> 1060 <dd>...</dd> 1061</dl> 1062</code></pre> 1063 1064 <h4>Unstyled</h4> 1065 1066 <ul class="list--unstyled"> 1067 <li>One</li> 1068 <li>Two</li> 1069 <li>Three</li> 1070 </ul> 1071 1072 <pre><code><ul class="list--unstyled"> 1073 <li>...</li> 1074</ul> 1075</code></pre> 1076 1077 <h4>Inline</h4> 1078 1079 <ul class="list--inline"> 1080 <li>One</li> 1081 <li>Two</li> 1082 <li>Three</li> 1083 </ul> 1084 1085 <pre><code><ul class="list--inline"> 1086 <li>...</li> 1087</ul> 1088</code></pre> 1089 </section> 1090 1091 <section class="docs__item" id="media-objects"> 1092 <h2 class="docs__heading">Media / Flag objects <code>components/_media.scss</code></h2> 1093 1094 <p> 1095 The 1096 <a 1097 href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code" 1098 >media object</a 1099 > 1100 places any image (item) and text content side by side. 1101 </p> 1102 1103 <p> 1104 The <a href="http://csswizardry.com/2
1104013/05/the-flag-object/">flag object</a> places 1105 any image (item) and text content side by side with vertical alignment. 1106 </p> 1107 1108 <h4>Media default</h4> 1109 1110 <div class="media"> 1111 <img 1112 class="media__item example-mediaBlock__img" 1113 src="img/min/16x9-img-placholder.png" 1114 alt="Place holder for media object" 1115 /> 1116 <p class="media__body"> 1117 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 1118 incididunt ut labore et dolore magna aliqua. 1119 </p> 1120 </div> 1121 1122 <pre><code><div class="media"> 1123 <img class="media__item" src="img/min/16x9-img-placholder.png" alt="Place holder for media object"> 1124 <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 1125</div> 1126</code></pre> 1127 1128 <h4>Media reversed</h4> 1129 1130 <div class="media"> 1131 <img 1132 class="media__item--reversed example-mediaBlock__img" 1133 src="img/min/16x9-img-placholder.png" 1134 alt="Place holder for media object" 1135 /> 1136 <p class="media__body"> 1137 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 1138 incididunt ut labore et dolore magna aliqua. 1139 </p> 1140 </div> 1141 1142 <pre><code><div class="media"> 1143 <img class="media__item--reversed" src="img/min/16x9-img-placholder.png" alt="Place holder for media object"> 1144 <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 1145</div> 1146</code></pre> 1147 1148 <h4>Flag default</h4> 1149 1150 <div class="flag"> 1151 <div class="flag__item"> 1152 <img 1153 src="img/min/16x9-img-placholder.png" 1154 alt="Place holder for glag object" 1155 width="120" 1156 /> 1157 </div> 1158 <div class="flag__body"> 1159 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 1160 </div> 1161 </div> 1162 1163 <pre><code><div class="flag"> 1164 <div class="flag__item"> 1165 <img src="img/min/16x9-img-placholder.png" alt="Place holder for glag object" width="120"> 1166 </div> 1167 <div class="flag__body"> 1168 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 1169 </div> 1170</div> 1171</code></pre> 1172 1173 <h4>Flag top</h4> 1174 1175 <div class="flag flag--top"> 1176 <div class="flag__item"> 1177 <img 1178 src="img/min/16x9-img-placholder.png" 1179 alt="Place holder for glag object" 1180 width="120" 1181 /> 1182 </div> 1183 <div class="flag__body"> 1184 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 1185 </div> 1186 </div> 1187 1188 <pre><code><div class="flag flag--top"> 1189 ... 1190</div> 1191</code></pre> 1192 1193 <h4>Flag bottom</h4> 1194 1195 <div class="flag flag--bottom"> 1196 <div class="flag__item"> 1197 <img 1198 src="img/min/16x9-img-placholder.png" 1199 alt="Place holder for glag object" 1200 width="120" 1201 /> 1202 </div> 1203 <div class="flag__body"> 1204 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 1205 </div> 1206 </div> 1207 1208 <pre><code><div class="flag flag--bottom"> 1209 ... 1210</div> 1211</code></pre> 1212 1213 <h4>Flag reversed</h4> 1214 1215 <div class="flag flag--reversed"> 1216 <div class="flag__body"> 1217 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 1218 </div> 1219 <div class="flag__item"> 1220 <img 1221 src="img/min/16x9-img-placholder.png" 1222 alt="Place holder for glag object" 1223 width="120" 1224 /> 1225 </div> 1226 </div> 1227 1228 <pre><code><div class="flag flag--reversed"> 1229 <div class="flag__body"> 1230 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 1231 </div> 1232 <div class="flag__item"> 1233 <img src="img/min/16x9-img-placholder.png" alt="Place holder for glag object" width="120"> 1234 </div> 1235</div> 1236</code></pre> 1237 1238 <h4>Flag reversed top</h4> 1239 1240 <div class="flag flag--reversed flag--top"> 1241 <div class="flag__body"> 1242 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 1243 </div> 1244 <div class="flag__item"> 1245 <img 1246 src="img/min/16x9-img-placholder.png" 1247 alt="Place holder for glag object" 1248 width="120" 1249 /> 1250 </div> 1251 </div> 1252 1253 <pre><code><div class="flag flag--reversed flag--top"> 1254 ... 1255</div> 1256</code></pre> 1257 1258 <h4>Flag reversed bottom</h4> 1259 1260 <div class="flag flag--reversed flag--bottom"> 1261 <div class="flag__body"> 1262 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 1263 </div> 1264 <div class="flag__item"> 1265 <img 1266 src="img/min/16x9-img-placholder.png" 1267 alt="Place holder for glag object" 1268 width="120" 1269 /> 1270 </div> 1271 </div> 1272 1273 <pre><code><div class="flag flag--reversed flag--bottom"> 1274 ... 1275</div> 1276</code></pre> 1277 </section> 1278 1279 <section class="docs__item" id="pagination"> 1280 <h2 class="docs__heading">Pagination <code>components/_pagination.scss</code></h2> 1281 1282 <p> 1283 The pagination component provides styles for any project that contains long content 1284 which requires spliting up into shorter, easier to understand blocks. 1285 </p> 1286 1287 <ul class="pager"> 1288 <li><a href="#"><</a></li> 1289 <li class="pager--current"><a href="#">1</a></li> 1290 <li><a href="#">2</a></li> 1291 <li><a href="#">3</a></li> 1292 <li><a href="#">4</a></li> 1293 <li><a href="#">></a></li> 1294 </ul> 1295 1296 <pre><code><ul class="pager"> 1297 <li><a href="#"><</a></li> 1298 <li class="pager--current"><a href="#">1</a></li> 1299 <li><a href="#">2</a></li> 1300 <li><a href="#">3</a></li> 1301 <li><a href="#">4</a></li> 1302 <li><a href="#">></a></li> 1303</ul> 1304</code></pre> 1305 </section> 1306 1307 <section class="docs__item" id="tables"> 1308 <h2 class="docs__heading">Tables <code>components/_tables.scss</code></h2> 1309 1310 <h4>Basic</h4> 1311 1312 <table class="table"> 1313 <thead> 1314 <tr> 1315 <th>#</th> 1316 <th>
1316Name</th> 1317 <th>Posistion</th> 1318 </tr> 1319 </thead> 1320 <tbody> 1321 <tr> 1322 <td>11</td> 1323 <td>Mesut Ãzil</td> 1324 <td>Midfielder</td> 1325 </tr> 1326 <tr> 1327 <td>10</td> 1328 <td>Jack Wilshere</td> 1329 <td>Midfielder</td> 1330 </tr> 1331 <tr> 1332 <td>12</td> 1333 <td>Olivier Giroud</td> 1334 <td>Forward</td> 1335 </tr> 1336 </tbody> 1337 </table> 1338 1339 <pre><code><table class="table"> 1340 <thead> 1341 <tr> 1342 <th>#</th> 1343 <th>Name</th> 1344 <th>Posistion</th> 1345 </tr> 1346 </thead> 1347 <tbody> 1348 <tr> 1349 <td>11</td> 1350 <td>Mesut Ãzil</td> 1351 <td>Midfielder</td> 1352 </tr> 1353 <tr> 1354 <td>10</td> 1355 <td>Jack Wilshere</td> 1356 <td>Midfielder</td> 1357 </tr> 1358 <tr> 1359 <td>12</td> 1360 <td>Olivier Giroud</td> 1361 <td>Forward</td> 1362 </tr> 1363 </tbody> 1364</table> 1365</code></pre> 1366 1367 <h4>Stripes</h4> 1368 1369 <table class="table--stripes"> 1370 <thead> 1371 <tr> 1372 <th>#</th> 1373 <th>Name</th> 1374 <th>Posistion</th> 1375 </tr> 1376 </thead> 1377 <tbody> 1378 <tr> 1379 <td>11</td> 1380 <td>Mesut Ãzil</td> 1381 <td>Midfielder</td> 1382 </tr> 1383 <tr> 1384 <td>10</td> 1385 <td>Jack Wilshere</td> 1386 <td>Midfielder</td> 1387 </tr> 1388 <tr> 1389 <td>12</td> 1390 <td>Olivier Giroud</td> 1391 <td>Forward</td> 1392 </tr> 1393 </tbody> 1394 </table> 1395 1396 <pre><code><table class="table--stripes"> 1397 ... 1398</table> 1399</code></pre> 1400 1401 <h4>Bordered rows</h4> 1402 1403 <table class="table--border-rows"> 1404 <thead> 1405 <tr> 1406 <th>#</th> 1407 <th>Name</th> 1408 <th>Posistion</th> 1409 </tr> 1410 </thead> 1411 <tbody> 1412 <tr> 1413 <td>11</td> 1414 <td>Mesut Ãzil</td> 1415 <td>Midfielder</td> 1416 </tr> 1417 <tr> 1418 <td>10</td> 1419 <td>Jack Wilshere</td> 1420 <td>Midfielder</td> 1421 </tr> 1422 <tr> 1423 <td>12</td> 1424 <td>Olivier Giroud</td> 1425 <td>Forward</td> 1426 </tr> 1427 </tbody> 1428 </table> 1429 1430 <pre><code><table class="table--border-rows"> 1431 ... 1432</table> 1433</code></pre> 1434 1435 <h4>Bordered cells</h4> 1436 1437 <table class="table--border-cells"> 1438 <thead> 1439 <tr> 1440 <th>#</th> 1441 <th>Name</th> 1442 <th>Posistion</th> 1443 </tr> 1444 </thead> 1445 <tbody> 1446 <tr> 1447 <td>11</td> 1448 <td>Mesut Ãzil</td> 1449 <td>Midfielder</td> 1450 </tr> 1451 <tr> 1452 <td>10</td> 1453 <td>Jack Wilshere</td> 1454 <td>Midfielder</td> 1455 </tr> 1456 <tr> 1457 <td>12</td> 1458 <td>Olivier Giroud</td> 1459 <td>Forward</td> 1460 </tr> 1461 </tbody> 1462 </table> 1463 1464 <pre><code><table class="table--border-cells"> 1465 ... 1466</table> 1467</code></pre> 1468 1469 <h4>Condensed</h4> 1470 1471 <table class="table--condensed"> 1472 <thead> 1473 <tr> 1474 <th>#</th> 1475 <th>
1475Name</th> 1476 <th>Posistion</th> 1477 </tr> 1478 </thead> 1479 <tbody> 1480 <tr> 1481 <td>11</td> 1482 <td>Mesut Ãzil</td> 1483 <td>Midfielder</td> 1484 </tr> 1485 <tr> 1486 <td>10</td> 1487 <td>Jack Wilshere</td> 1488 <td>Midfielder</td> 1489 </tr> 1490 <tr> 1491 <td>12</td> 1492 <td>Olivier Giroud</td> 1493 <td>Forward</td> 1494 </tr> 1495 </tbody> 1496 </table> 1497 1498 <pre><code><table class="table--condensed"> 1499 ... 1500</table> 1501</code></pre> 1502 1503 <h4>Responsive</h4> 1504 1505 <p> 1506 To make any table responsive, wrap the <code><table></code> in a 1507 <code><div></code> with the class <code>.table--responsive</code> 1508 </p> 1509 1510 <div class="table--responsive"> 1511 <table class="table--stripes"> 1512 <thead> 1513 <tr> 1514 <th>#</th> 1515 <th>Name</th> 1516 <th>Posistion</th> 1517 <th>Country</th> 1518 <th>DOB</th> 1519 </tr> 1520 </thead> 1521 <tbody> 1522 <tr> 1523 <td>11</td> 1524 <td>Mesut Ãzil</td> 1525 <td>Midfielder</td> 1526 <td>Germany</td> 1527 <td>15/10/1988</td> 1528 </tr> 1529 <tr> 1530 <td>10</td> 1531 <td>Jack Wilshere</td> 1532 <td>Midfielder</td> 1533 <td>England</td> 1534 <td>1/1/1992</td> 1535 </tr> 1536 <tr> 1537 <td>12</td> 1538 <td>Olivier Giroud</td> 1539 <td>Forward</td> 1540 <td>France</td> 1541 <td>30/9/1986</td> 1542 </tr> 1543 </tbody> 1544 </table> 1545 </div> 1546 1547 <pre><code><div class="table--responsive"> 1548 <table class="table--stripes"> 1549 ... 1550 </table> 1551</div> 1552</code></pre> 1553 </section> 1554 1555 <hr class="hr-alt" /> 1556 1557 <section class="docs__item" id="utilities"> 1558 <h2 class="docs__heading">Utilities</h2> 1559 1560 <p> 1561 This folder contains the project variables, mixins, functions and the helper classes. 1562 </p> 1563 </section> 1564 1565 <section class="docs__item" id="variables"> 1566 <h2 class="docs__heading">Variables <code>utils/_variables.scss</code></h2> 1567 1568 <p> 1569 This file contains all your project variables. The default variables included are 1570 (please expand on default variables):- 1571 </p> 1572 1573 <ul> 1574 <li>Font base size</li> 1575 <li>Spacing</li> 1576 <li>Fonts</li> 1577 <li>Colours</li> 1578 <li>Placeholder text colour</li> 1579 <li>Breakpoints</li> 1580 </ul> 1581 </section> 1582 1583 <section class="docs__item" id="helpers"> 1584 <h2 class="docs__heading">Helpers <code>utils/_helpers.scss</code></h2> 1585 1586 <p>This file contains all your helper classes.</p> 1587 1588 <h4>Clearfix</h4> 1589 <p> 1590 The <code>.clearfix</code> class clears floats. You can add this class to a tag or use 1591 <code>@extend</code>. 1592 </p> 1593 1594 <pre><code><div class="clearfix"> 1595 ... 1596</div> 1597 1598.someClass { 1599 @extend %clearfix; 1600} 1601</code></pre> 1602 1603 <h4>Align</h4> 1604 1605 <p>You can add these classes to a tag or use <code>@extend</code>.</p> 1606 1607 <p class="align-left">Align left</p> 1608 1609 <p class="align-center">Align center</p> 1610 1611 <p class="align-right">Align right</p> 1612 1613 <p class="justify"> 1614 <strong>Justify text</strong>. All right me luvver ipsum dolor sit amet dolor dolore 1615 non gashead jammer veniam, me luvver tamorra dint aute as-dal. Dint fugiat ut culpa 1616 jammy cheers drive. In warter wheres attoo ut oozee idut, ceptible irure. Yer 1617 discolated ginormous, bemmie you gone and done it hark at ee fornbree excepteur glider 1618 me babber. Ginormous hark at ee mint in it casnt. 1619 </p> 1620 1621 <pre><code><p class="align-left">...</p> 1622 1623<p class="align-center">...</p> 1624 1625<p class="align-right">...</p> 1626 1627<p class="justify">...</p> 1628 1629@extend: 1630<p class="example">...</p> 1631 1632.example { 1633 color: red; 1634 @extend %align-right; 1635} 1636</code></pre> 1637 1638 <h4>Floats</h4> 1639 1640 <p>You can add these classes to a tag or use <code>@extend</code>.</p> 1641 1642 <div class="clearfix"> 1643 <div class="float-left">Float left</div> 1644 <div class="float-center" style="width: 280px; clear: left"> 1645 Float center <small>must have <code>width</code> set</small>. 1646 </div> 1647 <div class="float-right">Float right</div> 1648 </div> 1649 1650 <pre><code><div class="float-left">...</div> 1651<div class="float-center">...</div> 1652<div class="float-right">...</div> 1653</code></pre> 1654 1655 <h4>Spacing</h4> 1656 1657 <p>You can add these classes to a tag or use <code>@extend</code>.</p> 1658 1659 <pre><code>.no-margin - No margin or padding 1660.space - Margin on all sides 1661.space-top - Margin on the top 1662.space-right - Margin on the right 1663.space-btm - Margin on the bottom 1664.space-left - Margin on the left 1665</code></pre> 1666 1667 <h4>General</h4> 1668 1669 <p>You can add these classes to a tag or use <code>@extend</code>.</p> 1670 1671 <pre><code>.img-center - To center an image. 1672.is-uppercase - To make text uppercase. 1673</code></pre> 1674 1675 <h4>Visual</h4> 1676 1677 <p>You can add these classes to a tag or use <code>@extend</code>.</p> 1678 1679 <pre><code>.hide - Hide from browsers and screenreaders. 1680.visuallyhidden - Hide visually, but available for screenreaders. 1681</code></pre> 1682 </section> 1683 1684 <section class="docs__item" id="mixins"> 1685 <h2 class="docs__heading">Mixins <code>utils/_mixins.scss</code></h2> 1686 1687 <h4>Include breakpoints</h4> 1688 1689 <p> 1690 Generates media-quieries using min-width. You can pass in variables e.g 1691 <code>$tablet-wide</code> or values e.g <code>560px</code> 1692 </p> 1693 1694 <pre><code>.someClass { 1695 color: red; 1696 1697 @include respond-min($tablet-wide) { 1698 color: blue; 1699 } 1700} 1701</code></pre> 1702 1703 <h4>Ghost buttons</h4> 1704 1705 <p> 1706 Use this mixin to create styles for your 'ghost' button. The mixin sets the text and 1707 border color. You can use variables or any colour values. 1708 </p> 1709 1710 <button class="example-btn">Example</button> 1711 1712 <pre><code><button class="example-btn">Example</button> 1713 1714.example-btn { 1715 @include ghost-btn($color-secondary) 1716} 1717</code></pre> 1718 1719 <h4>Gradients</h4> 1720 1721 <p> 1722 Use this mixin to create styles for your two colour gradients. You need to include the 1723 angle of your gradient and the start and stop colour. You can use variables or any 1724 colour values. 1725 </p> 1726 1727 <div class="example-gradient"></div> 1728 1729 <pre><code><div class="example-gradient"></div> 1730 1731.example-gradient { 1732 @include gradient(90, $color-primary, $color-secondary); 1733 height: 5rem; 1734} 1735</code></pre> 1736 1737 <h4>Icons</h4> 1738 1739 <p><a href="#font-awesome" data-scroll>See Font awesome</a></p> 1740 </section> 1741 1742 <section class="docs__item" id="functions"> 1743 <h2 class="docs__heading">Functions <code>utils/_functions.scss</code></h2> 1744 1745 <h4>Tint</h4> 1746 1747 <p>The tint function slightly lightens a colour.</p> 1748 1749 <div class="swatch"> 1750 <div class="swatch__colour bg-primary"></div> 1751 <div class="swatch__text">Primary</div> 1752 </div> 1753 1754 <div class="swatch"> 1755 <div class="swatch__colour tint-example"></div> 1756 <div class="swatch__text">lighten by 20%</div> 1757 </div> 1758 1759 <pre><code>// lighten $color-primary by 20% 1760.tint-example { 1761 background-color: tint($color-primary, 20%); 1762} 1763</code></pre> 1764 1765 <h4>
1765Shade</h4> 1766 1767 <p>The shade function slightly darkens a colour.</p> 1768 1769 <div class="swatch"> 1770 <div class="swatch__colour bg-primary"></div> 1771 <div class="swatch__text">Primary</div> 1772 </div> 1773 1774 <div class="swatch"> 1775 <div class="swatch__colour shade-example"></div> 1776 <div class="swatch__text">darken by 20%</div> 1777 </div> 1778 1779 <pre><code>// darken $color-primary by 20% 1780.shade-example { 1781 background-color: shade($color-primary, 20%); 1782} 1783</code></pre> 1784 </section> 1785 1786 <hr class="hr-alt" /> 1787 1788 <section class="docs__item" id="vendor"> 1789 <h2 class="docs__heading">Vendor</h2> 1790 </section> 1791 1792 <section class="docs__item" id="font-awesome"> 1793 <h2 class="docs__heading">Font awesome <code>vendors/_font-awesome.scss</code></h2> 1794 1795 <p> 1796 Outline comes with the excellent 1797 <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> icons (4.5) 1798 included. Outline uses Font Awesome with mixins for adding icons to semantic HTML and 1799 without loading every single icon class definition when you only use some of the 1800 icons. 1801 </p> 1802 1803 <p>This is the default mixin for an icon.</p> 1804 1805 <pre><code>@mixin icon($icon) { 1806 @extend %icon; 1807 @extend %icon-#{$icon}; 1808} 1809</code></pre> 1810 1811 <p> 1812 This icon mixin adds padding to the right. You can use the default value set in mixin 1813 (.5rem) or specify your own value. For example you could use this for an icon in a 1814 button 1815 </p> 1816 1817 <pre><code>@mixin icon-before($icon, $padding: .5rem) { 1818 &:before { 1819 @extend %icon; 1820 @extend %icon-#{$icon}; 1821 padding-right: $padding; 1822 } 1823} 1824</code></pre> 1825 1826 <h4>Examples</h4> 1827 1828 <div class="subway-sign"> 1829 <i class="subway-sign__icon"></i> 1830 <span class="subway-sign__text">Subway</span> 1831 </div> 1832 1833 <pre><code><div class="subway-sign"> 1834 <i class="subway-sign__icon"></i> 1835 <span class="subway-sign__text">Subway</span> 1836</div> 1837 1838.subway-sign { 1839 width: 8rem; 1840 padding: $spacing; 1841 background-color: $color-grey-dark; 1842 text-align: center; 1843 color: #fff; 1844 1845 .subway-sign__icon { 1846 @include icon(subway); 1847 display: block; 1848 font-size: 3rem; 1849 margin-bottom: .5rem; 1850 } 1851 1852 .subway-sign__text { 1853 font-family: $font-secondary; 1854 font-size: 1.25rem; 1855 } 1856} 1857</code></pre> 1858 1859 <button class="btn--large download">Download</button> 1860 1861 <pre><code><button class="btn--large download">Download</button> 1862 1863.download { 1864 @include icon-before(cloud-download, .75rem) 1865} 1866</code></pre> 1867 </section> 1868 1869 <hr class="hr-alt" /> 1870 1871 <footer class="footer docs__item clearfix"> 1872 <div class="container"> 1873 Outline is a project by <a href="http://www.matt-harris.net">Matt Harris</a> 1874 </div> 1875 </footer> 1876 </div> 1877 </div> 1878 </div> 1879 1880
1880<script> 1881 (function (i, s, o, g, r, a, m) { 1882 i.GoogleAnalyticsObject = r; 1883 (i[r] = 1884 i[r] || 1885 function () { 1886 (i[r].q = i[r].q || []).push(arguments); 1887 }), 1888 (i[r].l = 1 * new Date()); 1889 (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]); 1890 a.async = 1; 1891 a.src = g; 1892 m.parentNode.insertBefore(a, m); 1893 })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); 1894 1895 ga('create', 'UA-49516749-2', 'auto'); 1896 ga('send', 'pageview'); 1897 </script>
1897 1898 1899
1899<script src="js/min/bundle.js"></script>
1899 1900
1900<script> 1901 smoothScroll.init({ 1902 speed: 800, 1903 easing: 'easeOutQuad', 1904 updateURL: false, 1905 }); 1906 </script>
1906 1907 </body> 1908</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.