Updates
This commit is contained in:
vladocar
parent
814d817079
commit
47de83e032
|
|
@ -81,20 +81,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}
|
||||
input, select, textarea{font-size: 1em; color:var(--c4); background: var(--c2); border: 0; padding: 0.6em}
|
||||
|
||||
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 */
|
||||
|
||||
section{display: flex; flex-flow: row wrap}
|
||||
|
||||
aside,article {flex:1; margin:var(--m1)}
|
||||
[style*="--c:"], 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)}
|
||||
|
||||
aside:first-child, article:first-child {margin-left:0}
|
||||
[style*="--c:"]:first-child, aside:first-child, article:first-child {margin-left:0}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
*{box-sizing:border-box}:root{--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:1em/1.6 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Fira Sans,sans-serif;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{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}article,aside{flex:1;margin:var(--m1)}article{background:var(--c2);border-radius:var(--rc);padding:1em;box-shadow:0 1px 0 rgba(0,0,0,.3)}article:first-child,aside:first-child{margin-left:0}
|
||||
*{box-sizing:border-box}:root{--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:1em/1.6 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Fira Sans,sans-serif;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}
|
||||
35
grid.html
35
grid.html
|
|
@ -17,7 +17,7 @@
|
|||
text-align: left;
|
||||
padding: 0 20px;
|
||||
}
|
||||
aside{
|
||||
[style*="--c:"],aside{
|
||||
color: #fff;
|
||||
background-color: #00bbeb;
|
||||
padding: 15px;
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
<body>
|
||||
<main>
|
||||
|
||||
<h1>Simple Grid</h1>
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside> 2 </aside>
|
||||
|
|
@ -49,6 +49,37 @@
|
|||
<aside> 4 </aside>
|
||||
<aside> 5 </aside>
|
||||
</section>
|
||||
<h2>Complex grid</h2>
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside> 2 </aside>
|
||||
<aside> 3 </aside>
|
||||
</section>
|
||||
<section>
|
||||
<aside style = "--c:2">Merge the first 2 columns</aside>
|
||||
<aside>2</aside>
|
||||
<aside>3</aside>
|
||||
<aside>4</aside>
|
||||
</section>
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside style = "--c:3"> Merge 3 columns </aside>
|
||||
<aside> 3 </aside>
|
||||
</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>
|
||||
<section>
|
||||
<div style = "--c:1"> 1 </div>
|
||||
<div style = "--c:2"> Merge 2 columns</div>
|
||||
<div style = "--c:1"> 3 </div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
Grid System
|
||||
=======================================
|
||||
***
|
||||
|
||||
###Simple Grid
|
||||
|
||||
The simple grid is based on this code:
|
||||
|
||||
|
||||
```css
|
||||
section{display: flex; flex-flow: row wrap}
|
||||
aside {flex:1}
|
||||
```
|
||||
And the HTML looks like this:
|
||||
|
||||
```html
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside> 2 </aside>
|
||||
<aside> 3 </aside>
|
||||
</section>
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside> 2 </aside>
|
||||
<aside> 3 </aside>
|
||||
<aside> 4 </aside>
|
||||
</section>
|
||||
```
|
||||
You can add as many columns as you like.
|
||||
|
||||
It is based on my previous Infinity CSS Grid https://github.com/vladocar/infinity-css-grid .
|
||||
|
||||
###Complex Grid
|
||||
|
||||
It wasn't my attention to make classless complex grid. CSS classes are perfect for making grids. Use classes for grids.
|
||||
|
||||
But [@sylvainpolletvillard](https://github.com/sylvainpolletvillard) made very interesting [pull request](https://github.com/vladocar/Basic.css/pull/2) using next level CSS "hacks". It gives dynamic almost JavaScript capabilities to the CSS code.
|
||||
|
||||
I'm talking about this code:
|
||||
|
||||
```css
|
||||
[style*="--c:"] {flex:var(--c,1)}
|
||||
```
|
||||
|
||||
And is used like this:
|
||||
|
||||
```html
|
||||
<section>
|
||||
<aside> 1 </aside>
|
||||
<aside style = "--c:3"> Merge 3 columns </aside>
|
||||
<aside> 3 </aside>
|
||||
</section>
|
||||
```
|
||||
|
||||
Or:
|
||||
|
||||
```html
|
||||
<section>
|
||||
<div style = "--c:1"></div>
|
||||
<div style = "--c:2"></div>
|
||||
<div style = "--c:1"></div>
|
||||
</section>
|
||||
```
|
||||
Demo [grid.html](grid.html)
|
||||
|
||||
Basically with the variable --c you can control the number of columns you like to merge.
|
||||
|
||||
style = "--c:4" means you will unite(merge) the width of 4 columns.
|
||||
|
||||
Ok, I admit it, it looks ugly. But, it works.
|
||||
|
||||
Probably Morty (Rick and Morty) comment would be:
|
||||
"It looks like CSS class framework with extra steps".
|
||||
|
||||
|
||||
|
||||
|
|
@ -227,6 +227,9 @@ color:#111;
|
|||
<p>
|
||||
<button>Button </button>
|
||||
<button>Hello World</button>
|
||||
<input type="button" value="Input button" />
|
||||
<input type="submit" value="Input submit" />
|
||||
<input type="reset" value="Input reset" />
|
||||
|
||||
</p>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue