170 lines
7.2 KiB
HTML
170 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hubl Styling Framework</title>
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">
|
|
<link rel="stylesheet" href="styles/hubl-framework/_index.scss">
|
|
</head>
|
|
<body>
|
|
<p>Avatars</p>
|
|
<div class="avatar xsmall">
|
|
<object type="image/svg+xml" data="images/alien.svg"></object>
|
|
</div>
|
|
<div class="avatar small">
|
|
<object type="image/svg+xml" data="images/alien.svg"></object>
|
|
</div>
|
|
<div class="avatar">
|
|
<object type="image/svg+xml" data="images/alien.svg"></object>
|
|
</div>
|
|
<div class="avatar large">
|
|
<object type="image/svg+xml" data="images/alien.svg"></object>
|
|
</div>
|
|
<div class="avatar xlarge">
|
|
<object type="image/svg+xml" data="images/alien.svg"></object>
|
|
</div>
|
|
|
|
<p>Badges</p>
|
|
<span class="badge color-primary">1</span>
|
|
<span class="badge reversed color-primary">2</span>
|
|
<span class="badge color-secondary">3</span>
|
|
<span class="badge reversed color-secondary">4</span>
|
|
<span class="badge color-third">5</span>
|
|
<span class="badge reversed color-third">6</span>
|
|
<span class="badge">7</span>
|
|
|
|
<p>Buttons + shadows + Text uppercase + text bold</p>
|
|
<button class="button color-primary bordered">Quitter le projet</button>
|
|
<button class="button reversed color-primary bordered shadow-small">Quitter le projet</button>
|
|
<button class="button color-secondary bordered shadow">Quitter le projet</button>
|
|
<button class="button reversed color-secondary bordered">Quitter le projet</button>
|
|
<button class="button color-third bordered shadow-large">Quitter le projet</button>
|
|
<button class="button reversed color-third bordered">Quitter le projet</button>
|
|
<button class="button color-disabled bordered">Quitter le projet</button>
|
|
<button class="button reversed color-disabled bordered">Quitter le projet</button>
|
|
<button class="button color-primary bordered text-uppercase text-bold">Quitter le projet</button>
|
|
<solid-link class="button rounded reversed color-secondary icon-pencil icon-large bordered"></solid-link>
|
|
|
|
<p>Borders</p>
|
|
<div class="border-all-sides border-color-primary">
|
|
<p>Salut</p>
|
|
</div>
|
|
<div class="border-left border-color-secondary">
|
|
<p>Salut</p>
|
|
</div>
|
|
<div class="border-bottom border-color-third">
|
|
<p>Salut</p>
|
|
</div>
|
|
<div class="border-right border-color-heading">
|
|
<p>Salut</p>
|
|
</div>
|
|
<div class="border-all-sides border-color-grey">
|
|
<p>Salut</p>
|
|
</div>
|
|
|
|
<p>Colors</p>
|
|
<div class="segment lg-half padding-medium bg-color-grey hover active text-color-heading">
|
|
<p>Lorem</p>
|
|
</div>
|
|
<div class="segment lg-quarter padding-small bg-color-heading hover active text-color-white">
|
|
<p>Ipsum</p>
|
|
</div>
|
|
<p class="text-hover">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis commodo justo ac eleifend. Aliquam porta molestie augue, fringilla scelerisque felis fermentum non. Donec maximus eros fringilla enim blandit eleifend. Praesent nisl nulla, iaculis a mauris vitae, pharetra ullamcorper arcu.</p>
|
|
|
|
<p>Text sizes + weights + position + letters spacings </p>
|
|
<p class="text-xsmall text-center">text xsmall and centered</p>
|
|
<p class="text-small text-letter-spacing-larger">Text small with larger letter spacing</p>
|
|
<p class="text-medium text-semibold text-right">Text medium, semibold, right-aligned</p>
|
|
<p class="text-large text-bold">Text large and bold</p>
|
|
<p class="text-xlarge text-underline">Text xlarge with underline</p>
|
|
<p class="text-xxlarge text-letter-spacing-large">Text xxlarge with large letter spacing</p>
|
|
|
|
<p>Forms</p>
|
|
<solid-form class="button-register">
|
|
<form action="">
|
|
<input type="text" name="" id="">
|
|
<textarea name="" id="" cols="30" rows="10"></textarea>
|
|
<input class="icon icon-magnify" type="text" name="" id="">
|
|
<input type="submit" value="Register">
|
|
</form>
|
|
</solid-form>
|
|
|
|
<p>Icons</p>
|
|
<span class="icon icon-home icon-primary hover margin-right-small"></span>
|
|
<span>Lorem</span>
|
|
<span class="icon icon-envelope icon-secondary rounded rounded-large rounded-primary icon-xlarge centered"></span>
|
|
|
|
<p>Segments</p>
|
|
<solid-form class="button-register">
|
|
<form class="segment lg-full padding-large clearfix" action="">
|
|
<div class="segment lg-half float-left padding-right-small">
|
|
<label>Lorem</label>
|
|
<input type="text" name="" id="">
|
|
</div>
|
|
<div class="segment lg-half float-left padding-left-small">
|
|
<label>Ipsum</label>
|
|
<input type="text" name="" id="">
|
|
</div>
|
|
</form>
|
|
</solid-form>
|
|
<p>Tables</p>
|
|
<div class="table-wrapper">
|
|
<div class="table">
|
|
<div class="table-header bg-color-heading text-color-white">
|
|
<div class="table-cell w280">Lorem</div>
|
|
<div class="table-cell w280">Ipsum</div>
|
|
<div class="table-cell w280">Dolor</div>
|
|
</div>
|
|
<div class="table-body">
|
|
<div>
|
|
<solid-display>
|
|
<div>
|
|
<div class="table-cell w280"></div>
|
|
<div class="table-cell w280"></div>
|
|
<div class="table-cell w280"></div>
|
|
</div>
|
|
</solid-display>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>Tags</p>
|
|
<span class="tag color-primary hover">Lorem</span>
|
|
<p>Links</p>
|
|
<div>
|
|
<solid-link class="backlink icon icon-arrow-left-circle margin-right-small icon-large">Back</solid-link>
|
|
</div>
|
|
<div>
|
|
<a class="link" href="">hello</a>
|
|
</div>
|
|
<p>Highlight</p>
|
|
<p class="highlight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis commodo justo ac eleifend. Aliquam porta molestie augue, fringilla scelerisque felis fermentum non. Donec maximus eros fringilla enim blandit eleifend. Praesent nisl nulla, iaculis a mauris vitae, pharetra ullamcorper arcu.</p>
|
|
<p>User thumb</p>
|
|
<solid-display class="segment lg-auto clearfix">
|
|
<div>
|
|
<hubl-user-avatar class="segment float-left margin-right-xsmall avatar xsmall">
|
|
<img src="https://www.resetera.com/data/avatar/1537498521/m/47/47921.jpg" alt="">
|
|
</hubl-user-avatar>
|
|
<solid-set-default class="segment lg-auto float-left block">
|
|
<solid-display-value class="block text-small text-semibold text-color-heading">Gaëlle Morin</solid-display-value>
|
|
<solid-display-value class="block text-xsmall">@gaelle</solid-display-value>
|
|
</solid-set-default>
|
|
</div>
|
|
</solid-display>
|
|
<solid-set-default class="segment lg-auto clearfix">
|
|
<author-avatar class="segment float-left margin-right-xsmall avatar xsmall">
|
|
<img src="https://www.resetera.com/data/avatar/1537498521/m/47/47921.jpg" alt="">
|
|
</author-avatar>
|
|
<solid-set-default class="segment lg-auto float-left block">
|
|
<solid-display-value class="text-small text-semibold text-color-heading">Sylvain</solid-display-value>
|
|
<solid-display-value class="text-small text-semibold text-color-heading">Le Bon</solid-display-value>
|
|
<author-contact>
|
|
<solid-link class="icon icon-speech icon-small icon-secondary hover"></solid-link>
|
|
</author-contact>
|
|
</solid-set-default>
|
|
</solid-set-default>
|
|
</body>
|
|
</html>
|