diff --git a/README.md b/README.md index 6f25be8..aa2607d 100644 --- a/README.md +++ b/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
- - - +
1
+
2
+
3
- - - - +
1
+
2
+
3
+
4
``` Demo: https://vladocar.github.io/Basic.css/grid.html diff --git a/css/basic.css b/css/basic.css index 2938f0e..23f9ee3 100644 --- a/css/basic.css +++ b/css/basic.css @@ -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} diff --git a/css/basic.min.css b/css/basic.min.css index c10cff9..943d42c 100644 --- a/css/basic.min.css +++ b/css/basic.min.css @@ -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} \ No newline at end of file +*{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} \ No newline at end of file diff --git a/grid.html b/grid.html index ece5be8..10cfed4 100644 --- a/grid.html +++ b/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 @@

Simple Grid

- - - +
1
+
2
+
3
- - - - +
1
+
2
+
3
+
4
- - - - - +
1
+
2
+
3
+
4
+
5

Complex grid

- - - +
1
+
2
+
3
- - - - +
style = "--c:2">Merge the first 2 columns
+
2
+
3
+
4
- - - +
1
+
style = "--c:3"> Merge 3 columns
+
3
- - - - - - - +
1
+
style = "--c:2">Merge 2
+
style = "--c:3">Merge 3
+
4
+
5
+
6
+
7
1
diff --git a/grid.md b/grid.md index 73c2036..2354011 100644 --- a/grid.md +++ b/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
- - - +
1
+
2
+
3
- - - - +
1
+
2
+
3
+
4
``` You can add as many columns as you like. @@ -46,9 +46,9 @@ And is used like this: ```html
- - - +
1
+
Merge 3 columns
+
3
``` diff --git a/index.html b/index.html index e306974..7525e72 100644 --- a/index.html +++ b/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;} } @@ -64,7 +64,7 @@

Flex Grid without classes

-

By putting aside tag inside selection tag container you could make infinite flex grid. +

By putting section tag inside selection tag container you could make infinite flex grid.

@@ -170,22 +170,22 @@ color:#111;
- - - +
1
+
2
+
3
- - - - +
1
+
2
+
3
+
4
- - - - - +
1
+
2
+
3
+
4
+
5
diff --git a/package.json b/package.json index ec3e891..f72f57d 100644 --- a/package.json +++ b/package.json @@ -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": {