Change aside with section>section
This commit is contained in:
vladocar
parent
216389d09f
commit
8164a71cd6
16
README.md
16
README.md
|
|
@ -66,19 +66,19 @@ By default are 8px, use --rc: 0px; if you don't like round corners.
|
|||
|
||||
##### How you can use the infinity flex grid?
|
||||
|
||||
Use the HTML5 tags selection and aside to make flex grid.
|
||||
Use the HTML5 tags section and nested section to make flex grid.
|
||||
|
||||
```html
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside> 2 </aside>
|
||||
<aside> 3 </aside>
|
||||
<section> 1 </section>
|
||||
<section> 2 </section>
|
||||
<section> 3 </section>
|
||||
</section>
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside> 2 </aside>
|
||||
<aside> 3 </aside>
|
||||
<aside> 4 </aside>
|
||||
<section> 1 </section>
|
||||
<section> 2 </section>
|
||||
<section> 3 </section>
|
||||
<section> 4 </section>
|
||||
</section>
|
||||
```
|
||||
Demo: https://vladocar.github.io/Basic.css/grid.html
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/* Basic.css */
|
||||
|
||||
* {box-sizing: border-box}
|
||||
|
||||
:root{
|
||||
--sans:1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
|
||||
--mono:'Courier New', Courier, 'Ubuntu Mono', 'Liberation Mono', monospace;
|
||||
|
|
@ -73,7 +74,7 @@ table {border-collapse: collapse; border-spacing: 0; margin:1em 0}
|
|||
|
||||
th, td {text-align: left; vertical-align: top;border: 1px solid; padding: 0.4em}
|
||||
|
||||
thead,tfoot{background: var(--c2)}
|
||||
thead,tfoot {background: var(--c2)}
|
||||
|
||||
/* Rounded Corners*/
|
||||
|
||||
|
|
@ -82,20 +83,20 @@ pre,code,input,select,textarea,button,img {border-radius: var(--rc)}
|
|||
|
||||
/* Forms */
|
||||
|
||||
input, select, textarea{font-size: 1em; color:var(--c4); background: var(--c2); border: 0; padding: 0.6em}
|
||||
|
||||
button, input[type=submit], input[type=reset], input[type="button"] {font-size: 1em; display: inline-block; color: var(--c5); background: var(--c1); border: 0; margin: 0 4px; padding: 0.6em; cursor: pointer; text-align: center}
|
||||
input, select, textarea {font-size: 1em; color:var(--c4); background: var(--c2); border: 0; padding: 0.6em}
|
||||
|
||||
button, input [type=submit], input[type=reset], input[type="button"] {font-size: 1em; display: inline-block; color: var(--c5); background: var(--c1); border: 0; margin: 0 4px; padding: 0.6em; cursor: pointer; text-align: center}
|
||||
|
||||
button:hover, button:focus, input:hover, textarea:hover, select:hover {opacity: 0.8}
|
||||
|
||||
/* Infinite Grid */
|
||||
|
||||
section{display: flex; flex-flow: row wrap}
|
||||
section {display: flex; flex-flow: row wrap}
|
||||
|
||||
[style*="--c:"], aside, article {flex:var(--c,1); margin:var(--m1)}
|
||||
[style*="--c:"], section>section, aside, article {flex:var(--c,1); margin:var(--m1)}
|
||||
|
||||
/* Cards */
|
||||
|
||||
article {background: var(--c2); border-radius: var(--rc); padding: 1em; box-shadow: 0px 1px 0px rgba(0,0,0,0.3)}
|
||||
|
||||
[style*="--c:"]:first-child, aside:first-child, article:first-child {margin-left:0}
|
||||
[style*="--c:"]:first-child, section>section:first-child, article:first-child {margin-left:0}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
*{box-sizing:border-box}:root{--sans:1em/1.6 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Fira Sans,sans-serif;--mono:'Courier New',Courier,'Ubuntu Mono','Liberation Mono',monospace;--c1:#0074d9;--c2:#eee;--c3:#fff;--c4:#000;--c5:#fff;--m1:8px;--rc:8px}@media (prefers-color-scheme:dark){:root{--c2:#333;--c3:#1e1f20;--c4:#fff}}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;font:var(--sans);font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;background-color:var(--c3);color:var(--c4)}iframe,img{border:none;max-width:100%}a{color:var(--c1);text-decoration:none}a:hover{color:var(--c1);text-decoration:underline}pre{font:1em/1.6 var(--mono);background:var(--c2);padding:1em;overflow:auto}code{font:1em/1.6 var(--mono)}blockquote{border-left:5px solid var(--c2);padding:1em 1.5em;margin:0}hr{border:0;border-bottom:1px solid var(--c4)}h1,h2,h3,h4,h5,h6{margin:.6em 0;font-weight:400}h1{font-size:2.625em;line-height:1.2}h2{font-size:1.625em;line-height:1.2}h3{font-size:1.3125em;line-height:1.24}h4{font-size:1.1875em;line-height:1.23}h5,h6{font-size:1em;font-weight:700}table{border-collapse:collapse;border-spacing:0;margin:1em 0}td,th{text-align:left;vertical-align:top;border:1px solid;padding:.4em}tfoot,thead{background:var(--c2)}button,code,img,input,pre,select,textarea{border-radius:var(--rc)}input,select,textarea{font-size:1em;color:var(--c4);background:var(--c2);border:0;padding:.6em}button,input[type=button],input[type=reset],input[type=submit]{font-size:1em;display:inline-block;color:var(--c5);background:var(--c1);border:0;margin:0 4px;padding:.6em;cursor:pointer;text-align:center}button:focus,button:hover,input:hover,select:hover,textarea:hover{opacity:.8}section{display:flex;flex-flow:row wrap}[style*="--c:"],article,aside{flex:var(--c,1);margin:var(--m1)}article{background:var(--c2);border-radius:var(--rc);padding:1em;box-shadow:0 1px 0 rgba(0,0,0,.3)}[style*="--c:"]:first-child,article:first-child,aside:first-child{margin-left:0}
|
||||
*{box-sizing:border-box}:root{--sans:1em/1.6 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Fira Sans,sans-serif;--mono:'Courier New',Courier,'Ubuntu Mono','Liberation Mono',monospace;--c1:#0074d9;--c2:#eee;--c3:#fff;--c4:#000;--c5:#fff;--m1:8px;--rc:8px}@media (prefers-color-scheme:dark){:root{--c2:#333;--c3:#1e1f20;--c4:#fff}}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;font:var(--sans);font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;background-color:var(--c3);color:var(--c4)}iframe,img{border:none;max-width:100%}a{color:var(--c1);text-decoration:none}a:hover{color:var(--c1);text-decoration:underline}pre{font:1em/1.6 var(--mono);background:var(--c2);padding:1em;overflow:auto}code{font:1em/1.6 var(--mono)}blockquote{border-left:5px solid var(--c2);padding:1em 1.5em;margin:0}hr{border:0;border-bottom:1px solid var(--c4)}h1,h2,h3,h4,h5,h6{margin:.6em 0;font-weight:400}h1{font-size:2.625em;line-height:1.2}h2{font-size:1.625em;line-height:1.2}h3{font-size:1.3125em;line-height:1.24}h4{font-size:1.1875em;line-height:1.23}h5,h6{font-size:1em;font-weight:700}table{border-collapse:collapse;border-spacing:0;margin:1em 0}td,th{text-align:left;vertical-align:top;border:1px solid;padding:.4em}tfoot,thead{background:var(--c2)}button,code,img,input,pre,select,textarea{border-radius:var(--rc)}input,select,textarea{font-size:1em;color:var(--c4);background:var(--c2);border:0;padding:.6em}button,input [type=submit],input[type=button],input[type=reset]{font-size:1em;display:inline-block;color:var(--c5);background:var(--c1);border:0;margin:0 4px;padding:.6em;cursor:pointer;text-align:center}button:focus,button:hover,input:hover,select:hover,textarea:hover{opacity:.8}section{display:flex;flex-flow:row wrap}[style*="--c:"],article,aside,section>section{flex:var(--c,1);margin:var(--m1)}article{background:var(--c2);border-radius:var(--rc);padding:1em;box-shadow:0 1px 0 rgba(0,0,0,.3)}[style*="--c:"]:first-child,article:first-child,section>section:first-child{margin-left:0}
|
||||
60
grid.html
60
grid.html
|
|
@ -17,7 +17,7 @@
|
|||
text-align: left;
|
||||
padding: 0 20px;
|
||||
}
|
||||
[style*="--c:"],aside{
|
||||
[style*="--c:"],section>section{
|
||||
color: #fff;
|
||||
background-color: #00bbeb;
|
||||
padding: 15px;
|
||||
|
|
@ -32,48 +32,48 @@
|
|||
<main>
|
||||
<h1>Simple Grid</h1>
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside> 2 </aside>
|
||||
<aside> 3 </aside>
|
||||
<section> 1 </section>
|
||||
<section> 2 </section>
|
||||
<section> 3 </section>
|
||||
</section>
|
||||
<section>
|
||||
<aside>1</aside>
|
||||
<aside>2</aside>
|
||||
<aside>3</aside>
|
||||
<aside>4</aside>
|
||||
<section>1</section>
|
||||
<section>2</section>
|
||||
<section>3</section>
|
||||
<section>4</section>
|
||||
</section>
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside> 2 </aside>
|
||||
<aside> 3 </aside>
|
||||
<aside> 4 </aside>
|
||||
<aside> 5 </aside>
|
||||
<section> 1 </section>
|
||||
<section> 2 </section>
|
||||
<section> 3 </section>
|
||||
<section> 4 </section>
|
||||
<section> 5 </section>
|
||||
</section>
|
||||
<h2>Complex grid</h2>
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside> 2 </aside>
|
||||
<aside> 3 </aside>
|
||||
<section> 1 </section>
|
||||
<section> 2 </section>
|
||||
<section> 3 </section>
|
||||
</section>
|
||||
<section>
|
||||
<aside style = "--c:2">Merge the first 2 columns</aside>
|
||||
<aside>2</aside>
|
||||
<aside>3</aside>
|
||||
<aside>4</aside>
|
||||
<section> style = "--c:2">Merge the first 2 columns</section>
|
||||
<section>2</section>
|
||||
<section>3</section>
|
||||
<section>4</section>
|
||||
</section>
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside style = "--c:3"> Merge 3 columns </aside>
|
||||
<aside> 3 </aside>
|
||||
<section> 1 </section>
|
||||
<section> style = "--c:3"> Merge 3 columns </section>
|
||||
<section> 3 </section>
|
||||
</section>
|
||||
<section>
|
||||
<aside>1</aside>
|
||||
<aside style = "--c:2">Merge 2</aside>
|
||||
<aside style = "--c:3">Merge 3</aside>
|
||||
<aside>4</aside>
|
||||
<aside>5</aside>
|
||||
<aside>6</aside>
|
||||
<aside>7</aside>
|
||||
<section>1</section>
|
||||
<section> style = "--c:2">Merge 2</section>
|
||||
<section> style = "--c:3">Merge 3</section>
|
||||
<section>4</section>
|
||||
<section>5</section>
|
||||
<section>6</section>
|
||||
<section>7</section>
|
||||
</section>
|
||||
<section>
|
||||
<div style = "--c:1"> 1 </div>
|
||||
|
|
|
|||
22
grid.md
22
grid.md
|
|
@ -9,21 +9,21 @@ The simple grid is based on this code:
|
|||
|
||||
```css
|
||||
section{display: flex; flex-flow: row wrap}
|
||||
aside {flex:1}
|
||||
section {flex:1}
|
||||
```
|
||||
And the HTML looks like this:
|
||||
|
||||
```html
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside> 2 </aside>
|
||||
<aside> 3 </aside>
|
||||
<section> 1 </section>
|
||||
<section> 2 </section>
|
||||
<section> 3 </section>
|
||||
</section>
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside> 2 </aside>
|
||||
<aside> 3 </aside>
|
||||
<aside> 4 </aside>
|
||||
<section> 1 </section>
|
||||
<section> 2 </section>
|
||||
<section> 3 </section>
|
||||
<section> 4 </section>
|
||||
</section>
|
||||
```
|
||||
You can add as many columns as you like.
|
||||
|
|
@ -46,9 +46,9 @@ And is used like this:
|
|||
|
||||
```html
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside style = "--c:3"> Merge 3 columns </aside>
|
||||
<aside> 3 </aside>
|
||||
<section> 1 </section>
|
||||
<section style = "--c:3"> Merge 3 columns </section>
|
||||
<section> 3 </section>
|
||||
</section>
|
||||
```
|
||||
|
||||
|
|
|
|||
30
index.html
30
index.html
|
|
@ -17,7 +17,7 @@
|
|||
padding: 0 20px;
|
||||
}
|
||||
|
||||
aside {
|
||||
section>section {
|
||||
color: #fff;
|
||||
background-color: var(--c1);
|
||||
padding: 15px;
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
@media (max-width: 481px) {
|
||||
main,footer {width: 98%}
|
||||
aside,article {flex:none; width:100%; margin-left: 0;}
|
||||
section,article {flex:none; width:100%; margin-left: 0;}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
<article>
|
||||
<img src="img/grid.svg" />
|
||||
<h4>Flex Grid without classes</h4>
|
||||
<p>By putting <b>aside</b> tag inside <b>selection</b> tag container you could make infinite flex grid.
|
||||
<p>By putting <b>section</b> tag inside <b>selection</b> tag container you could make infinite flex grid.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
|
|
@ -170,22 +170,22 @@ color:#111;
|
|||
|
||||
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside> 2 </aside>
|
||||
<aside> 3 </aside>
|
||||
<section> 1 </section>
|
||||
<section> 2 </section>
|
||||
<section> 3 </section>
|
||||
</section>
|
||||
<section>
|
||||
<aside>1</aside>
|
||||
<aside>2</aside>
|
||||
<aside>3</aside>
|
||||
<aside>4</aside>
|
||||
<section>1</section>
|
||||
<section>2</section>
|
||||
<section>3</section>
|
||||
<section>4</section>
|
||||
</section>
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside> 2 </aside>
|
||||
<aside> 3 </aside>
|
||||
<aside> 4 </aside>
|
||||
<aside> 5 </aside>
|
||||
<section> 1 </section>
|
||||
<section> 2 </section>
|
||||
<section> 3 </section>
|
||||
<section> 4 </section>
|
||||
<section> 5 </section>
|
||||
</section>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@vladocar/basic.css",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.1",
|
||||
"description": "Classless CSS Starter File",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue