Robot/Basic.css
1
0
Fork 0
mirror of https://github.com/vladocar/Basic.css.git synced 2024-11-13 07:11:11 +01:00
Code Issues Projects Releases Packages Wiki Activity

Updates

Browse source
This commit is contained in:
vladocar 2020-06-01 00:50:42 +02:00
parent 814d817079
commit 47de83e032
5 changed files with 118 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
css/basic.css
View file

@ -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}

2
css/basic.min.css vendored
View file

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

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

76
grid.md Normal file
View file

@ -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".

3
index.html
View file

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