A very small CSS framework for fast ui prototyping.
TODO
Link the CSS file in your HTML file with (directly served by the raw gist for now)
<link rel="stylesheet" type="text/css" href="https://gist.githubusercontent.com/aziis98/4f65205a16a0d2f4edb6f5ea65fba4e7/raw/d147a4641d21d5dfa35cda84647823ef90bfd624/minimal-ui.css"> | MIT License | |
| Copyright (c) 2017 Antonio De Lucreziis | |
| Permission is hereby granted, free of charge, to any person obtaining a copy | |
| of this software and associated documentation files (the "Software"), to deal | |
| in the Software without restriction, including without limitation the rights | |
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
| copies of the Software, and to permit persons to whom the Software is | |
| furnished to do so, subject to the following conditions: | |
| The above copyright notice and this permission notice shall be included in all | |
| copies or substantial portions of the Software. | |
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | |
| SOFTWARE. |
| html, | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| div { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .row { | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| .column { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .row.centered, | |
| .column.centered { | |
| align-items: center; | |
| } | |
| .center { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .example { | |
| border: 1px solid #808080; | |
| } | |
| .example.box { | |
| border: 1px solid #ff4500; | |
| width: 100px; | |
| height: 100px; | |
| } | |
| .example.label { | |
| border: 1px solid #00008b; | |
| width: 100px; | |
| height: 25px; | |
| } | |
| .toolbar { | |
| height: 40px; | |
| } | |
| .toolbar .tool { | |
| width: 40px; | |
| height: 40px; | |
| margin: 0 5px; | |
| } | |
| .sidebar { | |
| width: 25%; | |
| } | |
| .content { | |
| width: 75%; | |
| } |
| html, body | |
| width 100% | |
| height 100% | |
| padding 0 | |
| margin 0 | |
| * | |
| box-sizing border-box | |
| div | |
| width 100% | |
| height 100% | |
| .row | |
| display flex | |
| flex-direction row | |
| .column | |
| display flex | |
| flex-direction column | |
| .row, .column | |
| &.centered | |
| align-items center | |
| .center | |
| display flex | |
| align-items center | |
| justify-content center | |
| .example | |
| border 1px solid gray | |
| &.box | |
| border 1px solid orangered | |
| width 100px | |
| height 100px | |
| &.label | |
| border 1px solid darkblue | |
| width 100px | |
| height 25px |