Skip to content

Commit 9ff4ef8

Browse files
mr-karanmr-karan
committed
Fix minor issues in grid
1 parent 09e5766 commit 9ff4ef8

11 files changed

+157
-87
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -72,3 +72,5 @@ typings/
7272

7373
# Serverless directories
7474
.serverless
75+
test/*
76+
test.html

‎README.md

+5-2
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,12 @@ After installation, you can import the CSS file into your project using this sni
3636
import 'flexit/dist/flexit.css'
3737
```
3838

39-
### CDN
39+
### Manual Method
4040

41-
[https://cdnjs.com/libraries/flexit](https://cdnjs.com/libraries/flexit)
41+
You can download the CSS file from [here](https://github.com/mr-karan/flexit/blob/master/dist/flexit.css) and use it in your HTML as
42+
```html
43+
<link rel="stylesheet" href="flexbit.css">
44+
```
4245

4346

4447
## Clean Syntax

‎dist/flexit.css

+19-14
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/flexit.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/flexit.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/flexit.min.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+75-32
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<link href="https://fonts.googleapis.com/css?family=Dosis|Raleway" rel="stylesheet">
1111
<link rel="stylesheet" href="static/css/main.css">
1212
<link rel="stylesheet" href="static/css/prism.css" />
13-
<link rel='shortcut icon' type='image/x-icon' href='static/images/favicon.ico' />
13+
<link rel='shortcut icon' type='image/x-icon' href='../static/images/favicon.ico' />
1414
</head>
1515

1616
<body>
@@ -19,9 +19,11 @@
1919
<div class="four columns">
2020
<img class="logo-img" src="static/images/logo.png" />
2121
</div>
22-
<div class="six columns">
22+
<div class="eight columns center">
2323
<h1>Flexit</h1>
2424
<p class="sub-header">Simple, clean and no fuss flexbox based grid.</p>
25+
<!-- Place this tag where you want the button to render. -->
26+
<a class="github-button" href="https://github.com/mr-karan/flexit" data-icon="octicon-star" aria-label="Visit Flexit on GitHub">GitHub</a>
2527
</div>
2628
<!-- <div class="twelve columns">
2729
<h1>Flexit</h1>
@@ -35,12 +37,12 @@ <h1>Get started in no time</h1>
3537

3638
<section>
3739
<div class="row">
38-
<div class="one columns">
40+
<div class="two columns">
3941
<div class="box-column">
4042
<p>content</p>
4143
</div>
4244
</div>
43-
<div class="five columns">
45+
<div class="four columns">
4446
<div class="box-column">
4547
<p>content</p>
4648
</div>
@@ -53,17 +55,55 @@ <h1>Get started in no time</h1>
5355
</div>
5456
</section>
5557
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
56-
<pre><code class="language-html" data-lang="html"><span class="div-highlight">&lt;section</span> <span class="div-highlight">class=</span><span class="name-highlight">"row"</span><span class="div-highlight">&gt;</span>
57-
<span class="div-highlight">&lt;div</span> <span class="class-highlight">class=</span><span class="name-highlight">"one column"</span><span class="div-highlight">&gt;</span>
58-
<span class="div-highlight">&lt;p</span><span class="div-highlight">&gt;</span>Section<span class="div-highlight">&lt;/p&gt;</span>
59-
<span class="div-highlight">&lt;div</span> <span class="class-highlight">class=</span><span class="name-highlight">"five columns"</span><span class="div-highlight">&gt;</span>
60-
<span class="div-highlight">&lt;p</span><span class="div-highlight">&gt;</span>Section<span class="div-highlight">&lt;/p&gt;</span>
61-
<span class="div-highlight">&lt;div</span> <span class="class-highlight">class=</span><span class="name-highlight">"six columns"</span><span class="div-highlight">&gt;</span>
62-
<span class="div-highlight">&lt;p</span><span class="div-highlight">&gt;</span>Section<span class="div-highlight">&lt;/p&gt;</span>
63-
<span class="div-highlight">&lt;/div&gt;</span>
64-
<span class="div-highlight">&lt;/section&gt;</span></code></pre>
58+
<pre><code class="language-html" data-lang="html">
59+
&lt;div class=&quot;container&quot;&gt;
60+
&lt;section class=&quot;row&quot;&gt;
61+
&lt;div class=&quot;one column&quot;&gt;
62+
&lt;p&gt;Section&lt;/p&gt;
63+
&lt;div class=&quot;five columns&quot;&gt;
64+
&lt;p&gt;Section&lt;/p&gt;
65+
&lt;div class=&quot;six columns&quot;&gt;
66+
&lt;p&gt;Section&lt;/p&gt;
67+
&lt;/div&gt;
68+
&lt;/section&gt;
69+
&lt;/div&gt;
70+
</code></pre>
6571
<!-- ————————————————————————————————————————————————————— -->
6672
</section>
73+
<section class="features">
74+
<h1>The Container</h1>
75+
<p>Flexit container has a <code>max-width</code> of 960px and it shrinks relatively with the screen size. The container has a <code>padding</code> of <code>0px 20px</code> so it doesn't touch the edges on smaller screens.</p>
76+
77+
<section>
78+
<div class="row">
79+
<div class="six columns">
80+
<div class="box-column">
81+
<p>content</p>
82+
</div>
83+
</div>
84+
<div class="six columns">
85+
<div class="box-column">
86+
<p>content</p>
87+
</div>
88+
</div>
89+
</div>
90+
</section>
91+
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
92+
<pre><code class="language-html" data-lang="html">
93+
&lt;section&gt;
94+
&lt;div class=&quot;container&quot;&gt;
95+
&lt;div class=&quot;row&quot;&gt;
96+
&lt;div class=&quot;six columns&quot;&gt;
97+
&lt;p&gt;content&lt;/p&gt;
98+
&lt;/div&gt;
99+
&lt;div class=&quot;six columns&quot;&gt;
100+
&lt;p&gt;content&lt;/p&gt;
101+
&lt;/div&gt;
102+
&lt;/div&gt;
103+
&lt;/div&gt;
104+
&lt;/section&gt;
105+
</code></pre>
106+
<!-- ————————————————————————————————————————————————————— -->
67107
<section class="features">
68108
<h1>The Grid</h1>
69109
<div class="row">
@@ -167,17 +207,19 @@ <h1>Nested Grids</h1>
167207
</section>
168208
<pre>
169209
<code class="language-html">
170-
&lt;div class=&quot;row&quot;&gt;
171-
&lt;div class=&quot;four columns&quot;&gt;
172-
&lt;div class=&quot;row&quot;&gt;
173-
&lt;div class=&quot;columns&quot;&gt;
174-
&lt;div class=&quot;box-column&quot;&gt;
175-
&lt;p&gt;content&lt;/p&gt;
210+
&lt;div class=&quot;container&quot;&gt;
211+
&lt;div class=&quot;row&quot;&gt;
212+
&lt;div class=&quot;four columns&quot;&gt;
213+
&lt;div class=&quot;row&quot;&gt;
214+
&lt;div class=&quot;columns&quot;&gt;
215+
&lt;div class=&quot;box-column&quot;&gt;
216+
&lt;p&gt;content&lt;/p&gt;
217+
&lt;/div&gt;
176218
&lt;/div&gt;
177-
&lt;/div&gt;
178-
&lt;div class=&quot;columns&quot;&gt;
179-
&lt;div class=&quot;box-column&quot;&gt;
180-
&lt;p&gt;content&lt;/p&gt;
219+
&lt;div class=&quot;columns&quot;&gt;
220+
&lt;div class=&quot;box-column&quot;&gt;
221+
&lt;p&gt;content&lt;/p&gt;
222+
&lt;/div&gt;
181223
&lt;/div&gt;
182224
&lt;/div&gt;
183225
&lt;/div&gt;
@@ -191,22 +233,22 @@ <h1>Auto width Columns</h1>
191233
</p>
192234
<section>
193235
<div class="row">
194-
<div class="columns">
236+
<div class="column">
195237
<div class="box-column">
196238
<p>auto</p>
197239
</div>
198240
</div>
199-
<div class="columns">
241+
<div class="column">
200242
<div class="box-column">
201243
<p>auto</p>
202244
</div>
203245
</div>
204-
<div class="columns">
246+
<div class="column">
205247
<div class="box-column">
206248
<p>auto</p>
207249
</div>
208250
</div>
209-
<div class="columns">
251+
<div class="column">
210252
<div class="box-column">
211253
<p>auto</p>
212254
</div>
@@ -216,22 +258,22 @@ <h1>Auto width Columns</h1>
216258
<pre>
217259
<code class="language-html">
218260
&lt;div class=&quot;row&quot;&gt;
219-
&lt;div class=&quot;columns&quot;&gt;
261+
&lt;div class=&quot;column&quot;&gt;
220262
&lt;div class=&quot;box-column&quot;&gt;
221263
&lt;p&gt;auto&lt;/p&gt;
222264
&lt;/div&gt;
223265
&lt;/div&gt;
224-
&lt;div class=&quot;columns&quot;&gt;
266+
&lt;div class=&quot;column&quot;&gt;
225267
&lt;div class=&quot;box-column&quot;&gt;
226268
&lt;p&gt;auto&lt;/p&gt;
227269
&lt;/div&gt;
228270
&lt;/div&gt;
229-
&lt;div class=&quot;columns&quot;&gt;
271+
&lt;div class=&quot;column&quot;&gt;
230272
&lt;div class=&quot;box-column&quot;&gt;
231273
&lt;p&gt;auto&lt;/p&gt;
232274
&lt;/div&gt;
233275
&lt;/div&gt;
234-
&lt;div class=&quot;columns&quot;&gt;
276+
&lt;div class=&quot;column&quot;&gt;
235277
&lt;div class=&quot;box-column&quot;&gt;
236278
&lt;p&gt;auto&lt;/p&gt;
237279
&lt;/div&gt;
@@ -460,7 +502,8 @@ <h1>No hidden surprises</h1>
460502
}
461503
</style>
462504
<!-- Github Ribbon End-->
463-
505+
<!-- Place this tag in your head or just before your close body tag. -->
506+
<script async defer src="https://buttons.github.io/buttons.js"></script>
464507
<script src="static/js/prism.js"></script>
465508
</body>
466509

0 commit comments

Comments
 (0)