ignite-ui
Version:
Ignite UI for jQuery by Infragistics
97 lines (86 loc) • 4.22 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Default-style-guide</title>
<link rel="stylesheet" href="style-guide.css">
</head>
<body>
<div class="container">
<header class="style-guide-header">
<h1 class="g-title-big">
Style guide - ios
</h1>
</header>
<section class="section">
<h3 class="g-title-small">Brand Colors</h3>
<div class="g-row brand-color">
<div class="g-box-color accent1">#007aff</div>
<div class="g-box-color accent1-mid">#007aff</div>
<div class="g-box-color accent1-mid-2">#4cd864</div>
<div class="g-box-color accent1-light">#007aff</div>
<div class="g-box-color accent2">#4cd864</div>
<div class="g-box-color accent3">#fd472b</div>
<div class="g-box-color accent3-mid">#fd472b</div>
<div class="g-box-color accent3-light">#fd472b</div>
</div>
</section>
<section class="section">
<h3 class="g-title-small">Gray Colors</h3>
<div class="g-row brand-color">
<div class="g-box-color igGray1">#F0F0F0</div>
<div class="g-box-color igGray2">#eeeeee</div>
<div class="g-box-color igGray3">#e8e8e8</div>
<div class="g-box-color igGray4">#dadada</div>
<div class="g-box-color igGray5">#bcbcbc</div>
<div class="g-box-color igGray6">#cccccc</div>
<div class="g-box-color igGray7">#999999</div>
<div class="g-box-color igGray8">#888888</div>
<div class="g-box-color igGray9">#777777</div>
<div class="g-box-color igGray10">#444444</div>
</div>
</section>
<section class="section">
<h3 class="g-title-small">Paragraph styles</h3>
<div class="g-row paragraph-styles">
<div class="g-box-text text-left">
<h4>Text Left</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
<div class="g-box-text text-center">
<h4>Text Center</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
<div class="g-box-text text-right">
<h4>Text Right</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
</div>
</section>
<section class="section">
<h3 class="g-title-small">Links Styles</h3>
<p>Lorem ipsum dolor sit amet, consectetur <a href="#">Link in paragraph</a> elit. </p>
<a href="#">This is a link</a>
</section>
<div class="g-row">
<div class="flex-group">
<section class="section">
<h3 class="g-title-small">Titles Styles</h3>
<br>
<h1>This is h1 title</h1>
<h2>This is h2 title</h2>
<h3>This is h3 title</h3>
<h4>This is h4 title</h4>
<h5>This is h5 title</h5>
<h6>This is h6 title</h6>
</section>
<section class="section">
<h3 class="g-title-small">Text color</h3>
<p class="text-color">Default text color example</p>
<p class="text-muted">Muted text color example</p>
</section>
</div>
</div>
</div>
</body>
</html>