Robot
/
Basic.css
mirror of https://github.com/vladocar/Basic.css.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change aside with section>section

This commit is contained in:
vladocar 2020-06-01 14:25:56 +02:00
parent 216389d09f
commit 8164a71cd6
7 changed files with 74 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@ -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? ##### 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 ```html
<section> <section>
<aside> 1 </aside> <section> 1 </section>
<aside> 2 </aside> <section> 2 </section>
<aside> 3 </aside> <section> 3 </section>
</section> </section>
<section> <section>
<aside> 1 </aside> <section> 1 </section>
<aside> 2 </aside> <section> 2 </section>
<aside> 3 </aside> <section> 3 </section>
<aside> 4 </aside> <section> 4 </section>
</section> </section>
``` ```
Demo: https://vladocar.github.io/Basic.css/grid.html Demo: https://vladocar.github.io/Basic.css/grid.html

15
css/basic.css
View File

@ -1,6 +1,7 @@
/* Basic.css */ /* Basic.css */
* {box-sizing: border-box} * {box-sizing: border-box}
:root{ :root{
--sans:1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif; --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; --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} 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*/ /* Rounded Corners*/
@ -82,20 +83,20 @@ pre,code,input,select,textarea,button,img {border-radius: var(--rc)}
/* Forms */ /* Forms */
input, select, textarea{font-size: 1em; color:var(--c4); background: var(--c2); border: 0; padding: 0.6em} 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, 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} button:hover, button:focus, input:hover, textarea:hover, select:hover {opacity: 0.8}
/* Infinite Grid */ /* 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 */ /* Cards */
article {background: var(--c2); border-radius: var(--rc); padding: 1em; box-shadow: 0px 1px 0px rgba(0,0,0,0.3)} 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}

2
css/basic.min.css vendored
View File

@ -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
View File

@ -17,7 +17,7 @@
text-align: left; text-align: left;
padding: 0 20px; padding: 0 20px;
} }
[style*="--c:"],aside{ [style*="--c:"],section>section{
color: #fff; color: #fff;
background-color: #00bbeb; background-color: #00bbeb;
padding: 15px; padding: 15px;
@ -32,48 +32,48 @@
<main> <main>
<h1>Simple Grid</h1> <h1>Simple Grid</h1>
<section> <section>
<aside> 1 </aside> <section> 1 </section>
<aside> 2 </aside> <section> 2 </section>
<aside> 3 </aside> <section> 3 </section>
</section> </section>
<section> <section>
<aside>1</aside> <section>1</section>
<aside>2</aside> <section>2</section>
<aside>3</aside> <section>3</section>
<aside>4</aside> <section>4</section>
</section> </section>
<section> <section>
<aside> 1 </aside> <section> 1 </section>
<aside> 2 </aside> <section> 2 </section>
<aside> 3 </aside> <section> 3 </section>
<aside> 4 </aside> <section> 4 </section>
<aside> 5 </aside> <section> 5 </section>
</section> </section>
<h2>Complex grid</h2> <h2>Complex grid</h2>
<section> <section>
<aside> 1 </aside> <section> 1 </section>
<aside> 2 </aside> <section> 2 </section>
<aside> 3 </aside> <section> 3 </section>
</section> </section>
<section> <section>
<aside style = "--c:2">Merge the first 2 columns</aside> <section> style = "--c:2">Merge the first 2 columns</section>
<aside>2</aside> <section>2</section>
<aside>3</aside> <section>3</section>
<aside>4</aside> <section>4</section>
</section> </section>
<section> <section>
<aside> 1 </aside> <section> 1 </section>
<aside style = "--c:3"> Merge 3 columns </aside> <section> style = "--c:3"> Merge 3 columns </section>
<aside> 3 </aside> <section> 3 </section>
</section> </section>
<section> <section>
<aside>1</aside> <section>1</section>
<aside style = "--c:2">Merge 2</aside> <section> style = "--c:2">Merge 2</section>
<aside style = "--c:3">Merge 3</aside> <section> style = "--c:3">Merge 3</section>
<aside>4</aside> <section>4</section>
<aside>5</aside> <section>5</section>
<aside>6</aside> <section>6</section>
<aside>7</aside> <section>7</section>
</section> </section>
<section> <section>
<div style = "--c:1"> 1 </div> <div style = "--c:1"> 1 </div>

22
grid.md
View File

@ -9,21 +9,21 @@ The simple grid is based on this code:
```css ```css
section{display: flex; flex-flow: row wrap} section{display: flex; flex-flow: row wrap}
aside {flex:1} section {flex:1}
``` ```
And the HTML looks like this: And the HTML looks like this:
```html ```html
<section> <section>
<aside> 1 </aside> <section> 1 </section>
<aside> 2 </aside> <section> 2 </section>
<aside> 3 </aside> <section> 3 </section>
</section> </section>
<section> <section>
<aside> 1 </aside> <section> 1 </section>
<aside> 2 </aside> <section> 2 </section>
<aside> 3 </aside> <section> 3 </section>
<aside> 4 </aside> <section> 4 </section>
</section> </section>
``` ```
You can add as many columns as you like. You can add as many columns as you like.
@ -46,9 +46,9 @@ And is used like this:
```html ```html
<section> <section>
<aside> 1 </aside> <section> 1 </section>
<aside style = "--c:3"> Merge 3 columns </aside> <section style = "--c:3"> Merge 3 columns </section>
<aside> 3 </aside> <section> 3 </section>
</section> </section>
``` ```

30
index.html
View File

@ -17,7 +17,7 @@
padding: 0 20px; padding: 0 20px;
} }
aside { section>section {
color: #fff; color: #fff;
background-color: var(--c1); background-color: var(--c1);
padding: 15px; padding: 15px;
@ -27,7 +27,7 @@
@media (max-width: 481px) { @media (max-width: 481px) {
main,footer {width: 98%} main,footer {width: 98%}
aside,article {flex:none; width:100%; margin-left: 0;} section,article {flex:none; width:100%; margin-left: 0;}
} }
</style> </style>
@ -64,7 +64,7 @@
<article> <article>
<img src="img/grid.svg" /> <img src="img/grid.svg" />
<h4>Flex Grid without classes</h4> <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> </p>
</article> </article>
<article> <article>
@ -170,22 +170,22 @@ color:#111;
<section> <section>
<aside> 1 </aside> <section> 1 </section>
<aside> 2 </aside> <section> 2 </section>
<aside> 3 </aside> <section> 3 </section>
</section> </section>
<section> <section>
<aside>1</aside> <section>1</section>
<aside>2</aside> <section>2</section>
<aside>3</aside> <section>3</section>
<aside>4</aside> <section>4</section>
</section> </section>
<section> <section>
<aside> 1 </aside> <section> 1 </section>
<aside> 2 </aside> <section> 2 </section>
<aside> 3 </aside> <section> 3 </section>
<aside> 4 </aside> <section> 4 </section>
<aside> 5 </aside> <section> 5 </section>
</section> </section>

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@vladocar/basic.css", "name": "@vladocar/basic.css",
"version": "1.0.0", "version": "1.0.1",
"description": "Classless CSS Starter File", "description": "Classless CSS Starter File",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {