299 lines
4.8 KiB
CSS
299 lines
4.8 KiB
CSS
|
/*********************************************************************************************
|
|||
|
|
|||
|
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 -10px;}
|
|||
|
|
|||
|
/*********************************************************************************************
|
|||
|
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+ <EFBFBD><EFBFBD>𧢲<EFBFBD><EFBFBD>帖撘<EFBFBD>
|
|||
|
*********************************************************************************************/
|
|||
|
@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+ 撟單踎<EFBFBD>凒撘<EFBFBD>
|
|||
|
*********************************************************************************************/
|
|||
|
|
|||
|
@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+ 撟單踎<EFBFBD>凒撘𧶏<EFBFBD><EFBFBD><EFBFBD>芸<EFBFBD><EFBFBD>蝙<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+ 撟單踎璈<EFBFBD>
|
|||
|
*********************************************************************************************/
|
|||
|
|
|||
|
@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;}
|