METU Style Guide

This UI style guide is a highly-modular design system for rapid web page development. It contains different materials that can be assembled into more complex page layouts.

This guide contains real working examples, code snippets, documentation, and style guidelines.

Usage

Start by adding the following files to your page:

<link rel="stylesheet" href="assets/toolkit/styles/toolkit.css"> Download
<script src="assets/toolkit/scripts/toolkit.js"></script> Download
<script src="assets/toolkit/scripts/bootstrap.css"></script> Download
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/> 
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=latin-ext" rel="stylesheet">

Sample Page

Download Sample Page

Color

Dark
rgb(30, 30, 30)
Light
rgb(250, 250, 250)
ODTÜ
rgb(207, 10, 44)
Dark Blue
rgb(55, 71, 79)
Dark Grey
rgb(64, 64, 65)

Typography

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam enim sunt sapiente molestias, sed dicta inventore consectetur beatae asperiores, aliquid laboriosam animi, praesentium repudiandae et, quam saepe sint cupiditate reiciendis.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6