Skip to content

Latest commit

 

History

History
80 lines (54 loc) · 2.03 KB

STYLEGUIDE.md

File metadata and controls

80 lines (54 loc) · 2.03 KB
Raw

Styleguide

This is a WIP in order to standardize and unify the look and feel of the product All Gitcoin UI styled classes are prefixed with g- to distincly identify them.

Note: All pages within gitcoin are expected to reuse these classes as applicable as opposed to reinventing the wheel.

Typography

  • g-font-muli (Muli - Default)
  • g-font-futura (Futura - For Marketing Pages)

The font variations used in Gitcoin can be found in typography.css

Note: All pages within gitcoin are expected to reuse these classes as applicable as opposed to declaring the font within the templates css file.

Forms

Mutiselect (using select2)

usage

<div class="form__select2 g-multiselect">
    <select class="js-select2" multiple>
    </select>
</div>

The Multiselect styling used in Gitcoin can be found in select.css

Copy to clipboard

usage

<script src="{% static 'v2/js/clipboard.js' %}"></script>
<textarea id="matchid">This text will be copied</textarea>
<button data-copyclipboard="#matchid">Copy Text</button>

usage with class

<input type="text" class="matchclass" value="This text will be copied">
<button data-copyclipboard=".matchclass">Copy Text</button>

Note: You can use it with textarea or input elements.

Slider

usage

<label class="g-switch">
    <input id="package-period" type="checkbox">
    <span class="slider"></span>
</label>

The Slider styling used in Gitcoin can be found in slider.css

Animations

FadeIn

Container has a fade in animation when it becomes into viewport.

values

data-fade-direction: left | mid | right (default: mid) data-fade-duration: Number (default: 1500)

usage

<div class="g-fadein" data-fade-duration=1000 data-fade-direction="mid">