stylepoint - Guidepoint's Style Guide


Color Palette

 

background-color: bg-yellow

color: text-yellow

Hex: FFCD00
RGB: 255 205 0
HSL: 48 100 50

 

background-color: bg-black

color: text-black

Hex: 000000
RGB: 0 0 0
HSL: 0 0 0

 

background-color: bg-charcoalblack

color: text-charcoalblack

Hex: 212322
RGB: 33 35 34
HSL: 150 3 13

 

background-color: bg-white

color: text-white

Hex: ffffff
RGB: 255 255 255
HSL: 0 0 100

 

background-color: bg-blue

color: text-blue

Hex: 008bce
RGB: 0 139 206
HSL: 200 100 40

 

background-color: bg-lightblue

color: text-lightblue

Hex: 7fc5e6
RGB: 127 197 230
HSL: 199 67 70

 

background-color: bg-lightblue2

color: text-lightblue2

Hex: 008bce
RGB: 229 246 255
HSL: 201 100 94

 

background-color: bg-darkgrey

color: text-darkgrey

Hex: 5e5e5e
RGB: 94 94 94
HSL: 0 0 36

 

background-color: bg-darkgrey2

color: text-darkgrey2

Hex: 666666
RGB:102 102 102
HSL: 0 0 40

 

background-color: bg-midgrey1

color: text-midgrey1

Hex: 7e7e7e
RGB: 126 126 126
HSL: 0 0 49

 

background-color: bg-midgrey2

color: text-midgrey2

Hex: 999999
RGB: 153 153 153
HSL: 0 0 60

 

background-color: bg-lightgrey

color: text-lightgrey

Hex: e9e9e9
RGB: 233 233 233
HSL: 0 0 91

 

background-color: bg-lightgrey2

color: text-lightgrey2

Hex: f2f2f2
RGB: 242 242 242
HSL: 0 0 95

 

background-color: bg-red

color: text-red

Hex: af272f
RGB: 175 39 47
HSL: 356 63 42

 

background-color: bg-orange

color: text-orange

Hex: ff7f32
RGB: 255 127 50
HSL: 23 100 60

bg-cerise text-cerise bg-matisse text-matisse bg-sea-green text-sea-green bg-burnt-orange text-burnt-orange bg-royal-purple text-royal-purple bg-summer-sky text-summer-sky bg-persian-green text-persian-green bg-cardinal text-cardinal
bg-java text-java bg-olive text-olive bg-elm text-elm bg-crazy-orange text-crazy-orange bg-apple-blossom text-apple-blossom bg-kashmir-blue text-kashmir-blue bg-cherry text-cherry bg-oxford-blue text-oxford-blue
bg-dandelion text-dandelion bg-magenta text-magenta bg-rose text-rose bg-pompadour text-pompadour bg-daisy text-daisy bg-silver text-silver bg-amethyst text-amethyst bg-black-currant text-black-currant

Headers

<h1> = ~22px

<h2> = 20px

<h3> = 18px

<h4> = 16px

<h5> = 14px
<h6> = 12px

Headers class - Match h-tag sizing

<p class="h1">

<p class="h2">

<p class="h3">

<p class="h4">

<p class="h5">

<p class="h6">


Grid Reference

A lot of the initial Bootstrap conventions have remained the same. A container .row precedes nested children with .col.

However there is no more xs variable. This is a mobile first framework. If you write col-12 you are saying that from the smallest viewport up to the largest that a column will span the entire screen. If you wrote this instead col-12 col-md-10 the element would be 12 columns until it you hit the medium viewport size whereby the element will shrink to 10 columns. This paragrah is using this same principal if you care to inspect it further.

col-12 col-sm-6 col-md-3 bg-lightblue
col bg-lightgrey

Spacing Reference

Margin

m-0

m-1

m-2

m-3

m-4

m-5

Padding

p-0

p-1

p-2

p-3

p-4

p-5

Specific Sides - works the same for padding (p)

my-2

mx-2

mt-3

mr-3

mb-3

ml-3

Horizontal centering

mx-auto // note need to declare a fixed width here
Integer(0-5) = Pixels
0 = 0px | 1 = 4px | 2 = 8px | 3 = 16px | 4 = 25px | 5 = 48px

Buttons

Standard

    <button type="button" class="btn btn-primary m-1">Primary</button>
    <button type="button" class="btn btn-secondary m-1">Secondary</button>
    <button type="button" class="btn btn-success m-1">Success</button>
    <button type="button" class="btn btn-danger m-1">Danger</button>
    <button type="button" class="btn btn-warning m-1">Warning</button>
    <button type="button" class="btn btn-info m-1">Info</button>
    <button type="button" class="btn btn-light m-1">Light</button>
    <button type="button" class="btn btn-dark m-1">Dark</button>
    <button type="button" class="btn btn-link m-1">Link</button>
                    

Varying Sizes

    <button type="button" class="btn btn-primary btn-sm">Small Button</button>
    <button type="button" class="btn btn-primary">Regular Button</button>
    <button type="button" class="btn btn-primary btn-lg">Large Button</button>
                    

Outlined Buttons

    <button type="button" class="btn btn-outline-primary m-2">Primary</button>
    <button type="button" class="btn btn-outline-secondary m-2">Secondary</button>
    <button type="button" class="btn btn-outline-success m-2">Success</button>
    <button type="button" class="btn btn-outline-danger m-2">Danger</button>
    <button type="button" class="btn btn-outline-warning m-2">Warning</button>
    <button type="button" class="btn btn-outline-info m-2">Info</button>
    <button type="button" class="btn btn-outline-light m-2">Light</button>
    <button type="button" class="btn btn-outline-dark m-2">Dark</button>
    <button type="button" class="btn btn-outline-link m-2">Link</button>
                    

Disabled Buttons

    <button type="button" class="btn btn-primary disabled="">Primary</button>
    <button type="button" class="btn btn-secondary disabled="">Secondary</button>
                    

Disabled Anchor Tags acting like a button

Primary link Link
    <a href="#" class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
    <a href="#" class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>
                    

Grouped Buttons

Basic

    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-secondary">Left</button>
        <button type="button" class="btn btn-secondary">Middle</button>
        <button type="button" class="btn btn-secondary">Right</button>
    </div>
                    

Badges in Buttons

    <button type="button" class="btn btn-primary">
        Notifications <span class="badge blue mx-1">4</span>
    </button>
                    

Form

Basic Inputs

    <form>
        <div class="form-group">
            <label for="inputEmail">Email address</label>
            <input type="email" class="form-control mb-2" id="inputEmail" aria-describedby="emailHelp" placeholder="Enter email">

            <label for="inputText">Plain input</label>
            <input type="text" class="form-control mb-2" id="inputText" aria-describedby="emailHelp" placeholder="Enter text">
        </div>
    </form>
                    

Different Sizing

    <input class="form-control form-control-lg my-3" type="text" placeholder="large input">
    <input class="form-control form-control-sm my-3" type="text" placeholder="small input">
                    

Input group

Text inputs with submit

    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" aria-label="Checkbox for following text input">
            </div>
        </div>
        <input type="text" class="form-control" aria-label="Text input with checkbox" placeholder="Email">
    </div>

    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon2">
        <div class="input-group-append">
            <button class="btn btn-primary py-2 px-4" type="button">Go!</button>
        </div>
    </div>
                    

Textarea with Button

    <div class="input-group">
        <textarea class="form-control" aria-label="With textarea"></textarea>
        <div class="input-group-append">
            <button class="btn btn-primary" type="button">Go!</button>
        </div>
    </div>
                    

Input with Checkbox

    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" aria-label="Checkbox for following text input">
            </div>
        </div>
        <input type="text" class="form-control" aria-label="Text input with checkbox" placeholder="Email">
    </div>
                    

Basic Selects


                    


                    

Modals


                    

Tabs reference


    …
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active px-2 px-md-4" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Bio & Responses</a>
    …
                            


                            

    <a class="nav-link active px-2 px-md-4" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Bio & Responses</a>
                            





Icons

extra small


  <span class="icon-avatar icon-xs"></span>
                  

small


    <span class="icon-avatar icon-sm"></span>
                    

large


    <span class="icon-avatar icon-lg"></span>
                    

    <span class="icon-hamburger"></span>
    <span class="icon-hamburger--hover"></span>
    <span class="icon-hamburger active"></span>
                    

    <span class="icon-flyout-menu"></span>
                    

    <span class="icon-projects-mobile-menu"></span>
    <span class="icon-projects-mobile-menu--hover"></span>
    <span class="icon-projects-mobile-menu active"></span>
                    

    <span class="icon-avatar-mobile-menu"></span>
    <span class="icon-avatar-mobile-menu--hover"></span>
    <span class="icon-avatar-mobile-menu active"></span>
                    

    <span class="icon-view-list"></span>
    <span class="icon-view-list--hover"></span>
    <span class="icon-view-list active"></span>
                    

    <span class="icon-view-details"></span>
    <span class="icon-view-details--hover"></span>
    <span class="icon-view-details active"></span>
                    

    <span class="icon-view-tiles"></span>
    <span class="icon-view-tiles--hover"></span>
    <span class="icon-view-tiles active"></span>
                    

    <span class="icon-advisors-for-review"></span>
    <span class="icon-advisors-for-review--hover"></span>
    <span class="icon-advisors-for-review active"></span>
                    

    <span class="icon-avatar"></span>
    <span class="icon-avatar--hover"></span>
    <span class="icon-avatar active"></span>
                    

    <span class="icon-company"></span>
    <span class="icon-company--hover"></span>
                    

    <span class="icon-favorite-new"></span>
    <span class="icon-favorite-new--hover"></span>
    <span class="icon-favorite-new active"></span>
                    

    <span class="icon-filter"></span>
    <span class="icon-filter--hover"></span>
    <span class="icon-filter active"></span>
    <span class="icon-filter--outline"></span>
                    

    <span class="icon-folder-projects-open"></span>
    <span class="icon-project-open"></span>
    <span class="icon-project-open--hover"></span>
    <span class="icon-project-open active"></span>
    <span class="icon-project-open--white bg-black-currant"></span>
                    

    <span class="icon-project-requested"></span>
    <span class="icon-project-requested--hover"></span>
    <span class="icon-project-requested active"></span>
    <span class="icon-project-requested--white bg-black-currant"></span>
                    

    <span class="icon-project-closed"></span>
    <span class="icon-project-closed--hover"></span>
    <span class="icon-project-closed active"></span>
    <span class="icon-project-closed--white bg-black-currant"></span>
                    

    <span class="icon-project-closed-authorization"></span>
    <span class="icon-project-closed-authorization--hover"></span>
    <span class="icon-project-closed-authorization active"></span>
                    

    <span class="icon-projects"></span>
    <span class="icon-projects--hover"></span>
    <span class="icon-projects active"></span>
                    

    <span class="icon-get-more-actions"></span>
    <span class="icon-get-more-actions--hover"></span>
    <span class="icon-get-more-actions active"></span>
                    

    <span class="icon-group-meetings"></span>
    <span class="icon-group-meetings--hover"></span>
    <span class="icon-group-meetings active"></span>
                    

    <span class="icon-advisor-selected"></span>
    <span class="icon-advisor-selected--hover"></span>
    <span class="icon-advisor-selected active"></span>
                    

    <span class="icon-advisor-not-interested"></span>
    <span class="icon-advisor-not-interested--hover"></span>
    <span class="icon-advisor-not-interested active"></span>
                    

    <span class="icon-advisors-completed"></span>
    <span class="icon-advisors-completed--hover"></span>
    <span class="icon-advisors-completed active"></span>
                    

    <span class="icon-advisor-no-bio"></span>
    <span class="icon-advisor-no-bio--hover"></span>
    <span class="icon-advisor-no-bio active"></span>
                    

    <span class="icon-advisor-no-response"></span>
    <span class="icon-advisor-no-response--hover"></span>
    <span class="icon-advisor-no-response active"></span>
                    

    <span class="icon-advisor-no-job-history"></span>
    <span class="icon-advisor-no-job-history--hover"></span>
    <span class="icon-advisor-no-job-history active"></span>
                    

    <span class="icon-library"></span>
    <span class="icon-library--hover"></span>
    <span class="icon-library active"></span>
                    

    <span class="icon-log-out"></span>
    <span class="icon-log-out--hover"></span>
    <span class="icon-log-out active"></span>
                    

    <span class="icon-pin"></span>
    <span class="icon-pin--hover"></span>
    <span class="icon-pin active"></span>
    <span class="icon-pin--outline"></span>
                    

    <span class="icon-roundtable"></span>
    <span class="icon-roundtable--hover"></span>
    <span class="icon-roundtable active"></span>
                    

    <span class="icon-sector"></span>
    <span class="icon-sector--hover"></span>
    <span class="icon-sector active"></span>
                    

    <span class="icon-settings"></span>
    <span class="icon-settings--black"></span>
    <span class="icon-settings--blue"></span>
                    

    <span class="icon-survey"></span>
    <span class="icon-survey--hover"></span>
    <span class="icon-survey active"></span>
                    

    <span class="icon-teleconferences"></span>
    <span class="icon-teleconferences--hover"></span>
    <span class="icon-teleconferences active"></span>
                    

    <span class="icon-group-meetings"></span>
    <span class="icon-group-meetings--hover"></span>
    <span class="icon-group-meetings active"></span>
                    

    <span class="icon-chevron"></span>
    <span class="icon-chevron--hover"></span>
    <span class="icon-chevron active"></span>
                    

    <span class="icon-close-new"></span>
    <span class="icon-close-new--hover"></span>
    <span class="icon-close-new active"></span>
    <span class="icon-close-new--white bg-black-currant"></span>
                    

    <span class="icon-arrow-go-back"></span>
    <span class="icon-arrow-go-back--hover"></span>
    <span class="icon-arrow-go-back active"></span>
                    

    <span class="icon-search"></span>
    <span class="icon-search--hover"></span>
    <span class="icon-search active"></span>
                    

    <span class="icon-time-occurrence"></span>
    <span class="icon-time-occurrence--hover"></span>
    <span class="icon-time-occurrence active"></span>
                    

    <span class="icon-location"></span>
    <span class="icon-location--hover"></span>
    <span class="icon-location active"></span>
                    

    <span class="icon-star-rating"></span>
    <span class="icon-star-rating--hover"></span>
    <span class="icon-star-rating active"></span>
                    

    <span class="icon-info"></span>
    <span class="icon-info--hover"></span>
    <span class="icon-info active"></span>
                    

    <span class="icon-guidepoint"></span>
    <span class="icon-guidepoint--hover"></span>
    <span class="icon-guidepoint active"></span>
    <span class="icon-guidepoint--outline"></span>
                    

    <span class="icon-warning"></span>
    <span class="icon-warning--hover"></span>
    <span class="icon-warning active"></span>
                    

  <span class="icon-lock"></span>
  <span class="icon-lock--hover"></span>
  <span class="icon-lock active"></span>
                  

    <span class="icon-social-media-facebook"></span>
    <span class="icon-social-media-facebook--hover"></span>
    <span class="icon-social-media-facebook active"></span>
                  

    <span class="icon-social-media-twitter"></span>
    <span class="icon-social-media-twitter--hover"></span>
    <span class="icon-social-media-twitter active"></span>
                  

    <span class="icon-social-media-instagram"></span>
    <span class="icon-social-media-instagram--hover"></span>
    <span class="icon-social-media-instagram active"></span>
                  

    <span class="icon-social-media-linkedin"></span>
    <span class="icon-social-media-linkedin--hover"></span>
    <span class="icon-social-media-linkedin active"></span>
                  

    <span class="icon-not-available"></span>
                    

    <span class="icon-reports-all-usage"></span>
                    

    <span class="icon-calendar"></span>
    <span class="icon-calendar--hover"></span>
    <span class="icon-calendar active"></span>
                    

    <span class="icon-transcript"></span>
    <span class="icon-transcript--hover"></span>
    <span class="icon-transcript active"></span>
                    

    <span class="icon-excel"></span>
                    

    <span class="icon-adobe-pdf"></span>
                    

    <span class="icon-email"></span>
                    

  <span class="icon-gp-logo"></span>
                  

<span class="icon-yellow-tile--transcript"></span>
<span class="icon-yellow-tile--teleconferences"></span>
<span class="icon-yellow-tile--advisors"></span>
<span class="icon-yellow-tile--survey"></span>
<span class="icon-yellow-tile--roundtable"></span>
<span class="icon-yellow-tile--group-meetings"></span>
<span class="icon-yellow-tile--company"></span>
                  

  <span class="icon-delete"></span>
  <span class="icon-delete--hover"></span>
  <span class="icon-delete active"></span>
  <span class="icon-delete--white bg-black-currant"></span>
                  

  <span class="icon-edit"></span>
  <span class="icon-edit--hover"></span>
  <span class="icon-edit active"></span>
  <span class="icon-edit--white bg-black-currant"></span>
                  

  <span class="icon-sound"></span>
  <span class="icon-sound--hover"></span>
  <span class="icon-sound active"></span>
                  

  <span class="icon-plus"></span>
  <span class="icon-plus--hover"></span>
  <span class="icon-plus active"></span>
  <span class="icon-plus--white bg-black-currant"></span>
                  

  <span class="icon-notifications"></span>
  <span class="icon-notifications--hover"></span>
  <span class="icon-notifications active"></span>
  <span class="icon-notifications--outline"></span>
                  

  <span class="icon-downloads"></span>
  <span class="icon-downloads--hover"></span>
  <span class="icon-downloads active"></span>
                  

  <span class="icon-sort"></span>
  <span class="icon-sort--hover"></span>
  <span class="icon-sort active"></span>
  <span class="icon-sort--grey"></span>
                  

  <span class="icon-angles"></span>
  <span class="icon-angles--hover"></span>
  <span class="icon-angles active"></span>
  <span class="icon-angles--grey"></span>
                  

  <span class="icon-help"></span>
  <span class="icon-help--hover"></span>
  <span class="icon-help active"></span>
  <span class="icon-help--grey"></span>
  <span class="icon-help--yellow"></span>
  <span class="icon-help--white bg-black-currant"></span>
                  

  <span class="icon-meetingavatar"></span>
  <span class="icon-meetingavatar--hover"></span>
  <span class="icon-meetingavatar active"></span>
  <span class="icon-meetingavatar--grey"></span>
  <span class="icon-meetingavatar--yellow"></span>
  <span class="icon-meetingavatar--white bg-black-currant"></span>
                  

  <span class="icon-meetingphone"></span>
  <span class="icon-meetingphone--hover"></span>
  <span class="icon-meetingphone active"></span>
  <span class="icon-meetingphone--grey"></span>
  <span class="icon-meetingphone--yellow"></span>
  <span class="icon-meetingphone--white bg-black-currant"></span>
  
                  

  <span class="icon-recordings-transcript"></span>
  <span class="icon-recordings-transcript--hover"></span>
  <span class="icon-recordings-transcript active"></span>
  <span class="icon-recordings-transcript--grey"></span>
  <span class="icon-recordings-transcript--yellow"></span>
  <span class="icon-recordings-transcript--white bg-black-currant"></span>
  
                  





Badges Reference


  <span class="badge badge-primary"></span>
                  
Badge Primary

    <span class="badge badge-requested"></span>
                    
Badge Requested

    <span class="badge badge-pending"></span>
                    
Badge Pending

    <span class="badge badge-available"></span>
                    
Badge Available

    <span class="badge badge-downloaded"></span>
                    
Badge Downloaded

    <span class="badge badge-rsvp"></span>
                    
Badge RSVP