Font Sizes

Preset settings for default font sizes. Sizes are set in pixels at the moment but will be modified to use rem. Default font family is: "Poppins" and for the monospace font it's "Fira Code".

Heading H1 (48px)

Heading H2 (36px)

Heading H3 (32px)

Heading H4 (28px)

Heading H5 (24px)

Heading H6 (18px)

Paragraph text (16px)

Span Tag (16px)
Strong tag (16px)

          
            <h1>Heading H1 (48px)</h1>
            <h2>Heading H2 (36px)</h2>
            <h3>Heading H3 (32px)</h3>
            <h4>Heading H4 (28px)</h4>
            <h5>Heading H5 (24px)</h5>
            <h6>Heading H6 (18px)</h6>
            <p>Paragraph text (16px)</p>
            <span>Span Tag (16px)</span>
            <strong>Strong tag (16px)</strong>

Buttons

Choose between two styles, three variants and three sizes buttons by using the "btn" class with additional settings. "btn" should be using with all buttons followed by the button style (Filled or outlined). Setting a size is optional.

          
            <button class="btn btn--main">Button Main</button>
            <button class="btn btn--sub">Button Sub</button>
            <button class="btn">Button Default</button>

            <button class="btn btn--main--outline">Button Main Outline</button>
            <button class="btn btn--sub--outline">Button Sub Outline</button>

            <button class="btn btn--main btn--sm">Button Small</button>
            <button class="btn btn--sub btn--lg">Button Large</button>

Tag

To use the tag styling use the "<small>" tag inside of a div and give it the class of "tag."

This is a tag This is a tag

          
            <span class="tag"> 
              <small>This is a tag</small>
            </span> 
            
            <span class="tag tag--outline"> 
              <small>This is a tag</small> 
            </span>

Card

Choose between 2 card styles. Each card showed contain the class of "card". By default the "card" class will give you a light themed card, to choose style to add a second class "card-dark"

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card Dark Title

Some quick example text to build on the card title and make up the bulk of the card's content.

          
            <div class="card" style="width: 320px">
              <div class="card__body">
                <h3>Card Title</h3>
                <p>
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
              </div>
            </div>

            <div class="card card--dark" style="width: 320px">
              <div class="card__body">
                <h3>Card Dark Title</h3>
                <p>
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
              </div>
            </div>

User Avatar

Choose between 4 sizes for a user thumbnail icon.

            
              <img class="avatar avatar--xl" src="#" />
              <img class="avatar avatar--lg" src="#" />
              <img class="avatar avatar--md" src="#" />
              <img class="avatar avatar--sm" src="#" />

Form and Inputs

Introducing the basic form and input fields. By default the form field with take the entire space of a container. Make sure your are using the class name properly. More form fields are coming soon... 🏃‍♂️. Feel free to contributes following the naming convention.

            
              <form action="#" class="form">
                <!-- Input:Text -->
                <div class="form__field">
                  <label for="formInput#text">Full Name: </label>
                  <input
                    class="input input--text"
                    id="formInput#text"
                    type="text"
                    name="text"
                    placeholder="Enter your full name"
                  />
                </div>

                <!-- Input:Email -->
                <div class="form__field">
                  <label for="formInput#email">Email: </label>
                  <input
                    class="input input--email"
                    id="formInput#email"
                    type="email"
                    name="email"
                    placeholder="e.g. user@domain.com"
                  />
                </div>

                <!-- Input:Password -->
                <div class="form__field">
                  <label for="formInput#password">Password: </label>
                  <input
                    class="input input--password"
                    id="formInput#passowrd"
                    type="password"
                    name="password"
                    placeholder="••••••••"
                  />
                </div>

                <!-- Input:Radio -->
                <div class="form__field form__field--radio">
                  <p>Favorite Color:</p>
                  <input 
                    class="input input--radio" 
                    id="formInput#radio-01" 
                    type="radio" 
                    value="red" 
                    name="color" 
                  />
                  <label for="formInput#radio-01">Red</label>
                  <input 
                    class="input input--radio" 
                    id="formInput#radio-02" 
                    type="radio" 
                    value="green" 
                    name="color" 
                  />
                  <label for="formInput#radio-02">Green</label>
                  <input 
                    class="input input--radio" 
                    id="formInput#radio-03" 
                    type="radio" 
                    value="blue" 
                    name="color" 
                  />
                  <label for="formInput#radio-03">Blue</label>
                </div>

                <!-- Input:Checkbox -->
                <div class="form__field form__field--checkbox">
                  <p>Your Hobby:</p>
                  <input
                    class="input input--checkbox"
                    id="formInput#checkbox-01"
                    type="checkbox"
                    value="riding"
                    name="hobby"
                  />
                  <label for="formInput#checkbox-01">Riding Bike</label>
                  <input
                    class="input input--checkbox"
                    id="formInput#checkbox-02"
                    type="checkbox"
                    value="surfing"
                    name="hobby"
                  />
                  <label for="formInput#checkbox-02">Surfing Sea</label>
                  <input
                    class="input input--checkbox"
                    id="formInput#checkbox-03"
                    type="checkbox"
                    value="brewing-beer"
                    name="hobby"
                  />
                  <label for="formInput#checkbox-03">Brewing Beer</label>
                </div>

                <!-- Textarea -->
                <div class="form__field">
                  <label for="formInput#textarea">Message: </label>
                  <textarea
                    class="input input--textarea"
                    name="message"
                    id="formInput#textarea"
                    placeholder="Write something awesome..."
                  ></textarea>
                </div>

                <!-- Input:Submit / Input:Reset  -->
                <div class="form__field form__field--action">
                  <input class="btn" type="reset" value="Reset" />
                  <input class="btn btn--main" type="submit" value="Submit" />
                </div>
              </form>