Menu

General Color Palette (in full-width parallax)

Buttons & Colors

button styles

button sizes

button colors

Button Links

Standard Link

Lorem ipsum Default Link Style delores sanctum...

Badges & Pills

Badges

Default Primary Secondary Tertiary Accent Success Warning Danger

Pills

Bars & Pagination

Progress Bars

English
100
French
50
Spanish
20

Pagination

JS Components

Faux Accordion (true accordions only have 1 panel open at a time)

Open all
item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


bxSlider

Popovers


Tooltips


Modal


Gijgo Datepicker

Images

Image

Rounded Image

Circle Image

Circle Image

Raised

Raised Image

Circle Raised

Thumbnail Image
 

card image

Card Title

This is basic card with image on top, title and description.

This is a Header

Card Title

This is a card component with button, header and footer.

Info Button


Hover over card
 

CSS Animations

Image Hovers In Box

HOVER 1

Slide Right

HOVER 2

Slide Down

HOVER 3

Slide Up

HOVER 4

Slide Left


Button Hovers (Not strictly limited to these 3 transitions.)

Tables

A Couple of Table Variations

Day Article Name Author Words Shares
1 Bootstrap 4 CDN and Starter Template Cristina 913 2.846
2 Bootstrap Grid 4 Tutorial and Examples Cristina 1.434 3.417
3 Bootstrap Flexbox Tutorial and Examples 1.877 1.234
Day Article Name Author Words Shares
1 Bootstrap 4 CDN and Starter Template Cristina 913 2.846
2 Bootstrap Grid 4 Tutorial and Examples Cristina 1.434 3.417
3 Bootstrap Flexbox Tutorial and Examples 1.877 1.234

Responsive Table w/ Search & Sort

Search and sort this responsive table

 
# Participant Sessions Activation Year Facility
1 George Martin two 2014 Dallas, TX
2 Adam Benson one 1997 Baltimore, MD
3 Thomas Maxwell two 2011 Dallas, TX
4 James Harte two 2017 Houston, TX
5 James Latham two 2012 San Francisco, CA
6 Quincy Peebles one 2009 San Francisco, CA
7 Andrew Taylor two 2007 Seattle, WA
8 Van Benson Heinz one 2001 Modesto, CA
9 Henry Stevens three 2011 Sacramento, CA
10 Tyler Hayes three 2008 Colorado Springs, CA
11 Kim Chaiseman one 2009 Seattle, WA
12 Zachary Penmore three 2014 Tacoma, WA
13 Amy Fillmore three 2016 Albany, NY
14 Franklin Nixon Jr one 2017 Miami, FL
15 Carrie Buchanan one 1999 San Diego, CA
16 Tyler McMann three 2013 Baltimore, MD
17 Andrew Wilson three 2014 Colorado Springs, CO
18 Charles Grant two 2009 Houston, TX
 

Form Controls

Inputs

Checkboxes

Radios

Toggle Buttons


Sliders using accent color


Media Queries & Breakpoints

Standard Breakpoints

                    $grid-breakpoints: (
                        xs: 0,
                        sm: 576px,
                        md: 768px,
                        lg: 992px,
                        xl: 1200px,
                        xxl: 1400px
                    );
                



Show/Hide Classes (change screen size to see breakpoints)

i am visible from (1px) to xl -
i am visible from md (768px) to xl -
i am visible from lg (992px) to xl -
i am visible from xl (1200px) to -
i will be NOT visible from sm (576px) to xl -
i will be NOT visible from md (768px) to xl -
i will be NOT visible from lg (992px) to xl -
i will be NOT visible from xl (1200px) to -

Selector Specificity SASS

div class "parent"
div class "child" (first child)
div class "grand-child"
div class "grand-child sibling"
div class "child" (last child)
.parent {
  color:red;
  .child {
    margin-left:12px;
    color:blue;
    &:last-child {
      text-decoration:underline;
    }
    .grand-child  {
      margin-left:12px;
      color:green;
      &.sibling {
        color:purple;
      }
    }
  }
}

Flexbox

If you don't like the grid.

Fill / Equal Widths

Use .flex-fill on flex items to force them into equal widths:

Flex item 1
Flex item 2
Flex item 3

Example without .flex-fill:

Flex item 1
Flex item 2
Flex item 3

Justify Content
Geeks 1
Geeks 2
Geeks 3
Geeks 1
Geeks 2
Geeks 3

Geeks 1
Geeks 2
Geeks 3

Geeks 1
Geeks 2
Geeks 3

Geeks 1
Geeks 2
Geeks 3

Parallax

Container-width Parallax Div/Row

Here is a short description 1

Here is a button

Tabs & Cards

Horizontal Tabs

tab 1 content

tab 2 content

 

Vertical Tabs

tab 1 content

tab 2 content

 

Tabs on Cards

Tabs with Icons on Card

"Everywhere but in Valencia people are mowing lawns, planting fences, tuning engines, counting receipts, baking bread, hanging laundry, keeping the wheel turning. Tradition, not convention, holds us here in Valencia . In the valley, the wheel does not turn. We keep it still, anchor it in the beach, in the brackish water of Vero bay.

I could watch them glide inches above the sea...inches above the seatop at unfathomable speeds. The littleness of the bird, defiant and inimitable against the rushing backdrop is equally unfathomable, yet the little bird dismisses it without a sense of ego or bravado. Mass and energy, sprinting elements of wind and water exist outside the wheel where ambition and progress is overruled by freedom and instinct.

I could watch these little birds dance like ice-skating companions whose familiar touches have been practiced to extinction. I could observe this foreplay of physics, the mating of balance and gravity that is today, at this precise moment, more dynamic than ever. And then suddenly comes the peace.

It is like a rest in a musical score when the chorus and the orchestra stops for a beat or two and nothing plays but the space: the silent part that comes at the end of a foreign film before the credits when it is quiet and the last scene freezes upon the screen. I could see and hear that today on Tower Hill if I chose to. It is the last scene when serenity takes over and the recapitulation finally and really does surrender."

Tabs with Padded Header

Tab Card One

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

Go somewhere
Tab Card Two

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

Go somewhere
Tab Card Three

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

Go somewhere

Icons

Font Awesome

Here's a list of all font-awesome 4.6.1 icons: https://forkaweso.me/Fork-Awesome/cheatsheet/

Here are the html entity codes for css: https://forkaweso.me/Fork-Awesome/cheatsheet/



Nucleo Icons


 
Icon i class Icon i class
arrows-1_cloud-download-93 arrows-1_cloud-upload-94
arrows-1_minimal-down arrows-1_minimal-left
arrows-1_minimal-right arrows-1_minimal-up
arrows-1_refresh-69 arrows-1_share-66
business_badge business_bank
business_briefcase-24 business_bulb-63
business_chart-bar-32 business_chart-pie-36
business_globe business_money-coins
clothes_tie-bow design_app
design_bullet-list-67 design_image
design_palette design_scissors
design_vector design-2_html5
design-2_ruler-pencil emoticons_satisfied
files_box files_paper
files_single-copy-04 health_ambulance
loader_gear loader_refresh
location_bookmark location_compass-05
location_map-big location_pin
location_world media-1_album
media-1_button-pause media-1_button-play
media-1_button-power media-1_camera-compact
media-2_note-03 media-2_sound-wave
objects_diamond objects_globe
objects_key-25 objects_planet
objects_spaceship objects_support-17
objects_umbrella-13 education_agenda-bookmark
education_atom education_glasses
education_hat education_paper
shopping_bag-16 shopping_basket
shopping_box shopping_cart-simple
shopping_credit-card shopping_delivery-fast
shopping_shop shopping_tag-content
sport_trophy sport_user-run
tech_controller-modern tech_headphones
tech_laptop tech_mobile
tech_tablet tech_tv
tech_watch-time text_align-center
text_align-left text_bold
text_caps-small gestures_tap-01
transportation_air-baloon transportation_bus-front-12
travel_info travel_istanbul
ui-1_bell-53 ui-1_calendar-60
ui-1_check ui-1_lock-circle-open
ui-1_send ui-1_settings-gear-63
ui-1_simple-add ui-1_simple-delete
ui-1_simple-remove ui-1_zoom-bold
ui-2_chat-round ui-2_favourite-28
ui-2_like ui-2_settings-90
ui-2_time-alarm ui-1_email-85
users_circle-08 users_single-02
 

Typography

Fonts

The header and body font used is Rubik (sans-serif).



Typography Styles (in Card container)

Header 1Walking Through Brambles

Header 2Walking Through Brambles

Header 3Walking Through Brambles

Header 4Walking Through Brambles

Header 5Walking Through Brambles
Header 6Walking Through Brambles

Paragraph Occasionally I'll wake with a new attitude. I'll discover a new fragrance coming through the window or from the pile of old books on the nightstand or from the bed sheets recently washed by a quiet stranger still adjusting to her own independence. And then I'll question my own freedom and discover that my dreams have been indentured by change and I've embraced a new choice as though it were a long aspired goal finally reached. By nightfall I will remember what I've lost and realize that my independence was at some point compromised by a lifetime of worry, doubt and ignorance. Experience is my last reward; and time will make from it another memory that I will tuck away inside me until the dream is over and I awake to another day tapping at my window.

Quote

"Occasionally I'll wake with a new attitude. I'll discover a new fragrance coming through the window or from the pile of old books on the nightstand or from the bed sheets recently washed by a quiet stranger still adjusting to her own independence."

- GWL: Walking Through Brambles

Muted Text

Meanwhile, the town square will burst with energy as my backyard recovers from my lawnmower's scourging.

Primary Text

Meanwhile, the town square will burst with energy as my backyard recovers from my lawnmower's scourging.

Info Text

Meanwhile, the town square will burst with energy as my backyard recovers from my lawnmower's scourging.

Success Text

Meanwhile, the town square will burst with energy as my backyard recovers from my lawnmower's scourging.

Warning Text

Meanwhile, the town square will burst with energy as my backyard recovers from my lawnmower's scourging.

Danger Text

Meanwhile, the town square will burst with energy as my backyard recovers from my lawnmower's scourging.

Small Tag Header with small subtitle
Use "small" tag for the headers