Louisville Seminary Website Style Guide

Website style guide and reference for all current and future site additions.

Style Guide B

A supplementary style guide is available for pages having somewhat different styles like the example shown here.

Brand

need better color logo file

Document

Container

Generally, almost everything needs to be in either a <div class="container"> or a <div class="container--full-width">. (Not both. Don't nest one within another.) .container enforces a maximum width of 1400px for its content, a better practice for text content than older classes that kept the content at 80% of the viewport width all the time.

All content inside a grid container doesn't have to be a grid. We cover grids later.

Some pages use an older .grid-container class or an even older .emphasis-section class.

<div class="container">
    <h2>Lorem ipsum dolor sit amet...</h2>
    <p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="container--full-width">
    <h2>Lorem ipsum dolor sit amet...</h2>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

Sections

Divide your content in sections using <div class="section">. This provides semantic and visual separation between the sections.

For most pages you want a single .container and then a series of section.section elements within. In some grid layouts you may need to specify a section in each column instead of wrapping the grid in section tags.

<div class="container">
    <section class="section">
        <h1 class="page-title text-center">...</h1>
        <p class="lead text-center">...</p>
    </section>
    <section class="section" id="oscillating-ocelot">
        <h2>Grid Container</h2>
        <p>Lorem ipsum dolor sit amet...</p>
    </section>
    <section class="section" id="pandering-panther">
        <h2>Sections</h2>
        <p>Lorem ipsum dolor sit amet...</p>
    </section>
</div>

Apply .section-margins to other elements if you need the same margins as a section.

Mixed Regular and Full Width Containers

If one of your sections needs to move out of the .container and into a .container--full-width, then you nest your sections in your grid containers...

<div class="container">
    <section class="section" id="quotable-quokka">...</section>
</div>
<div class="container--full-width">
    <section class="section" id="preposterous-rhinocerous">...</section>
</div>
<div class="container">
    <section class="section" id="samantha-the-salmon">...</section>
</div>

...or vice versa.

<section class="section" id="tony-the-tiger">
    <div class="container">...</div>
</section>
<section class="section" id="uma-the-unicorn">
    <div class="container--full-width">...</div>
</section>
<section class="section" id="victor-the-vulture">
    <div class="container">...</div>
</section>

Page Title and Lead Text

Page Title

Some pages have a section of lead text as a form of introduction that is visually distinct from regular body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet tortor ut ipsum scelerisque tincidunt. Nulla in purus lorem. Aenean risus nibh, lacinia dapibus libero et, hendrerit imperdiet erat. Proin suscipit, nisl id commodo imperdiet, ipsum massa imperdiet metus, semper pretium mi lectus non ante.

Quisque sem eros, molestie eu efficitur eget, pharetra in leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eget viverra tellus, nec euismod urna. Morbi pharetra velit nec lorem iaculis rhoncus. Aliquam ultricies vulputate mauris, nec vulputate eros malesuada id. Nam nec eleifend quam.

Aenean non nisl nisi. Vivamus tempor tortor in malesuada lacinia. Integer libero nulla, blandit eu ullamcorper quis, aliquet tempor nisi. Sed ut condimentum tortor, nec fermentum est. Vestibulum aliquam nulla non pulvinar pellentesque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean interdum a ante et cursus. Maecenas molestie eros ante, a dignissim arcu lobortis ut. Mauris tempus arcu nec lorem varius, quis mattis massa commodo. Duis et eros lacus. Suspendisse quam nulla, suscipit quis nulla sed, laoreet facilisis diam. Mauris eu magna posuere, lacinia quam at, tincidunt augue. Sed mattis auctor nisl ut pellentesque. Integer facilisis ante sit amet ipsum feugiat, id imperdiet augue mollis. Curabitur rhoncus massa eu risus dictum, eu rutrum augue pretium.

<section class="section">
    <h1 class="page-title text-center">
        Page Title
    </h1>
    <p class="lead text-center">
        Some pages have a section of lead text as a form of
        introduction that is visually distinct from regular
        body text. Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Pellentesque aliquet tortor ut
        ipsum scelerisque tincidunt. Nulla in purus
        lorem. Aenean risus nibh, lacinia dapibus libero et,
        hendrerit imperdiet erat. Proin suscipit, nisl id
        commodo imperdiet, ipsum massa imperdiet metus,
        semper pretium mi lectus non ante.
    </p>
    <p>
        Quisque sem eros, molestie eu efficitur eget,
        pharetra in leo. Class aptent taciti sociosqu ad
        litora torquent per conubia nostra, per inceptos
        himenaeos. Vivamus eget viverra tellus, nec euismod
        urna. Morbi pharetra velit nec lorem iaculis
        rhoncus. Aliquam ultricies vulputate mauris, nec
        vulputate eros malesuada id. Nam nec eleifend quam.
    </p>
    <p>
        Aenean non nisl nisi. Vivamus tempor tortor in
        malesuada lacinia. Integer libero nulla, blandit eu
        ullamcorper quis, aliquet tempor nisi. Sed ut
        condimentum tortor, nec fermentum est. Vestibulum
        aliquam nulla non pulvinar pellentesque. Orci varius
        natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus. Aenean interdum a ante et
        cursus. Maecenas molestie eros ante, a dignissim
        arcu lobortis ut. Mauris tempus arcu nec lorem
        varius, quis mattis massa commodo. Duis et eros
        lacus. Suspendisse quam nulla, suscipit quis nulla
        sed, laoreet facilisis diam. Mauris eu magna
        posuere, lacinia quam at, tincidunt augue. Sed
        mattis auctor nisl ut pellentesque. Integer
        facilisis ante sit amet ipsum feugiat, id imperdiet
        augue mollis. Curabitur rhoncus massa eu risus
        dictum, eu rutrum augue pretium.
    </p>
</section>

Colors

Violet

rgb(119, 88, 179)
#7758B3

Yellow

rgb(255, 181, 17)
#ffb511

Blue

rgb(41, 88, 140)
#29588c

Red

rgb(224, 78, 57)
#e04e39

Light Grey

rgb(224, 224, 224)
#e0e0e0

Typography

Typeface → Verdana

We currently use the Verdana typeface in both our titles and our body text throughout the site.