299 lines
5.1 KiB
CSS
Executable File
299 lines
5.1 KiB
CSS
Executable File
/*********************************************************************************************
|
||
|
||
Project : rwdg- responsive grid system for your next project
|
||
URI: http://rwdgrid.com/
|
||
Version: 2.0
|
||
Author: Vineeth G S
|
||
Author URI: http://www.gsvineeth.com
|
||
Github URI: https://github.com/gsvineeth/rwdgrid/
|
||
|
||
**********************************************************************************************
|
||
|
||
1. Base code
|
||
2. Mobile Grid
|
||
3. Grid 720px+
|
||
4. Grid 1024px+
|
||
5. Grid 1200px+
|
||
6. Helper classes
|
||
|
||
**********************************************************************************************/
|
||
|
||
|
||
/*********************************************************************************************
|
||
1. Base code
|
||
*********************************************************************************************/
|
||
|
||
[class^='g-'] {
|
||
float: left;
|
||
padding: 10px;
|
||
width:100%;
|
||
box-sizing:border-box;}
|
||
|
||
.clear-grid{
|
||
clear:both;
|
||
float:inherit;}
|
||
|
||
.row{
|
||
margin:0;}
|
||
|
||
/*********************************************************************************************
|
||
2. Mobile Grid
|
||
*********************************************************************************************/
|
||
|
||
.g-mv-12 {
|
||
width: 100%;}
|
||
|
||
.g-mv-11 {
|
||
width: 91.666663%;}
|
||
|
||
.g-mv-10 {
|
||
width: 83.33%;}
|
||
|
||
.g-mv-9 {
|
||
width: 74.999997%;}
|
||
|
||
.g-mv-8 {
|
||
width: 66.66666664%;}
|
||
|
||
.g-mv-7 {
|
||
width: 58.333%;}
|
||
|
||
.g-mv-6 {
|
||
width: 50%;}
|
||
|
||
.g-mv-5 {
|
||
width: 41.6665%;}
|
||
|
||
.g-mv-4 {
|
||
width: 33.33%;}
|
||
|
||
.g-mv-3 {
|
||
width: 24.99%;}
|
||
|
||
.g-mv-2 {
|
||
width: 16.66666%;}
|
||
|
||
.g-mv-1 {
|
||
width: 8.33%;}
|
||
|
||
/*********************************************************************************************
|
||
2. Grid 640px+ <20><>𧢲<EFBFBD><F0A7A2B2>帖撘<E5B896>
|
||
*********************************************************************************************/
|
||
@media only screen and (min-width: 640px) {
|
||
|
||
.g-ml-12 {
|
||
width: 100%;}
|
||
|
||
.g-ml-11 {
|
||
width: 91.666663%;}
|
||
|
||
.g-ml-10 {
|
||
width: 83.33%;}
|
||
|
||
.g-ml-9 {
|
||
width: 74.999997%;}
|
||
|
||
.g-ml-8 {
|
||
width: 66.66666664%;}
|
||
|
||
.g-ml-7 {
|
||
width: 58.333%;}
|
||
|
||
.g-ml-6 {
|
||
width: 50%;}
|
||
|
||
.g-ml-5 {
|
||
width: 41.6665%;}
|
||
|
||
.g-ml-4 {
|
||
width: 33.33%;}
|
||
|
||
.g-ml-3 {
|
||
width: 24.99%;}
|
||
|
||
.g-ml-2 {
|
||
width: 16.66666%;}
|
||
|
||
.g-ml-1 {
|
||
width: 8.33%;}
|
||
|
||
}
|
||
|
||
/*********************************************************************************************
|
||
3. Grid 767px+ 撟單踎<E596AE>凒撘<E58792>
|
||
*********************************************************************************************/
|
||
|
||
@media only screen and (min-width: 767px) {
|
||
.g-tv-12 {
|
||
width: 100%;}
|
||
|
||
.g-tv-11 {
|
||
width: 91.666663%;}
|
||
|
||
.g-tv-10 {
|
||
width: 83.33%;}
|
||
|
||
.g-tv-9 {
|
||
width: 74.999997%;}
|
||
|
||
.g-tv-8 {
|
||
width: 66.66666664%;}
|
||
|
||
.g-tv-7 {
|
||
width: 58.333%;}
|
||
|
||
.g-tv-6 {
|
||
width: 50%;}
|
||
|
||
.g-tv-5 {
|
||
width: 41.6665%;}
|
||
|
||
.g-tv-4 {
|
||
width: 33.33%;}
|
||
|
||
.g-tv-3 {
|
||
width: 24.99%;}
|
||
|
||
.g-tv-2 {
|
||
width: 16.66666%;}
|
||
|
||
.g-tv-1 {
|
||
width: 8.33%;}
|
||
|
||
}
|
||
|
||
/*********************************************************************************************
|
||
4. Grid 960px+ 撟單踎<E596AE>凒撘𧶏<E69298><F0A7B68F><EFBFBD>芸<EFBFBD><E88AB8>蝙<EFBFBD>鍂
|
||
*********************************************************************************************/
|
||
|
||
@media only screen and (min-width: 960px) {
|
||
.g-12 {
|
||
width: 100%;}
|
||
|
||
.g-11 {
|
||
width: 91.666663%;}
|
||
|
||
.g-10 {
|
||
width: 83.33%;}
|
||
|
||
.g-9 {
|
||
width: 74.999997%;}
|
||
|
||
.g-8 {
|
||
width: 66.66666664%;}
|
||
|
||
.g-7 {
|
||
width: 58.333%;}
|
||
|
||
.g-6 {
|
||
width: 50%;}
|
||
|
||
.g-5 {
|
||
width: 41.6665%;}
|
||
|
||
.g-4 {
|
||
width: 33.33%;}
|
||
|
||
.g-3 {
|
||
width: 24.99%;}
|
||
|
||
.g-2 {
|
||
width: 16.66666%;}
|
||
|
||
.g-1 {
|
||
width: 8.33%;}
|
||
}
|
||
|
||
/*********************************************************************************************
|
||
5. Grid 1024px+ 撟單踎璈<E8B88E>
|
||
*********************************************************************************************/
|
||
|
||
@media only screen and (min-width: 1024px) {
|
||
.g-tl-12 {
|
||
width: 100%;}
|
||
|
||
.g-tl-11 {
|
||
width: 91.666663%;}
|
||
|
||
.g-tl-10 {
|
||
width: 83.33%;}
|
||
|
||
.g-tl-9 {
|
||
width: 74.999997%;}
|
||
|
||
.g-tl-8 {
|
||
width: 66.66666664%;}
|
||
|
||
.g-tl-7 {
|
||
width: 58.333%;}
|
||
|
||
.g-tl-6 {
|
||
width: 50%;}
|
||
|
||
.g-tl-5 {
|
||
width: 41.6665%;}
|
||
|
||
.g-tl-4 {
|
||
width: 33.33%;}
|
||
|
||
.g-tl-3 {
|
||
width: 24.99%;}
|
||
|
||
.g-tl-2 {
|
||
width: 16.66666%;}
|
||
|
||
.g-tl-1 {
|
||
width: 8.33%;}
|
||
|
||
}
|
||
|
||
/*********************************************************************************************
|
||
6. Grid 1200px+
|
||
*********************************************************************************************/
|
||
|
||
@media only screen and (min-width: 1200px) {
|
||
|
||
.g-d-12 {
|
||
width: 100%;}
|
||
|
||
.g-d-11 {
|
||
width: 91.666663%;}
|
||
|
||
.g-d-10 {
|
||
width: 83.33%;}
|
||
|
||
.g-d-9 {
|
||
width: 74.999997%;}
|
||
|
||
.g-d-8 {
|
||
width: 66.66666664%;}
|
||
|
||
.g-d-7 {
|
||
width: 58.333%;}
|
||
|
||
.g-d-6 {
|
||
width: 50%;}
|
||
|
||
.g-d-5 {
|
||
width: 41.6665%;}
|
||
|
||
.g-d-4 {
|
||
width: 33.33%;}
|
||
|
||
.g-d-3 {
|
||
width: 24.99%;}
|
||
|
||
.g-d-2 {
|
||
width: 16.66666%;}
|
||
|
||
.g-d-1 {
|
||
width: 8.33%;}
|
||
|
||
}
|
||
|
||
/*********************************************************************************************
|
||
6. Helper classes
|
||
*********************************************************************************************/
|
||
img.rwd{
|
||
max-width: 100%;
|
||
height: auto;} |