We’re still working on completing this document.
The website styles guide is a living documentation of ways to utilize the different stylistic options available through the website’s theme.

Many of the things seen here you may not see anywhere else on this website. That’s mainly because they were either coded way before, when there was a different goal for the website, or because it was designed so that you would have options and you have a list of them.

Globals

Global Styles like colors and typography.

Colors

Colored Text

this changes the color of the text and icons .

.blue

Primary color.

this changes the color of the text and icons .

.gray

Primary Palette, Secondary Color.

this changes the color of the text and icons .

.titanium

“Titanium” color.

this changes the color of the text and icons .

.black

“Black Wire” color.

this changes the color of the text and icons .

.rubiks

“Rubiks” color.

this changes the color of the text and icons .

.cu-2

“Cu 2+” color.

this changes the color of the text and icons .

.nature

“Nature” color.

this changes the color of the text and icons .

.au

“Au” color.

Colored Background

.blue‐‐block

Primary color.

.gray‐‐block

Primary Palette, Secondary Color.

.titanium‐‐block

“Titanium” color.

.black‐‐block

“Black Wire” color.

.rubiks‐‐block

“Rubiks” color.

.cu‐2‐‐block

“Cu 2+” color.

.nature‐‐block

“Nature” color.

.au‐‐block

“Au” color.

Typography

Titanium Robotics’s mission stays true to FIRST®’s ideals; our mission is: to encourage young people, especially students, to become advanced in the fields of science and technology by providing engaging and inspirational activities that promote the exploration of science, technology, engineering, and mathematics education (STEM Education) in a way that a normal classroom environment cannot.

global

Body copy. Source Sans light, 18px size.

Feelings are important, but it’s the Physics that matters!

h1

Headings 1. Source Sans light, 3em size. -1px/-0.01em letter spacing.

Feelings are important, but it’s the Physics that matters!

h2

Headings 2. Source Sans light, 2.25em size. -1px/-0.01em letter spacing.

Feelings are important, but it’s the Physics that matters!

h3

Headings 3. Source Sans normal, 1.75em size. -1px/-0.01em letter spacing.

Feelings are important, but it’s the Physics that matters!

h4

Headings 4. Source Sans normal, 1.125em size. -1px/-0.01em letter spacing.

Feelings are important, but it’s the Physics that matters!

h5

Headings 5. Source Sans normal, 1em (18px) size. -1px/-0.01em letter spacing.

Feelings are important, but it’s the Physics that matters!

h6

Headings 6. Source Sans light, 1em (18px) size. -1px/-0.01em letter spacing.

Objects

CSS objects are used throughout the website.

Icons

.team1160-text

Inline Logo Text, we don’t really use this one, but it’s here.

.team1160-1160

The 1160 number, you should give it a font-size minimum of 2em (36px).

.team1160-first

The FIRST® logo, you should give it a font-size minimum of 3em (54px).

.team1160-bird

The Titanium Bird, you should give it a font-size minimum of 4em (72px).

.team1160-chrome

Font-size minimum of 2em (36px).

.team1160-firefox

Font-size minimum of 2em (36px).

.team1160-opera

Font-size minimum of 2em (36px).

.team1160-safari

Font-size minimum of 2em (36px).

.team1160-IE

Font-size minimum of 2em (36px).

.team1160-html5

Font-size minimum of 2em (36px).

.team1160-times

.team1160-tick

.team1160-plus

.team1160-minus

.team1160-equals

.team1160-divide

that’s not all of them, but there’s too many at the moment. i’m coming back to this

more

Buttons

.button-small

Small buttons

.button-medium

Medium Buttons

.button-large

Large buttons

.button-small‐‐inverted

Small buttons

.button-medium‐‐inverted

Medium Buttons

.button-large‐‐inverted

Large buttons

.center .button-large

add the center class to the parent, or a span, to make the buttons centered

Code

Code blocks are handled by PRISM.js/PRISM.css. It’s an easy/simple code highlighter.


<pre><code class="language-php"><?php //PHP CODE ?></code></pre>

.language-php

Define a code type by using the class pattern language-xxxx. language-none gives no language highlighting.

The @media code in CSS works.

no <pre> block makes the code inline.

Modules