From 0c8c47811246e98b57a519dbf785a71265cc7d15 Mon Sep 17 00:00:00 2001 From: Michiel Scholten Date: Thu, 8 May 2025 15:37:58 +0200 Subject: [PATCH] Initial version --- README.md | 4 +++ css/digui.css | 90 +++++++++++++++++++++++++++++++++++++++++++++++++++ demo.html | 10 ++++++ js/digui.js | 3 ++ 4 files changed, 107 insertions(+) create mode 100644 README.md create mode 100644 css/digui.css create mode 100644 demo.html create mode 100644 js/digui.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..0387ab4 --- /dev/null +++ b/README.md @@ -0,0 +1,4 @@ +digui +===== + +HTML/CSS toolkit to quickly build web applications and websites. diff --git a/css/digui.css b/css/digui.css new file mode 100644 index 0000000..89de6f1 --- /dev/null +++ b/css/digui.css @@ -0,0 +1,90 @@ +/** + * digui structure + * v0.0.1 + */ + +/* Main structure */ + +body { + height: 125vh; + font-family: sans-serif; + margin-top: 3rem; + padding: 30px; +} + +main { + color: black; +} + +header { + background-color: white; + position: fixed; + top: 0; + left: 0; + right: 0; + height: 3rem; + display: flex; + align-items: center; + /*box-shadow: 0 0 5px 0 rgba(213, 217, 217, .5);*/ + box-shadow: 0 0 5px 0 #999; +} + +header * { + display: inline; +} + +header li { + margin: 20px; +} + +header li a { + color: black; + text-decoration: none; +} + +/* Active element, e.g. a button */ +.active { + background-color: #cccccc; +} + +/* Buttons */ +button { + background-color: #fff; + border: 1px solid #d5d9d9; + border-radius: 8px; + box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0; + box-sizing: border-box; + color: #0f1111; + cursor: pointer; + display: inline-block; + font-size: 13px; + line-height: 29px; + padding: 0 10px 0 11px; + position: relative; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: middle; + /*width: 100px;*/ +} + +button:hover { + background-color: #f7fafa; +} + +button:focus { + border-color: #008296; + box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0; + outline: 0; +} + +/* Cards */ +.cards { + display: grid; +} + +.card { + display: inline-grid; +} \ No newline at end of file diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..8cde139 --- /dev/null +++ b/demo.html @@ -0,0 +1,10 @@ + + + digui demo + + + +

Welcome to digui

+ + + diff --git a/js/digui.js b/js/digui.js new file mode 100644 index 0000000..67b3321 --- /dev/null +++ b/js/digui.js @@ -0,0 +1,3 @@ +/** + * digui Javascript components + */