ignite-ui
Version:
Ignite UI for jQuery by Infragistics
167 lines (154 loc) • 8.67 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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 - Bootstrap 4 default
</h1>
</header>
<section class="section">
<h3 class="g-title-small">Brand Colors</h3>
<div class="g-row brand-color">
<div class="g-box-color bg-primary">#0275d8</div>
<div class="g-box-color bg-success">#5cb85c</div>
<div class="g-box-color bg-info">#5bc0de</div>
<div class="g-box-color bg-warning">#f0ad4e</div>
<div class="g-box-color bg-danger">#d9534f</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 bg-gray-darker">#373a3c</div>
<div class="g-box-color bg-gray-dark">#55595c</div>
<div class="g-box-color bg-gray">#818a91</div>
<div class="g-box-color bg-gray-light">#eceeef</div>
<div class="g-box-color bg-gray-lighter inherit">#f7f7f9</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 serif-font">
<h3 class="g-title-small">Serif font</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>
<h3 class="g-title-small">Alerts Styles</h3>
<p class="alert-box text-success"> Success alert box example</p>
<p class="alert-box text-info"> Info alert box example</p>
<p class="alert-box text-warning"> Warning alert box example</p>
<p class="alert-box text-danger"> Danger alert box example</p>
</section>
</div>
</div>
<div class="g-row">
<div class="flex-group">
<section class="section">
<h3 class="g-title-small">Form fields</h3>
<form>
<div class="section-column">
<label class="g-label" for="g-larg-input">Large input</label>
<input id="g-larg-input" class="g-input-field input--large" placeholder="Placeholder" type="text">
</div>
<div class="section-column">
<label class="g-label" for="g-disabled-input">Disabled input</label>
<input id="g-disabled-input" class="g-input-field" disabled placeholder="Placeholder" type="text">
</div>
<div class="section-column has-error">
<label class="g-label" for="g-error-input">Input Error</label>
<input id="g-error-input" class="g-input-field input--small" placeholder="Placeholder" type="text">
</div>
<div class="section-column has-warning">
<label class="g-label" for="g-warning-input">Input Warning</label>
<input id="g-warning-input" class="g-input-field input--small" placeholder="Placeholder" type="text">
</div>
<div class="section-column has-success">
<label class="g-label" for="g-success-input">Input Success</label>
<input id="g-success-input" class="g-input-field input--small" placeholder="Placeholder" type="text">
</div>
</form>
</section>
<section class="section">
<h3 class="g-title-small">Checkboxs</h3>
<label class="checkbox-wrap g-flex-row-start">
<input type="checkbox"> <span>Checkbox</span>
</label>
<label class="checkbox-wrap g-flex-row-start">
<input type="checkbox"> <span>Checkbox</span>
</label>
<label class="checkbox-wrap g-flex-row-start">
<input type="checkbox"> <span>Checkbox</span>
</label>
<h3 class="g-title-small">Radio buttons</h3>
<label class="g-flex-row-start">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
Option one is this
</label>
<label class="g-flex-row-start">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" checked="">
Option one is this
</label>
<label class="g-flex-row-start">
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" checked="">
Option one is this
</label>
</section>
</div>
</div>
</div>
</body>
</html>