TheBestTutorials.css Built-In Responsiveness
Responsive Classes
TheBestTutorials.css includes a responsive, mobile first grid system to handle your layout:
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
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50px
rest
1/4
rest
100px
45px
rest
TheBestTutorials.css's grid system is responsive, and the columns will re-arrange automatically depending on the screen size:
| Class | Description |
|---|---|
| TheBestTutorials-half | Occupies 1/2 of the window (on medium and large screens) |
| TheBestTutorials-third | Occupies 1/3 of the window (on medium and large screens) |
| TheBestTutorials-twothird | Occupies 2/3 of the window (on medium and large screens) |
| TheBestTutorials-quarter | Occupies 1/4 of the window (on medium and large screens) |
| TheBestTutorials-threequarter | Occupies 3/4 of the window (on medium and large screens) |
| TheBestTutorials-rest | Defines the rest of a row |
| TheBestTutorials-col | Defines a column in a 12 column responsive fluid grid (more in a later chapter) |
Responsive Rows
Responsive classes must be placed inside a TheBestTutorials-row to be fully responsive.
| Class | Description |
|---|---|
| TheBestTutorials-row | Defines a padding-less container for responsive classes. |
| TheBestTutorials-row-padding | Defines a padded container for responsive classes. |
The TheBestTutorials-half Class
The width of the TheBestTutorials-half class is 1/2 of the parent element (style="width:50%").
On small* screens it resizes to 100%.
TheBestTutorials-half
TheBestTutorials-half
Example
<div class="TheBestTutorials-green TheBestTutorials-container TheBestTutorials-half">
<h2>TheBestTutorials-half</h2>
</div>
<div class="TheBestTutorials-container TheBestTutorials-half">
<h2>TheBestTutorials-half</h2>
</div>
</div>
The TheBestTutorials-third Class
The width of the TheBestTutorials-third class is 1/3 of the parent element (style="width:33.33%").
On small* screens it resizes to 100%.
TheBestTutorials-third
TheBestTutorials-third
TheBestTutorials-third
Example using TheBestTutorials-third
<div class="TheBestTutorials-green TheBestTutorials-container TheBestTutorials-third">
<h2>TheBestTutorials-third</h2>
</div>
<div class="TheBestTutorials-container TheBestTutorials-third">
<h2>TheBestTutorials-third</h2>
</div>
<div class="TheBestTutorials-container TheBestTutorials-third">
<h2>TheBestTutorials-third</h2>
</div>
</div>
The TheBestTutorials-twothird Class
The width of the TheBestTutorials-twothird class is 2/3 of the parent element (style="width:66.66%").
On small* screens it resizes to 100%.
TheBestTutorials-twothird
TheBestTutorials-third
Example using TheBestTutorials-twothird
<div class="TheBestTutorials-green TheBestTutorials-container TheBestTutorials-twothird">
<h2>TheBestTutorials-twothird</h2>
</div>
<div class="TheBestTutorials-container TheBestTutorials-third">
<h2>TheBestTutorials-third</h2>
</div>
</div>
The TheBestTutorials-quarter Class
The width of the TheBestTutorials-quarter class is 1/4 of the parent element (style="width:25%").
On small* screens it resizes to 100%.
TheBestTutorials-quarter
TheBestTutorials-quarter
TheBestTutorials-quarter
TheBestTutorials-quarter
Example using TheBestTutorials-quarter
<div class="TheBestTutorials-green TheBestTutorials-container TheBestTutorials-quarter">
<h2>TheBestTutorials-quarter</h2>
</div>
<div class="TheBestTutorials-container TheBestTutorials-quarter">
<h2>TheBestTutorials-quarter</h2>
</div>
<div class="TheBestTutorials-container TheBestTutorials-quarter">
<h2>TheBestTutorials-quarter</h2>
</div>
<div class="TheBestTutorials-container TheBestTutorials-quarter">
<h2>TheBestTutorials-quarter</h2>
</div>
</div>
The TheBestTutorials-threequarter Class
The width of the TheBestTutorials-threequarter class is 3/4 of the parent element (style="width:75%").
On small* screens it resizes to 100%.
TheBestTutorials-quarter
TheBestTutorials-quarter
Example using TheBestTutorials-threequarter
<div class="TheBestTutorials-green TheBestTutorials-container TheBestTutorials-threequarter">
<h2>TheBestTutorials-threequarter</h2>
</div>
<div class="TheBestTutorials-container TheBestTutorials-quarter">
<h2>TheBestTutorials-quarter</h2>
</div>
</div>
Combinations
TheBestTutorials-quarter
TheBestTutorials-half
TheBestTutorials-quarter
TheBestTutorials-quarter
TheBestTutorials-quarter
TheBestTutorials-half
TheBestTutorials-half
TheBestTutorials-quarter
TheBestTutorials-quarter
Nested Rows
Example: TheBestTutorials-half Inside TheBestTutorials-half
<div class="TheBestTutorials-half TheBestTutorials-container">
<h2>TheBestTutorials-half</h2>
<div class="TheBestTutorials-row">
<div class="TheBestTutorials-half TheBestTutorials-container TheBestTutorials-red">
<h2>TheBestTutorials-half</h2>
<p>This is a paragraph.</p>
</div>
<div class="TheBestTutorials-half TheBestTutorials-container">
<h2>TheBestTutorials-half</h2>
<p>This is a paragraph.</p>
</div>
</div>
</div>
<div class="TheBestTutorials-half TheBestTutorials-container">
<h2>TheBestTutorials-half</h2>
<div class="TheBestTutorials-row">
<div class="TheBestTutorials-half TheBestTutorials-container TheBestTutorials-red">
<h2>TheBestTutorials-half</h2>
<p>This is a paragraph.</p>
</div>
<div class="TheBestTutorials-half TheBestTutorials-container">
<h2>TheBestTutorials-half</h2>
<p>This is a paragraph.</p>
</div>
</div>
</div>
</div>
Columns Using Rest
The TheBestTutorials-rest class will use what's left of the grid column.
I am 150px
I am the rest
Example using TheBestTutorials-rest
<div class="TheBestTutorials-col" style="width:150px"><p>150px</p></div>
<div class="TheBestTutorials-rest TheBestTutorials-green"><p>rest</p></div>
</div>
Columns Using Percent
You can also use the CSS width property to determine a specific width of the columns.
20%
60%
20%
Example using percent
<div class="TheBestTutorials-col" style="width:20%"><p>20%</p></div>
<div class="TheBestTutorials-col" style="width:60%"><p>60%</p></div>
<div class="TheBestTutorials-col" style="width:20%"><p>20%</p></div>
</div>
The TheBestTutorials-content Class
The TheBestTutorials-content class defines a container for fixed size centered content. Use the CSS max-width property to override the default width (980px).
Example
page content...
</body>
Difference between TheBestTutorials-row and TheBestTutorials-row-padding
The TheBestTutorials-row class defines a padded-less container, while the TheBestTutorials-row-padding class adds a 8px left and right padding to each column:
TheBestTutorials-row:
TheBestTutorials-row-padding:
Example
<div class="TheBestTutorials-col s4"><img src="img_lights.jpg"></div>
<div class="TheBestTutorials-col s4"><img src="img_nature.jpg"></div>
<div class="TheBestTutorials-col s4"><img src="img_fjords.jpg"></div>
</div>
<div class="TheBestTutorials-row-padding">
<div class="TheBestTutorials-col s4"><img src="img_lights.jpg"></div>
<div class="TheBestTutorials-col s4"><img src="img_nature.jpg"></div>
<div class="TheBestTutorials-col s4"><img src="img_fjords.jpg"></div>
</div>
12 Column responsive fluid grid
TheBestTutorials.css also supports an advanced 12 column responsive fluid grid.
Resize the page to see the effect!
This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.
This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.
You will learn more about the fluid grid in a later chapter.
* Screen Resolutions
The built-in responsiveness of TheBestTutorials.css uses the DP size of a screen.
TheBestTutorials.css will treat an iPhone 6 with a resolution of 750 x 1334 pixels as a small screen of 375 x 667 pixels.
Small screens are less than 601 pixels DP, medium screens are less than 993 pixels DP.
Below is a list of typical device resolutions and reported DP sizes:
Iphone 4
Resolution
640 x 960
DP
320 x 480
Iphone 5
Resolution
640 x 1136
DP
320 x 528
Iphone 6
Resolution
750 x 1334
DP
375 x 667
Iphone 6s
Resolution
1080 x 1920
DP
414 x 736
Galaxy S6
Resolution
1440 x 2560
DP
360 x 640
Note 4
Resolution
1440 x 2560
DP
400 x 853
Nexus 6
Resolution
1440 x 2560
DP
411 x 731
iPad Mini
Resolution
768 x 1024
DP
768 x 1024
iPad
Resolution
1536 x 2048
DP
728 x 1024
Typical Laptop
Resolution
1366 x 768
DP
1366 x 768
Typical Desktop
Resolution
1920 x 1080
DP
1920 x 1080
