167 lines
8.5 KiB
HTML
167 lines
8.5 KiB
HTML
<!DOCTYPE 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 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">#428bca</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">#222222</div>
|
|
<div class="g-box-color bg-gray-dark">#333333</div>
|
|
<div class="g-box-color bg-gray">#555555</div>
|
|
<div class="g-box-color bg-gray-light">#999999</div>
|
|
<div class="g-box-color bg-gray-lighter inherit">#eeeeee</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> |