This is the second panel of the basic tab example. This is the second panel of the basic tab example.
Kitchen Sink
Page Title: Lorem oopsum
This page's header is normally used for homepages but could be used for any page. It has a slider in the background which is optional.
This page has all of the items that could be used. The idea is that you can mix and match almost any element.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur malesuada massa, sit amet sagittis ante luctus nec. Duis sit amet mauris sem. Praesent sit amet mauris turpis. Maecenas tempus consectetur lorem sit amet pellentesque. Donec blandit vel elit imperdiet sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed nisi mi, fringilla ut tincidunt a, mattis semper mauris. Aliquam in varius dolor. Aenean ac pretium metus. Proin sed consectetur augue. Vestibulum aliquet laoreet nisi nec placerat.
Etiam vel luctus ligula, et volutpat ipsum. Praesent ut neque lorem. Ut dui ipsum, eleifend non mi sed, viverra tincidunt libero. Sed facilisis lacinia enim, a auctor mi semper in. Sed semper sed nulla vitae auctor. Sed ornare nec felis ac eleifend. Nam varius mi velit, vitae facilisis tortor eleifend in. Maecenas dictum sapien vel erat elementum pellentesque. Etiam sagittis efficitur velit ut viverra. Phasellus sed eleifend turpis, sed sodales nulla. Suspendisse viverra felis a lacus malesuada, at ullamcorper dolor consectetur. Phasellus arcu risus, suscipit in justo et, malesuada sodales magna.
Praesent quis est ac odio tristique hendrerit. Fusce sed varius ipsum, eget gravida lorem. Aenean dapibus arcu sit amet felis viverra, eget aliquam neque scelerisque. Quisque tempus turpis quis malesuada posuere. Suspendisse in ullamcorper massa, sit amet feugiat risus. Mauris finibus turpis id posuere tincidunt. Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Mauris eget pretium tellus, non iaculis elit. Aliquam at erat ut lorem tristique dictum. Suspendisse nec mattis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies vitae enim ac eleifend. Proin nisl mi, posuere fermentum dolor facilisis, semper porta sapien. Proin massa lorem, hendrerit ac semper a, dictum eu nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Nullam commodo consectetur quam a ornare. Mauris est mauris, iaculis at lectus nec, venenatis ullamcorper sapien. In eget nisl nec urna iaculis blandit. Aenean efficitur interdum mauris, sed elementum nisi luctus ut. Sed tristique eros sed urna egestas, et ullamcorper quam aliquet.
Ut viverra lectus finibus commodo tincidunt. Maecenas non enim urna. Nullam mollis risus nisi, nec tincidunt quam luctus sed. Suspendisse dapibus consectetur dui vel malesuada. Morbi id dolor accumsan, semper augue hendrerit, aliquet lorem. Fusce lacinia porta tortor non vehicula.
Praesent quis est ac odio tristique hendrerit. Fusce sed varius ipsum, eget gravida lorem. Aenean dapibus arcu sit amet felis viverra, eget aliquam neque scelerisque. Quisque tempus turpis quis malesuada posuere. Suspendisse in ullamcorper massa, sit amet feugiat risus. Mauris finibus turpis id posuere tincidunt. Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Mauris eget pretium tellus, non iaculis elit. Aliquam at erat ut lorem tristique dictum. Suspendisse nec mattis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies vitae enim ac eleifend. Proin nisl mi, posuere fermentum dolor facilisis, semper porta sapien. Proin massa lorem, hendrerit ac semper a, dictum eu nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Video player width will expand to the parent container.
Creative Services is using Vimeo for internal videos now. Code is similar to Youtube.
Currently, there are three additional styles for headers to accomidate the design. These styles can be mixed and matched if needed. If more styles are identified we can add them here.
Primary Gold color with all caps. See the Calendar demo at the bottom of this page. There is no chage for H3.
<h2 class="caps-gold">Header Text</h2>
A smaller version of each header. This shouldn't be used on h4 or smaller.
<h2 class="small">Heading Text</h2>
Normal size text that is bolded regardless of header level with normal capitalization.
<h2 class="normal-size">Header Text</h2>
These styles are from foundation and can be added to any text tag.
.text-left
.text-center
.text-right
The demo below uses .panel's but these colors can be used with any element including .row and .wide-row. Default typography colors will change as needed.
Each box below has an example of: heading color, paragraph color, link color, button color, and .panel with .half-background applied
Any combination of columns can be used, however, when using a right navigation the suggested division is .medium-8 for content and .medium-3 .medium-offset-1 for the navigation, as shown here.
Columns can be nested as long as the width looks okay.
.medium-X is the standard; .large-x and .small-x will probably not be used by content authors.
These probably won't be used because you don't have a fixed width for any column at any width.
There are three button sizes. The colors will change (with CSS) depending on the background color of their parent section. See above in the color section for examples.
On this page, all of the .wide-rows that have a color that extended them have .minor-section applied to them. Dashed lines below show the spacing and will not show up in production.
.row.major-section
.row.minor-section
With and without a photo. Quote boxes can have any of the primary or secondary colors for a background. Typography colors will change based on the color section above.
Nullam commodo consectetur quam a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies vitae enim ac eleifend. Proin nisl mi, posuere.
-- Jesse Clark, .butter
"The picture is 160x160 and has the class .circle added to it to create the circle border. This is .medium-3 and .medium-9 There is an mdash after the quote." ― Jesse
Typography on top of .blury-photo is white but can be changed with local CSS if the colors of the photo are light.
The text above and cirlce border have been created with CSS. use .ciricle-border on a heading.
Donec eros eros, hendrerit eu turpis at, cursus laoreet massa.
Suspendisse nec mattis urna. Hhendrerit eu turpis at, cursus laoreet massa. Donec eros eros, hendrerit eu turpis at, cursus laoreet massa.
John Tonai: Photo Imaging
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
John Tonai: Photo Imaging
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
John Tonai: Photo Imaging
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem Ipsum Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Mauris eget pretium tellus, non iaculis elit. Aliquam at erat ut lorem tristique dictum. Suspendisse nec mattis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies vitae enim ac eleifend. Proin nisl mi, posuere fermentum dolor facilisis, semper porta sapien.
July 30, 31, August 1, at 7:30 pm
August 2 at 2:00 pm
Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Ut viverra lectus finibus commodo tincidunt. Maecenas non enim urna. Nullam mollis risus nisi, nec tincidunt quam luctus sed. Suspendisse dapibus consectetur dui vel malesuada. Morbi id dolor accumsan, semper augue hendrerit, aliquet lorem. Fusce lacinia porta tortor non vehicula.
July 30, 31, August 1, at 7:30 pm
August 2 at 2:00 pm
Fusce lacinia porta tortor non vehicula. Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Ut viverra lectus finibus commodo tincidunt. Maecenas non enim urna. Nullam mollis risus nisi, nec tincidunt quam luctus sed. Suspendisse dapibus consectetur dui vel malesuada. Morbi id dolor accumsan, semper augue hendrerit, aliquet lorem.
July 30, 31, August 1, at 7:30 pm
August 2 at 2:00 pm
Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Ut viverra lectus finibus commodo tincidunt. Maecenas non enim urna. Nullam mollis risus nisi, nec tincidunt quam luctus sed. Suspendisse dapibus consectetur dui vel malesuada. Morbi id dolor accumsan, semper augue hendrerit, aliquet lorem. Fusce lacinia porta tortor non vehicula.
July 30, 31, August 1, at 7:30 pm
August 2 at 2:00 pm
Fusce lacinia porta tortor non vehicula. Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Ut viverra lectus finibus commodo tincidunt. Maecenas non enim urna. Nullam mollis risus nisi, nec tincidunt quam luctus sed. Suspendisse dapibus consectetur dui vel malesuada. Morbi id dolor accumsan, semper augue hendrerit, aliquet lorem.
Data-Equalizer is a foundation javascript function that adjusts heights on all elements.
Offering state-of-the-art computer imaging, artistic exploration and knowledge beyond visualizing scientific concepts; skills often sought by employers.
Offering state-of-the-art computer imaging, artistic exploration and knowledge beyond visualizing scientific concepts; skills often sought by employers.
Offering state-of-the-art computer imaging, artistic exploration and knowledge beyond visualizing scientific concepts; skills often sought by employers. Offering state-of-the-art computer imaging, artistic exploration and knowledge beyond visualizing scientific concepts; skills often sought by employers.
Add the class .half-background to add 50% white transparency to an element (i.e. rgba(255,255,255,.5)). This will allow the background color to come through slightly. Typography colors may change, see color section above for color examples.
As an added bonus, the following example uses data-equalizer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor aliquip ex ea commodo consequat.
Two styles for tabs exist, the only difference is that the second variation adds the class variation2. Although you can nest tabs and accordions, please don't.
This is the first panel of the basic tab example. You can place all sorts of content here including a grid.
This is the second panel of the basic tab example. This is the second panel of the basic tab example.
This is the third panel of the basic tab example. This is the third panel of the basic tab example.
This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.
This is the first panel of the basic tab example. You can place all sorts of content here including a grid.
This is the second panel of the basic tab example. This is the second panel of the basic tab example.
This is the third panel of the basic tab example. This is the third panel of the basic tab example.
This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.
Currently, two vairiations exist. One smoke, one honeycomb. More colors may be added in the future. Please don't use the same background color and tab color together.
This is the first panel of the basic tab example. You can place all sorts of content here including a grid.
This is the second panel of the basic tab example. This is the second panel of the basic tab example.
This is the third panel of the basic tab example. This is the third panel of the basic tab example.
This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.
This is the first panel of the basic tab example. You can place all sorts of content here including a grid.
This is the second panel of the basic tab example. This is the second panel of the basic tab example.
This is the third panel of the basic tab example. This is the third panel of the basic tab example.
This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.
Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Ut viverra lectus finibus commodo tincidunt. Maecenas non enim urna. Nullam mollis risus nisi, nec tincidunt quam luctus sed. Suspendisse dapibus consectetur dui vel malesuada. Morbi id dolor accumsan, semper augue hendrerit, aliquet lorem. Fusce lacinia porta tortor non vehicula.
The examples below are in a medium-4 but will stretch to any size.
Add the class .always-open to not have the toggle function.
Add the class .circle to the image that is sized 160x160
Dog
The name of this member of the hound group is of uncertain origin, but beagle may be derived from the Middle French word beegueule meaning "one who whines insistently."
Dog
Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Ut viverra lectus finibus commodo tincidunt.
Dog
Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Ut viverra lectus finibus commodo tincidunt.
Code for the calendar comes from Active Data Calendar and uses the 2015 Templates syndication template. Calendar events are show in a column.
Notes: Active Data's code will try to put in an old version of JQUERY, do not add it. The JavaScript code will need to go at the bottom of the page after JQUERY is loaded. Finally, the HTML code will suggest a div tag, use a ul tag instead.
Praesent quis est ac odio tristique hendrerit. Fusce sed varius ipsum, eget gravida lorem. Aenean dapibus arcu sit amet felis viverra, eget aliquam neque scelerisque. Quisque tempus turpis quis malesuada posuere. Suspendisse in ullamcorper massa, sit amet feugiat risus. Mauris finibus turpis id posuere tincidunt. Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Mauris eget pretium tellus, non iaculis elit. Aliquam at erat ut lorem tristique dictum. Suspendisse nec mattis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies vitae enim ac eleifend. Proin nisl mi, posuere fermentum dolor facilisis, semper porta sapien. Proin massa lorem, hendrerit ac semper a, dictum eu nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
The spacing between images can be changed by putting them in different columns. Currently, they are sitting in medium-3.
Icons are parsed with javascript after the page has loaded and may have a Cross origin requests issue if they are being pulled from a different domain/subdomain. It is done this way so we can have a single svg and then change the color on the page with CSS.
In the event of a Cross origin requests issue, a .smoke version of the image will be used.
Example Code:
<span class="icon [svg-name] [small / medium / large] [color]"></span>
Background color is transparent. Default size is small and default color is smoke.
A few classes to help development.
The placeholder class is used to highlight content that is missing. It is offensively pink and will only be added by develpers.
Praesent quis est ac odio tristique hendrerit. Fusce sed varius ipsum, eget gravida lorem. Aenean dapibus arcu sit amet felis viverra, eget aliquam neque scelerisque. Quisque tempus turpis quis malesuada posuere. Suspendisse in ullamcorper massa, sit amet feugiat risus. Mauris finibus turpis id posuere tincidunt. Donec eros eros, hendrerit eu turpis at, cursus laoreet massa. Mauris eget pretium tellus, non iaculis elit. Aliquam at erat ut lorem tristique dictum. Suspendisse nec mattis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies vitae enim ac eleifend. Proin nisl mi, posuere fermentum dolor facilisis, semper porta sapien. Proin massa lorem, hendrerit ac semper a, dictum eu nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Used to describe code. Used above in the header variation and icon sections.
$.fn.ReturnTacos = function(){
return "tacos";
}
For code that is inline.
Aliquam at erat ut lorem tristique dictum. Suspendisse nec mattis urna.
Page Last Updated: | Contact for this Page: Name
Privacy Policy | affirmative action/equal employment opportunity/title IX policy & coordinator