yogsototh/brutcss
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improved grid mechanism

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2022-09-27 10:22:45 +02:00
parent 3520c8ac6a
commit 85ddfd3b5a
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
4 changed files with 30 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
brut.min.css vendored
View file

File diff suppressed because one or more lines are too long

14
index.html
View file

@ -16,7 +16,7 @@
<a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a>
</div>
</nav>
<button class="btn btn-sm btn-close">×</button>
<button class="btn sm btn-close">×</button>
<div class="container">
<div class="hero">
<div class="row">
@ -42,32 +42,32 @@
</div>
</div>
<div class="row">
<div class="c4">
<div class="c4 col">
<div class="card">
<h3>Documentation</h3>
<div class="block">
<p>Don't worry it will be quick and straightforward.</p>
<p>Just a test</p>
</div>
<a href="h/docs.html" class="btn">Docs</a>
<a href="h/docs.html" class="btn info big">Docs</a>
</div>
</div>
<div class="c4">
<div class="c4 col">
<div class="card">
<h3>Download</h3>
<div class="block">
<p>Download BRUT</p>
</div>
<a href="h/docs.html" class="btn">Download</a>
<a href="h/docs.html" class="btn err big">Download</a>
</div>
</div>
<div class="c4">
<div class="c4 col">
<div class="card">
<h3>Examples</h3>
<div class="block">
<p>To give you an idea.</p>
</div>
<a href="h/examples.html" class="btn">Examples</a>
<a href="h/examples.html" class="btn ok big">Examples</a>
</div>
</div>
</div>

24
src/general.less
View file

@ -24,20 +24,24 @@ body, textarea, input, select {
width: auto;
}
.block {
padding: 6px;
margin: 6px;
}
/* is like a block with a border */
.card {
.card, .block {
padding: 5px;
margin: 5px;
border: solid 2px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.col > .card, .col > .block { height: 100%; }
.row > .card, .row > .block { width: 100%; }
.block {
border-color: transparent;
}
.col .bot {
margin-top: auto;
.bot {
display: flex;
justify-content: flex-start;
}
.hero {

7
src/grid.less
View file

@ -3,7 +3,7 @@
.row {
display: flex;
justify-content: space-evenly;
align-items: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
@ -11,10 +11,13 @@
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.col > *, .row > * { padding: 5px; }
.col.no-padding > *, .row.no-padding > * { padding: 0; }
.table, .c12 {
width: 100%;
}