The Florida State University Foundation Framework is a light-weight and simple CSS solution that utilizes the Bootstap 3 CSS Framework but adds in the FSU styles and color scheme to components.

Use the style guide below to get started, or for inspiration. To see how an element was created, right-click on the element and click 'inspect' (Chrome) or 'inspect element' (Firefox).

Note: These examples apply to in-page elements only. A future guide with examples on creating a full page template, along with additional animation and javascript examples will be added in the future.

Standard Background

Canvas/White (Link)

Colored Background Palette

Outer Garnet (Link)

Garnet (Link)

Inner Garnet (Link)

Outer Gold (Link)

Gold (Link)

Inner Gold (Link)

Outer Champagne (Link)

Champagne (Link)

Inner Champagne (Link)

Outer Eggshell (Link)

Eggshell (Link)

Inner Eggshell (Link)

Outer Smoke (Link)

Smoke (Link)

Inner Smoke (Link)

Outer Graphite (Link)

Graphite (Link)

Inner Graphite (Link)

Outer Slate (Link)

Slate (Link)

Inner Slate (Link)

Outer Midnight (Link)

Midnight (Link)

Inner Midnight (Link)

Serif Font

Make any block of text use the Garamond Pro font

Headings

Heading 1 Sub-heading

Heading 2 Sub-heading

Heading 3 Sub-heading

Heading 4 Sub-heading

Heading 5 Sub-heading

Heading 6 Sub-heading

Paragraphs

This is an example of lead body copy.

This is an example of standard paragraph text.

This is an example of small, fine print text.

This is an example of strong, bold text.

This is an example of emphasized, italic text.

This is an example of uppercase text.

Left aligned text.

Center aligned text.

Right aligned text.

Colored Text

This is an example of garnet text.

This is an example of gold text.

This is an example of champagne text.

This is an example of eggshell text.

This is an example of smoke text.

This is an example of graphite text.

This is an example of slate text.

This is an example of midnight text.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Garnet: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Gold: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Champagne: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Eggshell: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Smoke: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Graphite: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Slate: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Midnight: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Garnet: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Gold: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Champagne: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Eggshell: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Smoke: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Graphite: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Slate: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Midnight: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
– Dr. Lorem Ipsum III

Basic Table

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Striped Rows

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Bordered Table

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Hover Rows

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Standard Buttons

Default Garnet Gold Champagne Eggshell Smoke Graphite Slate Midnight Default Garnet Gold Champagne Eggshell Smoke Graphite Slate Midnight Large button Default button Small button Extra Small button Block level button

Outline Buttons with Smooth Transition

Outline Buttons (For use on backgrounds that are NOT white)

Garnet Gold Champagne Eggshell Smoke Graphite Slate Midnight

Social Media Buttons

Examples (Not all colors/styles shown, see Font Awesome for more icons)

Labels

H1: Garnet Label Label

H2: Gold Label Label

H3: Champagne Label Label

H4: Eggshell Label Label

H5: Smoke Label Label

H6: Graphite Label Label

P: Slate Label Label

P Lead: Midnight Label Label

Badges

H1: Garnet Badge Badge

H2: Gold Badge Badge

H3: Champagne Badge Badge

H4: Eggshell Badge Badge

H5: Smoke Badge Badge

H6: Graphite Badge Badge

P: Slate Badge Badge

P Lead: Midnight Badge Badge

Standard Jumbotron

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Colored Jumbotron

Garnet Jumbotron

Gold Jumbotron

Champagne Jumbotron

Eggshell Jumbotron

Smoke Jumbotron

Graphite Jumbotron

Slate Jumbotron

Midnight Jumbotron

Styled Jumbotrons

Garnet Jumbotron

Small Triangle Bottom

Gold Jumbotron

Full Triangle (Banner)

Graphite Jumbotron

ZigZag Triangle Bottom

Standard Bootstrap Alerts

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

Standard List Groups

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Cras justo odio14
Cras justo odio14
Cras justo odio14

Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

Colored List Groups

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac

Garnet
Gold
Champagne
Eggshell
Smoke
Graphite
Slate
Midnight

Garnet Gold Champagne Eggshell Smoke Graphite Slate Midnight

Styled List Group Examples

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Button

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Basic Panel Examples

Basic panel example

Panel heading without title

Panel content

Panel title

Panel content

Panel footer

Panel title

Panel content

Panel footer

Great to Combine with Collapsing Panels [PDF]

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Panel heading

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Quick Links

DIV > A Link Here Link Here Link Here

Text Only Example

Facts about FSU

UL > LI
Text Only
No Links
Text Here
Text Here

Wells

Look, I'm in a well!

Look, I'm in a large well!

Look, I'm in a small well!

Look, I'm in a well!

Standard Images

Image Thumbnails

Thumbnail Header

Thumbnail Caption

Thumbnail Caption Italic

Media Objects

Media Heading (Basic)

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media Heading (Nested)

Nested Media Heading

Media Heading (Right Object)

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media Heading (Left/Right Object)

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media Heading (Styled Example)

Top aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Middle aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Bottom aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Embeded Videos

Standard Tabbed Content

Home

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.

Profile

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Messages

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Settings

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam id quidem licebit iis existimare, qui legerint. Non est igitur summum malum dolor. Quae animi affectio suum cuique tribuens atque hanc, quam dico. Sed venio ad inconstantiae crimen, ne saepius dicas me aberrare; Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. Qui ita affectus, beatum esse numquam probabis; Sed quid ages tandem, si utilitas ab amicitia, ut fit saepe, defecerit? Duo Reges: constructio interrete. Quid censes in Latino fore?

Garnet Tab
Example

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.