├── main.js
├── images
└── att.png
├── README.md
├── grid.css
├── index.html
└── main.css
/main.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/images/att.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jspruance/rwd-template-poc/master/images/att.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # rwd-template-poc
2 | This is a RWD template layout POC. It does not use any frameworks but featuring a lightweight, homebrew grid system, 'liquid' layout using percentages and ems and responds to various screen sizes via CSS media queries.
3 |
--------------------------------------------------------------------------------
/grid.css:
--------------------------------------------------------------------------------
1 | /* Grid CSS */
2 |
3 | .grid {
4 | width: 100%;
5 | float: left;
6 | }
7 |
8 | .grid [class*="grid-"] {
9 | float: left;
10 | padding: 10px 40px 10px 10px;
11 | position: relative;
12 | }
13 |
14 |
15 | @media only screen and (max-width : 320px) {
16 |
17 | .grid [class*="grid-"] {
18 | width: 100%;
19 | margin: 0 0 5px 0;
20 | padding: 5px 20px 5px 5px;
21 | border: 1px dotted black;
22 | }
23 |
24 | }
25 |
26 | @media only screen and (min-width : 321px) and (max-width : 480px) {
27 |
28 | .grid [class*="grid-"] {
29 | width: 100%;
30 | margin: 0 0 15px 0;
31 | border: 1px dotted blue;
32 | }
33 |
34 | }
35 |
36 | @media only screen and (min-width : 481px) and (max-width : 767px) {
37 |
38 | .grid [class*="grid-"] {
39 | margin: 0 0 20px 0;
40 | border: 1px dotted red;
41 | }
42 |
43 | .grid {
44 | padding: 10px;
45 | }
46 |
47 | .grid [class*="grid-"]:last-child {
48 | padding-right: 0;
49 | }
50 |
51 | .grid-1-4,
52 | .grid-1-5,
53 | .grid-1-6,
54 | .grid-1-8,
55 | .grid-3-4,
56 | .grid-4-5,
57 | .grid-5-6,
58 | .grid-7-8
59 | {
60 | width: 50%;
61 | }
62 |
63 | .grid-1-3 {
64 | width: 33.33%;
65 | }
66 | .grid-1-2 {
67 | width: 50%;
68 | }
69 | .grid-1-1 {
70 | width: 100%;
71 | }
72 | .grid-2-3 {
73 | width: 66.66%;
74 | }
75 |
76 | }
77 |
78 | @media only screen and (min-width: 768px) {
79 |
80 | .grid {
81 | padding: 20px;
82 | }
83 |
84 | .grid [class*="grid-"] {
85 | margin: 0 0 25px 0;
86 | border: 1px dotted lightgreen;
87 | }
88 |
89 | .grid [class*="grid-"]:last-child {
90 | padding-right: 0;
91 | }
92 |
93 | .grid-1-8 {
94 | width: 12.5%;
95 | }
96 | .grid-1-6 {
97 | width: 16.66%;
98 | }
99 | .grid-1-5 {
100 | width: 20%;
101 | }
102 | .grid-1-4 {
103 | width: 25%;
104 | }
105 | .grid-1-3 {
106 | width: 33.33%;
107 | }
108 | .grid-1-2 {
109 | width: 50%;
110 | }
111 | .grid-1-1 {
112 | width: 100%;
113 | }
114 | .grid-2-3 {
115 | width: 66.66%;
116 | }
117 | .grid-3-4 {
118 | width: 75%;
119 | }
120 | .grid-4-5 {
121 | width: 80%;
122 | }
123 | .grid-5-6 {
124 | width: 83.33%;
125 | }
126 | .grid-7-8 {
127 | width: 87.5%;
128 | }
129 |
130 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Responsive Web Design POC
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
23 |
24 |
25 |
26 |
27 |
28 |
36 |
37 |
38 |
40 |
41 |
42 |
45 |
46 |
47 |
48 |
49 |
54 |
55 |
Check Availability
56 |
grid-1-1
57 |
grid-1-3
grid-2-3
58 |
grid-2-3
grid-1-3
59 |
grid-1-4
grid-1-4
grid-1-4
grid-1-4
60 |
grid-1-6
grid-5-6
61 |
grid-1-6
grid-1-6
grid-1-6
grid-1-2
62 |
grid-1-8
grid-1-8
grid-1-8
grid-1-8
63 |
grid-1-8
grid-1-8
grid-1-8
grid-1-8
64 |
65 |