Flexible Images

Responsive images that keep their aspect ratio when the browser window is resized.

Resize the browser to see it in action!

paris

HTML

<figure class="image-container">
    <img class="flexible-image" src="/images/paris8.jpg" alt="paris" >
</figure>

Sass

.flexible-image { @include elr-flex-image; }

Circular Images

kitten
kitten
kitten

HTML

<figure class="round-image">
    <img src="/images/cat12.jpg" alt="kitten" >
</figure>

Sass

.round-image { @include elr-circle-image(300px); }

Rounded Images

kitten
kitten

HTML

<img class="rounded-image" src="/images/cat3.jpg" alt="kitten" >

Sass

.rounded-image {
    @include elr-rounded-image(10px);
    display: block;
}

Unstyled List

An unordered list with no list styles.

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five

HTML

<ul class="unstyled-list-left" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>

Sass

.unstyled-list-left { @include elr-unstyled-list(left); }

Border List

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five

HTML

<ul class="border-list-left" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>

Sass

.border-list-left {
    @include elr-border-list(left);
    margin: 0;
}

Inline Lists

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five

HTML

<ul class="inline-list-left" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>
<ul class="inline-list-center" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>
<ul class="inline-list-right" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>

Sass

.inline-list-left { @include elr-inline-list(left); }
.inline-list-center { @include elr-inline-list(center); }
.inline-list-right { @include elr-inline-list(right); }

Custom Bullet List

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five

HTML

<ul class="triangle-list" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>
<ul class="checked-list" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>

Sass

.bullet-list {
    @include elr-bullet-list;
    padding-left: 0;
}

.triangle-list {
    @include elr-bullet-list('\25B6');
    padding-left: 0;
}

.checked-list {
    @include elr-bullet-list('\2713');
    padding-left: 0;
}

Icon lists with Font Awesome

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five

HTML

<ul class="heart-list" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>
<ul class="paw-list" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>
<ul class="star-list" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>

Sass

.heart-list {
    @include elr-font-awesome-list('\f004');
    padding-left: 0;
}

.paw-list {
    @include elr-font-awesome-list('\f1b0');
    padding-left: 0;
}

.star-list {
    @include elr-font-awesome-list('\f005');
    padding-left: 0;
}

Tables

NameAbbr.CapitalLargest CityStatehood Year
AlabamaALMontgomeryBirmingham1819
AlaskaAKJuneauAnchorage1959
ArizonaAZPhoenixPhoenix1912
ArkansasARLittle RockLittle Rock1836
CaliforniaCASacramentoLos Angeles1850
ColoradoCODenverDenver1876
ConnecticutCTHartfordBridgeport1788
DelawareDEDoverWilmington1787

HTML

Sass