TheBestTutorials.css Intro
TheBestTutorials.css Colors
The TheBestTutorials-color classes are inspired by modern colors used in marketing, road signs, and sticky notes:
Red
Green
Blue
Black
Pink
Teal
Indigo
Brown
TheBestTutorials.css Panels, Notes, and Quotes
The TheBestTutorials-container class can display all kinds of notes and quotes:
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
TheBestTutorials.css Headers and Footers
The TheBestTutorials-container class also provide solutions for all kinds of headers and footers:
Header
My Footer
Footer information goes here
TheBestTutorials.css Alerts
The TheBestTutorials-container class can also be used for all kinds of alerts:
Danger!
Red often indicates a dangerous or potentially negative action.
Warning!
Yellow and orange often indicates a warning that might need attention.
Success!
Green often indicates a successful or positive action.
Info!
Blue often indicates a neutral informative change or action.
TheBestTutorials.css Cards
The TheBestTutorials-card classes are suitible for both images and notes:
TheBestTutorials-card-2
TheBestTutorials-card-4
TheBestTutorials-card-8
Header
A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads,
to have seating for one to eight people, and to typically have four wheels.
(Wikipedia)
TheBestTutorials.css Tables
The TheBestTutorials-table classes can handle all kinds of tables:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Anja | Bore | 100 |
TheBestTutorials.css Lists
The TheBestTutorials-ul class can handle all kinds of lists:
-
×
Mike
Web Designer -
×
Jill
Support -
×
Jane
Accountant -
×
Jack
Advisor
TheBestTutorials.css Buttons
The TheBestTutorials-btn class provides buttons of all sizes and types.
The TheBestTutorials-btn-floating buttons are circular and meant for important functions.
TheBestTutorials.css Tags and Badges
The TheBestTutorials-tag and TheBestTutorials-badge classes are capable of displaying all kinds of tags, badges and signs:
2 8 A B
New Warning Danger Info
BREATHE
UNDER WATER
TheBestTutorials.css Responsive
The responsive grid classes provide responsiveness for all device types: PC, laptop, tablet, and mobile.
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
1/1
1/4
1/4
1/2
1/4
1/2
1/4
50px
rest
1/4
rest
100px
45px
rest
TheBestTutorials.css also supports a 12 column mobile-first fluid grid with small, medium, and large classes.
TheBestTutorials.css Modals
The TheBestTutorials-modal class provides modal dialog in pure HTML:
Modal Image:
TheBestTutorials.css Progress Bars
The TheBestTutorials-progressbar class creates progress bars:
TheBestTutorials.css Dropdowns
The TheBestTutorials-dropdown classes provide dropdowns:
TheBestTutorials.css Accordions
The TheBestTutorials-accordion class provide accordions:
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Accordion with Images:
Trolltunga, Norway
TheBestTutorials.css Tabs
Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.
London
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
Tabbed Image Gallery:
×
×
×
×
subhodaya.css Navigation
The subhodaya-navbar class creates a navigation bar:
The TheBestTutorials-sidenav class creates a side navigation:
TheBestTutorials.css Pagination
The TheBestTutorials-pagination class provides a simple way for page navigation:
Slideshows
TheBestTutorials.css provide slideshows for cycling through images or other content:
TheBestTutorials.css Animations
The TheBestTutorials-animate classes provide an easy way to slide and fade in elements:
TheBestTutorials.css Images
Styling images in W3CSS is easy:
TheBestTutorials.css Input Forms
The TheBestTutorials-input classes are for input forms:
Input Form
Input Form
TheBestTutorials.css Fonts
With TheBestTutorials.css it is extremely easy to add fonts to a web page:
TheBestTutorials.css Tooltips
The TheBestTutorials-tooltip class can display all kinds of tooltips:
Hover over this text! Tooltip content
Hover over this text! Tooltip content
Hover over this text! Tooltip content
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads.
Mobile Color Themes
The predefined color themes are specially suitable for mobile web applications.
Theme Indigo
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Theme Teal
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
