├── grid.css ├── README.md ├── 1-line-css-framework-2.html ├── 1-line-css-framework-3.html └── 1-line-css-framework-1.html /grid.css: -------------------------------------------------------------------------------- 1 | .dp50{float:left;width:50%} 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 1-line-CSS-Framework 2 | One Line CSS Framework 3 | 4 | Only CSS you need is this: 5 | 6 | `.dp50 {width:50%; float:left;}` 7 | 8 | Every column can be divided by two, becoming half column or 50% column. 9 | 10 | One column can become 2 (50%) column or 100% = 50% + 50%. 11 | 12 | So we can make 2,4,8,16, … layout system. 13 | 14 | Demos: 15 | 16 | [Demo1](https://vladocar.github.io/1-line-CSS-Framework/1-line-css-framework-1.html) 17 | 18 | [Demo2](https://vladocar.github.io/1-line-CSS-Framework/1-line-css-framework-2.html) 19 | 20 | [Demo3](https://vladocar.github.io/1-line-CSS-Framework/1-line-css-framework-3.html) 21 | 22 | [You can find more on my blog >>](http://www.vcarrer.com/2018/03/1-line-css-framework.html) 23 | 24 | -------------------------------------------------------------------------------- /1-line-css-framework-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 1 line CSS Framework 8 | 15 | 16 | 17 | 18 |
19 | 20 |
50%
21 |
50%
22 | 23 | 24 |
25 |
50%
26 |
50%
27 |
28 | 29 |
30 |
50%
31 |
50%
32 |
33 | 34 | 35 |
36 |
37 |
50%
38 |
50%
39 |
40 |
41 |
50%
42 |
50%
43 |
44 |
45 |
46 |
47 |
50%
48 |
50%
49 |
50 |
51 |
50%
52 |
50%
53 |
54 |
55 | 56 | 57 |
58 |
59 |
60 |
50%
61 |
50%
62 |
63 |
64 |
50%
65 |
50%
66 |
67 |
68 |
69 |
70 |
50%
71 |
50%
72 |
73 |
74 |
50%
75 |
50%
76 |
77 |
78 |
79 |
80 |
81 |
82 |
50%
83 |
50%
84 |
85 |
86 |
50%
87 |
50%
88 |
89 |
90 |
91 |
92 |
50%
93 |
50%
94 |
95 |
96 |
50%
97 |
50%
98 |
99 |
100 |
101 | 102 |
103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /1-line-css-framework-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 1 line CSS Framework 8 | 15 | 16 | 17 | 18 |
19 |

Lorem ipsum dolor sit amet

20 | 21 |
22 |

Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.

23 |
24 |
25 | 26 |

Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus. Cras iaculis enim nec nisl varius ut vulputate ligula.

27 |
28 | 29 |
30 | 31 | 32 |
33 |

Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus. Cras iaculis enim nec nisl varius ut vulputate ligula dignissim.

34 |

Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus. Cras iaculis enim nec nisl varius ut vulputate ligula dignissim.

35 |
36 |
37 |

Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus. Cras iaculis enim nec nisl varius ut vulputate ligula dignissim.

38 |

Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus. Cras iaculis enim nec nisl varius ut vulputate ligula dignissim.

39 |
40 |
41 |

Cras sit amet ligula dolor, a eleifend sapien. Aliquam erat volutpat.

42 | 43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /1-line-css-framework-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 1 line CSS Framework 8 | 15 | 16 | 17 | 18 |
19 | 20 | 21 |
1
22 |
2
23 |
24 | 25 | 26 |
27 |
1
28 |
2
29 |
30 |
31 |
3
32 |
4
33 |
34 |
35 | 36 | 37 |
38 |
39 |
1
40 |
2
41 |
42 |
43 |
3
44 |
4
45 |
46 |
47 |
48 |
49 |
5
50 |
6
51 |
52 |
53 |
7
54 |
8
55 |
56 |
57 | 58 |
59 | 60 | 61 | 62 | 63 |
64 |
65 |
66 |
1
67 |
2
68 |
69 |
70 |
3
71 |
4
72 |
73 |
74 |
75 |
76 |
5
77 |
6
78 |
79 |
80 |
7
81 |
8
82 |
83 |
84 |
85 |
86 |
87 |
88 |
9
89 |
10
90 |
91 |
92 |
11
93 |
12
94 |
95 |
96 |
97 |
98 |
13
99 |
14
100 |
101 |
102 |
15
103 |
16
104 |
105 |
106 |
107 |
108 | 109 | 110 |
1
111 | 112 |
113 |
2
114 |
3
115 |
116 |
117 | 118 | 119 | 120 |
121 |
1
122 |
2
123 |
124 | 125 |
3
126 |
127 | 128 |
129 | 130 | 131 | 132 | --------------------------------------------------------------------------------