Website CSS styles and elements

Introduction

This document shows the most used html elements and styles in order to have a uniform and clean format through all the pages. It will be updated as we continue to develop the website and it should be a reference for users that update content in Cascade Server and new developers that need to get familiar with the website look and feel. We have also included in this docs a detailed information about global CSS settings, fundamental HTML elements styled and enhanced with extensible classes. 


Headings

Use HTML headings for headings only. Don't use headings to make text BIG or bold. There should be only one H1 tag per page. Below are example of the HTML tags used for the website headings without any css classes.


This is an H1 tag

This is an H2 tag

This is an H3 tag

This is an H4 tag

The most used CSS classes to style headings are:

  • .blue to make the font navy blue
  • .white to make the font white
  • .text-uppercase to make the text upper case
  • .Sanchez, a special font for the headings
  • .Sanchez-Bold to make the font bolder
  • .Sanchez-Light (Adds the Sanchez Light  font-face to the text element)
  • You can mix Sanchez with .blue, .gold, .white to add color.

Paragraph

When paragraphs are inserted in the website, they shouldn't contain any hidden styles and classes that sometimes word processing softwares like Microsof Word add. In order to avoid this issue, it is a good practice to paste the paragraph in atext editor and remove all styles and formats.

<p>...</p>

List

Unordered List
  • This is an example of unordered list.
  • This is an example of unordered list.
  • This is an example of unordered list.
  • This is an example of unordered list.

Ordered List
  1. This is an example of ordered list.
  2. This is an example of ordered list.
  3. This is an example of ordered list.

Font Styles

This is an example of bold text.

This is an example of italic text.

This is an example of underlined text.


Font Size

Font size 16px (default)

Font size 18px

Font size 20px


Internal links should be opened in the same page while external links and pdf shoud be opened in a new window/tab. Links have to be blue color,not underlined.
Example:
This is a test link



Tables

Tables are very useful in order to show tabular data. It should be responsive for all the devices. In order to achive this the following classes should be used:

  • .table
  • .table-responsive

For example:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Images

Responsive Images

<img src="..." class="img-responsive" alt="Responsive image">

Image shapes

Add classes to an <img> element to easily style images in any project.

<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">
  • .portrait Use this class for photos that you want to .pull-left or .pull-right). It adds padding to the side of the text depending on whether you are pulling the image right or left.
 

Course Descriptions Pop Up

In pages where courses are listed. You can show the course description by adding a link with the class "course-desc" and the course id name as show below:

<a class="course-desc" href="#" data-original-title="" title="">ACG 4501</a>

The course id has to match the course id that exist in the college database.

An example of a page that has a course listing is: https://business.fiu.edu/undergraduate/bachelor-of-accounting/courses.cfm


Buttons

Use the button classes on an <a>, <button>, or <input> element.

Link
Copy
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Context-specific usage

While button classes can be used on <a> and <button> elements, only <button> elements are supported within our nav and navbar components.

Links acting as buttons

If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

Among other things, there's a bug in Firefox <30 that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.

Options

Use any of the available button classes to quickly create a styled button.

Copy
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Conveying meaning to assistive technologies

Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the .sr-only class.

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

Copy
<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

Copy
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.

Button element

No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.

Copy
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Anchor element

Add the .active class to <a> buttons.

Primary link Link

Copy
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Disabled state

Make buttons look unclickable by fading them back with opacity.

Button element

Add the disabled attribute to <button> buttons.

Copy
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Cross-browser compatibility

If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

Copy
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

Link functionality caveat

This class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.

Useful CSS classes

  • .no-padding (removes all padding to the element)
  • .no-padding-top (removes padding to the top of the element)
  • .no-padding-sides (removes padding to the left and right of element)
  • .no-margin (removes all margin)
  • .no-margin-top (removes margin to the top of the element)
  • .no-margin-sides (removes margin to the left and right of element)
  • .pad-## (in cases where you want to add padding to an element you can use this class and the amount of padding you want to add: 10,15,20,30,40,50)

(You can mix .pad-## with .no padding-sides for example to only add padding to the top and bottom of an element)

  • .bigger (makes the text larger on an element)
  • .no-border (removes all borders on an element)
  • .btn-fiu (adds FIU colors to the button)
  • .btn-transparent (adds transparency to the button)
  • .btn-white (light version of the button)
  • .blue (changes the color of an element such as a paragraph or icon to blue)
  • .gold (changes the color of an element such as a paragraph or icon to gold)
  • .white (changes the color of an element such as a paragraph or icon to white)

Useful Icons

class: .icons8-About
class: .icons8-Administrator
class: .icons8-Airplane-Take-Off
class: .cons8-Airport
class: .icons8-Android
class: .icons8-Apartment
class: .icons8-Approval
class: .icons8-Ask-Question
class: .icons8-Banknotes
class: .icons8-Beach
class: .icons8-Briefcase
class: .icons8-Bus
class: .icons8-Business
class: .icons8-Business-Contact
class: .icons8-Businessman
class: .icons8-Businesswoman
class: .icons8-Caduceus
class: .icons8-Calendar
class: .icons8-Cancel
class: .icons8-Chat
class: .icons8-Checkmark
class: .icons8-Class
class: .icons8-Classroom
class: .icons8-Collaboration
class: .icons8-Comments
class: .icons8-Conference
class: .icons8-Conference-Call
class: .icons8-Contact-Card
class: .icons8-Courses
class: .icons8-Curriculum
class: .icons8-Department
class: .icons8-Diploma
class: .icons8-Diploma-1
class: .icons8-Diploma-2
class: .icons8-Doctors-Bag
class: .icons8-Domain
class: .icons8-Elective
class: .icons8-Email
class: .icons8-Exam
class: .icons8-Faq
class: .icons8-Fine-Print
class: .icons8-For-Experienced
class: .icons8-Geo-Fence
class: .icons8-Geography
class: .icons8-Globe
class: .icons8-Good-Quality
class: .icons8-Graduation-Cap
class: .icons8-Groups
class: .icons8-Handshake
class: .icons8-Hashtag
class: .icons8-Help
class: .icons8-Idea
class: .icons8-Info
class: .cons8-Invite
class: .icons8-Literature
class: .icons8-Location
class: .icons8-Manager
class: .icons8-Map-Marker
class: .icons8-Math
class: .icons8-Medical-Doctor
class: .icons8-Meeting
class: .icons8-My-Topic
class: .icons8-News
class: .icons8-Online-Support
class: .icons8-Overtime
class: .icons8-Multiple-Devices
class: .icons8-Partly-Cloudy-Day
class: .icons8-Phone
class: .icons8-Pie-Chart
class: .icons8-Podium-With-Audience
class: .icons8-Podium-With-Speaker
class: .icons8-Poll-Topic
class: .icons8-Puzzle
class: .icons8-Quote
class: .icons8-Ratings
class: .icons8-Reading
class: .icons8-Report-Card
class: .icons8-Response
class: .icons8-Rules
class: .icons8-Safety-Collection-Place
class: .icons8-Sales-Performance
class: .icons8-School
class: .icons8-Search
class: .icons8-Star
class: .icons8-Street-View
class: .icons8-Student
class: .icons8-Sun
class: .icons8-Survey
class: .icons8-Talk
class: .icons8-Technology-Items
class: .icons8-Todo-List
class: .icons8-Topic
class: .icons8-University
class: .icons8-User-Female-Circle
class: .icons8-User-Female3
class: .icons8-User-Male
class: .icons8-User-Male-Circle
class: .icons8-Voice-Presentation
class: .icons8-Watch
class: .icons8-iPhone
class: .icons8-Palm-Tree
Back to top