Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
General Color Palette (in full-width parallax)
Badges & Pills
Badges
Default Primary Secondary Tertiary Accent Success Warning DangerPills
Bars & Pagination
Progress Bars
English
French
Spanish
Pagination
JS Components
Faux Accordion (true accordions only have 1 panel open at a time)
- item 1
-
- 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
Circle Image
Raised
Circle Raised
Card Title
This is basic card with image on top, title and description.
This is a Header
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.)
Font Awesome Icons
Icon Back Icon Forward Icon Down Icon Up Icon Spin Icon Drop Icon Fade Icon Float Away Icon Sink Away Icon Grow Icon Shrink Icon Pulse Icon Pulse Grow Icon Pulse Shrink Icon Push Icon Pop Icon Bounce Icon Rotate Icon Grow Rotate Icon Float Icon Sink Icon Bob Icon Hang Icon Wobble Horizontal Icon Wobble Vertical Icon Buzz Icon Buzz Out
Border Transitions
Round Corners Underline From Left Underline From Center Underline From Right Overline Reveal Overline From Left Overline From Center Overline From Right
Speech Bubbles
Bubble Top Bubble Right Bubble Bottom Bubble Left Bubble Float Top Bubble Float Right Bubble Float Bottom Bubble Float LeftTables
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
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 somewhereTab Card Two
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereTab Card Three
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereIcons
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.