diff --git a/composer.json b/composer.json deleted file mode 100644 index be8b097..0000000 --- a/composer.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "name": "css-ui/css-ui", - "description": "Basic styles for simple responsive websites.", - "license": ["MIT"], - "authors": [ - { - "name": "Zdeněk Papučík", - "homepage": "https://github.com/accgit" - } - ], - "require": { - "accgit/normalize.css": "^v8.0" - }, - "extra": { - "assets-files": [ - "src/cssui.css" - ] - } -} diff --git a/src/cssui.css b/css/cssui.css similarity index 93% rename from src/cssui.css rename to css/cssui.css index 0c47b57..368adc3 100644 --- a/src/cssui.css +++ b/css/cssui.css @@ -171,7 +171,6 @@ pre, blockquote, dl, figure, table, p, ul, ol { margin-bottom: 1.5rem; } - /* buttons style ========================================================================== */ .button { @@ -374,7 +373,6 @@ pre, blockquote, dl, figure, table, p, ul, ol { padding: 0 16px; } - /* forms style ========================================================================== */ form { @@ -412,16 +410,6 @@ textarea { padding: 0 0.5em; } -[type="password"], -[type="number"], -[type="search"], -[type="email"], -[type="text"], -[type="tel"], -[type="url"] { - min-width: 200px; -} - select { padding-left: 0.250em; } @@ -514,6 +502,10 @@ label { margin-bottom: 0.5rem; } +fieldset .label-inline { + padding-top: 6px; +} + fieldset { background: #f9f9f9; border: 1px solid #d7d7d7; @@ -713,7 +705,6 @@ i.help.inline { display: inline-block; } - /* grid style ========================================================================== */ .container { @@ -885,7 +876,6 @@ i.help.inline { display: table; } - /* messages style ========================================================================== */ .message { @@ -911,7 +901,6 @@ i.help.inline { background: #ff3e59; } - /* utils style ========================================================================== */ .wrapper { diff --git a/src/css/ui.base.css b/css/src/ui.base.css similarity index 100% rename from src/css/ui.base.css rename to css/src/ui.base.css diff --git a/src/css/ui.buttons.css b/css/src/ui.buttons.css similarity index 100% rename from src/css/ui.buttons.css rename to css/src/ui.buttons.css diff --git a/src/css/ui.forms.css b/css/src/ui.forms.css similarity index 92% rename from src/css/ui.forms.css rename to css/src/ui.forms.css index a98b0e3..b05f82b 100644 --- a/src/css/ui.forms.css +++ b/css/src/ui.forms.css @@ -36,16 +36,6 @@ textarea { padding: 0 0.5em; } -[type="password"], -[type="number"], -[type="search"], -[type="email"], -[type="text"], -[type="tel"], -[type="url"] { - min-width: 200px; -} - select { padding-left: 0.250em; } @@ -138,6 +128,10 @@ label { margin-bottom: 0.5rem; } +fieldset .label-inline { + padding-top: 6px; +} + fieldset { background: #f9f9f9; border: 1px solid #d7d7d7; diff --git a/src/css/ui.grid.css b/css/src/ui.grid.css similarity index 100% rename from src/css/ui.grid.css rename to css/src/ui.grid.css diff --git a/src/css/ui.messages.css b/css/src/ui.messages.css similarity index 100% rename from src/css/ui.messages.css rename to css/src/ui.messages.css diff --git a/src/css/ui.utils.css b/css/src/ui.utils.css similarity index 100% rename from src/css/ui.utils.css rename to css/src/ui.utils.css diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..10c3d0b --- /dev/null +++ b/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "css-ui-simple", + "version": "2.5.2", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..5216711 --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "css-ui-simple", + "version": "2.5.2", + "description": "Basic styles for simple websites.", + "main": "css/cssui.css", + "repository": { + "type": "git", + "url": "git+https://accgit@github.com/css-ui/css-ui.git" + }, + "keywords": [ + "css", + "framework", + "web" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/css-ui/css-ui/issues" + }, + "dependencies": { + "normalize.css": "^8.0.1" + }, + "homepage": "https://github.com/css-ui/css-ui#readme" +} diff --git a/readme.md b/readme.md index 03eefdf..f08faf5 100644 --- a/readme.md +++ b/readme.md @@ -4,16 +4,35 @@ Basic styles for simple responsive websites. -## Requirements - -- normalize.css - ## Installation ``` -composer require css-ui/css-ui +npm install --save css-ui-simple ``` ## Demo https://css-ui.github.io/ + +## Quick start + +```html + + + + + + + + + + + + + Hello, World! + + +

Hello, World!

+ + +``` diff --git a/src/cssui.min.css b/src/cssui.min.css deleted file mode 100644 index 604cbae..0000000 --- a/src/cssui.min.css +++ /dev/null @@ -1 +0,0 @@ -html{box-sizing:border-box;font-size:62.5%;height:100%}*,*:before,*:after{box-sizing:inherit}body{color:#545454;font-family:Helvetica,Arial,sans-serif;font-size:1.5em;font-weight:400;line-height:1.6;min-height:100%;position:relative}a{color:#11abfe}p{margin-top:0}h1,h2,h3,h4,h5,h6{font-weight:300;margin-top:0;margin-bottom:2rem}h1,h2,h3{letter-spacing:-.1rem}h1{font-size:4rem;line-height:1.2}h2{font-size:3.6rem;line-height:1.25}h3{font-size:3rem;line-height:1.3}h4{font-size:2.4rem;letter-spacing:-.08rem;line-height:1.35}h5{font-size:1.8rem;letter-spacing:-.05rem;line-height:1.5}h6{font-size:1.5rem;letter-spacing:0;line-height:1.6}@media only screen and (min-width:768px){h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2.4rem}h6{font-size:1.5rem}}ul{list-style:circle inside}ol{list-style:decimal inside}ol,ul{margin-top:0;padding-left:0}ul ul,ul ol,ol ol,ol ul{font-size:90%;margin:1.5rem 0 1.5rem 3rem}li{margin-bottom:1rem}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #e1e1e1}code{background:#fafafa;border:1px solid #eaeaea;border-radius:3px;font-size:90%;margin:0 .2rem;padding:.2rem .5rem;white-space:nowrap}pre{white-space:pre-wrap}pre > code{display:block;padding:1rem 1.5rem;white-space:pre;word-wrap:break-word}th,td{border-bottom:1px solid #e1e1e1;padding:12px 15px;text-align:left}th:first-child,td:first-child{padding-left:0}th:last-child,td:last-child{padding-right:0}pre,blockquote,dl,figure,table,p,ul,ol{margin-bottom:1.5rem}.button{background:transparent;border:1px solid #cfcfcf;border-radius:3px;box-sizing:border-box;color:#545454;cursor:pointer;display:inline-block;height:36px;letter-spacing:.1rem;line-height:34px;margin-bottom:1rem;padding:0 12px;text-align:center;text-decoration:none;user-select:none}.button:hover,.button:focus{border-color:#b3b3b3;color:#2f2f2f;outline:0}.button.primary{background:#1795f8;color:#fff}.button.primary:hover,.button.primary:focus{background:#168ff0}.button.common{background:#545454;color:#fff}.button.common:hover,.button.common:focus{background:#4b4b4b}.button.success{background:#52d064;color:#fff}.button.success:hover,.button.success:focus{background:#4fc860}.button.warning{background:#ffd965;color:#a76600}.button.warning:hover,.button.warning:focus{background:#fad35b}.button.danger{background:#ff3e59;color:#fff}.button.danger:hover,.button.danger:focus{background:#f33b55}.button.primary,.button.common,.button.success,.button.danger,.button.warning{border:0;line-height:36px}.button.primary.outline{border:1px solid #1795f8;color:#10a2f1}.button.primary.outline:hover,.button.primary.outline:focus{background:#1795f8;color:#fff}.button.common.outline{border:1px solid #545454;color:#545454}.button.common.outline:hover,.button.common.outline:focus{background:#545454;color:#fff}.button.success.outline{border:1px solid #52d064;color:#68c041}.button.success.outline:hover,.button.success.outline:focus{background:#52d064;color:#fff}.button.warning.outline{border:1px solid #ffd965;color:#e4ac00}.button.warning.outline:hover,.button.warning.outline:focus{background:#ffd965;color:#a76600}.button.danger.outline{border:1px solid #ff3e59;color:#e24343}.button.danger.outline:hover,.button.danger.outline:focus{background:#ff3e59;color:#fff}.button.primary.outline,.button.common.outline,.button.success.outline,.button.warning.outline,.button.danger.outline{background:none;padding:0 11px}.button.white{background:#fff}.button.white:hover,.button.white:focus{background:#f2f2f2}.button.light{background:#f2f2f2}.button.light:hover,.button.light:focus{background:#eee}.button.white,.button.light{border:0}.button.small{font-size:small;height:30px;line-height:30px}.button.larger{font-size:1.125em;height:42px;line-height:42px;padding:0 14px}.button.bigger{font-size:1.250em;height:48px;line-height:48px;padding:0 16px}form{margin-bottom:1.5rem}button,input,optgroup,select,textarea{color:inherit;font:inherit}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}[type="password"],[type="number"],[type="search"],[type="email"],[type="text"],[type="tel"],[type="url"],select,textarea{background:#fff;border:1px solid #cfcfcf;border-radius:3px;box-sizing:border-box;display:block;height:36px;margin-bottom:6px;padding:0 .5em}[type="password"],[type="number"],[type="search"],[type="email"],[type="text"],[type="tel"],[type="url"]{min-width:200px}select{padding-left:.250em}[type="password"],[type="number"],[type="search"],[type="email"],[type="text"],[type="tel"],[type="url"],textarea{appearance:none}[type="password"]:focus,[type="number"]:focus,[type="search"]:focus,[type="email"]:focus,[type="text"]:focus,[type="tel"]:focus,[type="url"]:focus,select:focus,textarea:focus{border-color:#b3b3b3;outline:0}[type="checkbox"],[type="radio"]{display:inline;margin:0 0 3px;vertical-align:middle}[type="file"]:focus,[type="radio"]:focus,[type="checkbox"]:focus{outline:thin dotted #b3b3b3;outline:1px auto #b3b3b3}[disabled]{background:#f9f9f9;border-color:#e3e3e3;color:#cbcbcb;cursor:not-allowed}[readonly]{background:#fbfbfb;border-color:#cfcfcf;color:#cbcbcb}:focus:invalid{border-color:#ff3e59;color:#ff3e59}:focus:invalid:focus{border-color:#ff3e59}::placeholder{color:#cbcbcb;opacity:1}:-ms-input-placeholder{color:#cbcbcb}::-ms-input-placeholder{color:#cbcbcb}[type="file"]:focus:invalid:focus,[type="radio"]:focus:invalid:focus,[type="checkbox"]:focus:invalid:focus{outline-color:#ff3e59}[multiple]{height:auto}label{display:block;margin-bottom:.5rem}fieldset{background:#f9f9f9;border:1px solid #d7d7d7;border-radius:3px;margin:0;padding:.875em 1.5em}legend{font-weight:500;margin:0 -5px;padding:0 5px}textarea{display:block;min-height:65px}input,fieldset{margin-bottom:1.5rem}form input.inline{float:left;margin-right:6px}form.search input.find{border-right:0;border-radius:0;border-bottom-left-radius:3px;border-top-left-radius:3px;margin-right:0;float:left}form.search button,form.search [type="button"],form.search [type="submit"]{border-radius:0;border-bottom-right-radius:3px;border-top-right-radius:3px}form.group .unite{margin:0 0 -1px;position:relative;top:-1px}form.group .unite:first-child{top:-1px}form.group .unite{border-radius:0}form.group .unite:focus{z-index:1}form.group .unite.first{border-top-left-radius:3px;border-top-right-radius:3px}form.group .unite.last{border-bottom-left-radius:3px;border-bottom-right-radius:3px}form.group button,form.group [type="button"],form.group [type="reset"],form.group [type="submit"]{margin-top:6px}.check,.radio{cursor:pointer;display:inline-block;margin:0;padding:0 0 0 22px;position:relative;user-select:none}.check input,.radio input{visibility:hidden;position:absolute;display:none}.check .checkmark:after,.radio .checkmark:after{content:"";position:absolute;display:none}.check input:checked ~ .checkmark:after,.radio input:checked ~ .checkmark:after{display:block}.radio .checkmark{border:1px solid #c5c5c5;border-radius:50%;height:13px;left:0;position:absolute;top:7px;width:13px}.radio input:checked ~ .checkmark{background:#fff}.radio .checkmark:after{top:3px;left:3px;width:5px;height:5px;border-radius:50%;background:#c5c5c5}.check .checkmark{border:1px solid #c5c5c5;border-radius:3px;height:13px;left:0;position:absolute;top:7px;width:13px}.check input:checked ~ .checkmark{background:#fff}.check .checkmark:after{left:3px;top:1px;width:5px;height:7px;border:solid #c5c5c5;border-width:0 2px 2px 0;transform:rotate(45deg)}.radio .checkmark.primary:after{background:#1795f8}.radio .checkmark.common:after{background:#545454}.check .checkmark.primary:after{border-color:#1795f8}.check .checkmark.common:after{border-color:#545454}i.help{display:block;color:#a5a5a5;font-size:90%;margin:0 0 10px 0}i.help.inline{display:inline-block}.container{box-sizing:border-box;margin:0 auto;position:relative;width:100%}.column,.columns{box-sizing:border-box;float:left;width:100%}@media (min-width:480px){.column,.columns{margin-left:4%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{margin-left:0;width:100%}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}.offset-one.column,.offset-one.columns{margin-left:8.66666666667%}.offset-two.column,.offset-two.columns{margin-left:17.3333333333%}.offset-three.column,.offset-three.columns{margin-left:26%}.offset-four.column,.offset-four.columns{margin-left:34.6666666667%}.offset-five.column,.offset-five.columns{margin-left:43.3333333333%}.offset-six.column,.offset-six.columns{margin-left:52%}.offset-seven.column,.offset-seven.columns{margin-left:60.6666666667%}.offset-eight.column,.offset-eight.columns{margin-left:69.3333333333%}.offset-nine.column,.offset-nine.columns{margin-left:78%}.offset-ten.column,.offset-ten.columns{margin-left:86.6666666667%}.offset-eleven.column,.offset-eleven.columns{margin-left:95.3333333333%}.offset-one-third.column,.offset-one-third.columns{margin-left:34.6666666667%}.offset-two-thirds.column,.offset-two-thirds.columns{margin-left:69.3333333333%}.offset-one-half.column,.offset-one-half.columns{margin-left:52%}}.container:after,.row:after{clear:both;content:"";display:table}.message{border-radius:3px;color:#fff;padding:8px 12px}.message.info{background:#1795f8}.message.success{background:#52d064}.message.warning{background:#ffd965;color:#5a5031}.message.danger{background:#ff3e59}.wrapper{display:block}.quote:before,.quote:after{font-size:1.63em;line-height:1;padding:8px}.quote:before{content:open-quote}.quote:after{content:close-quote}.full.width{box-sizing:border-box;width:100%}.max.width{box-sizing:border-box;max-width:100%}.float.right{float:right}.float.left{float:left}.align.right{text-align:right}.align.center{text-align:center}.align.left{text-align:left}.screen.reader{display:none}.bottom.footer{bottom:0;left:0;position:absolute;right:0}.clear:after{clear:both;content:".";display:block;font-size:0;height:0;visibility:hidden} \ No newline at end of file