🔝 Back to top • 🐛 Report an issue • 🎗 Donate
Want icons for your project too? Checkout Icongr.am 🚀
diff --git a/package.json b/package.json
index b4bd5be..382f08c 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,15 @@
{
"name": "chota",
- "version": "0.8.0",
+ "version": "0.9.2",
"description": "A really small CSS framework",
"main": "dist/chota.min.css",
"scripts": {
"start": "run-p docs watch",
- "docs": "jekyll s -s docs",
- "build": "rimraf dist/* && yarn postcss && cross-env VARIANT=100 yarn postcss --ext .100.css && cross-env VARIANT=100 NODE_ENV=production yarn postcss --ext .100.min.css && cross-env NODE_ENV=production yarn postcss --ext .min.css && gzip -c dist/chota.min.css | wc -c | xargs echo 'Size:'",
+ "docs": "bundle exec jekyll s -s docs",
+ "build": "rimraf dist/* && stylelint src/*.css --fix && yarn postcss && cross-env NODE_ENV=production yarn postcss --ext .min.css && gzip -c dist/chota.min.css | wc -c | xargs echo 'Size:'",
"postcss": "postcss ./src/chota.css -d dist/",
"watch": "cross-env NODE_ENV=development yarn postcss -w",
- "test": "echo \"Error: no test specified\" && exit 1",
- "prepublish": "yarn build"
+ "test": "stylelint src/*.css"
},
"keywords": [
"css",
@@ -28,16 +27,22 @@
"url": "https://github.com/jenil/chota/issues"
},
"devDependencies": {
- "autoprefixer": "^9.6.1",
- "cross-env": "^7.0.2",
- "cssnano": "^4.1.7",
- "npm-run-all": "^4.1.5",
- "postcss": "^8.4.6",
- "postcss-cli": "^9.1.0",
- "postcss-csso": "^4.0.0",
- "postcss-import": "^12.0.1",
- "postcss-revert-rem-size": "^0.2.0",
- "rimraf": "^3.0.0"
+ "autoprefixer": "10.4.8",
+ "caniuse-lite": "1.0.30001468",
+ "cross-env": "7.0.2",
+ "cssnano": "5.1.13",
+ "npm-run-all": "4.1.5",
+ "postcss": "8.4.16",
+ "postcss-banner": "4.0.1",
+ "postcss-cli": "10.0.0",
+ "postcss-csso": "6.0.1",
+ "postcss-import": "15.0.0",
+ "postcss-reporter": "7.0.5",
+ "prettier": "2.7.1",
+ "rimraf": "3.0.0",
+ "stylelint": "14.11.0",
+ "stylelint-config-prettier": "9.0.3",
+ "stylelint-config-standard": "28.0.0"
},
"files": [
"src/",
@@ -46,5 +51,9 @@
],
"browserslist": [
"last 2 versions"
- ]
+ ],
+ "prettier": {
+ "tabWidth": 2
+ },
+ "dependencies": {}
}
diff --git a/postcss.config.js b/postcss.config.js
index 6a03286..311fa60 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,13 +1,22 @@
+const { version } = require("./package.json");
+
let plugins = [
- require("postcss-import"),
- require("autoprefixer")()
+ require("postcss-banner")({
+ banner: `chota.css v${version} | MIT License | https://github.com/jenil/chota`,
+ important: true,
+ }),
+ require("postcss-import")({
+ plugins: [require("stylelint")({ fix: true, formatter: "compact" })],
+ }),
+ require("autoprefixer")(),
+ require("postcss-reporter")({ clearReportedMessages: true }),
];
// if (process.env.NODE_ENV == 'production') plugins.push(require("postcss-csso"))
if (process.env.NODE_ENV == "production")
plugins.push(
require("cssnano")({
- preset: "default"
+ preset: "default",
})
);
@@ -17,5 +26,5 @@ if (process.env.VARIANT == "100")
);
module.exports = {
- plugins
+ plugins,
};
diff --git a/src/_base.css b/src/_base.css
index 6cbf7c0..7888db2 100644
--- a/src/_base.css
+++ b/src/_base.css
@@ -1,7 +1,7 @@
:root {
- --bg-color: #ffffff;
+ --bg-color: #fff;
--bg-secondary-color: #f3f3f6;
- --color-primary: #14854F;
+ --color-primary: #14854f;
--color-lightGrey: #d2d6dd;
--color-grey: #747681;
--color-darkGrey: #3f4144;
@@ -10,10 +10,10 @@
--grid-maxWidth: 120rem;
--grid-gutter: 2rem;
--font-size: 1.6rem;
- --font-color: #333333;
- --font-family-sans: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next",
- "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
- "Droid Sans", "Helvetica Neue", sans-serif;
+ --font-color: #333;
+ --font-family-sans: -apple-system, "BlinkMacSystemFont", "Avenir",
+ "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+ "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
}
@@ -21,37 +21,21 @@ html {
box-sizing: border-box;
font-size: 62.5%;
line-height: 1.15;
- -ms-text-size-adjust: 100%;
- -webkit-text-size-adjust: 100%;
+ text-size-adjust: 100%;
}
-*, *:before, *:after {
+*,
+*::before,
+*::after {
box-sizing: inherit;
}
-* {
- scrollbar-width: thin;
- scrollbar-color: var(--color-lightGrey) var(--bg-primary);
-}
-
-*::-webkit-scrollbar {
- width: 8px;
-}
-
-*::-webkit-scrollbar-track {
- background: var(--bg-primary);
-}
-
-*::-webkit-scrollbar-thumb {
- background: var(--color-lightGrey);
-}
-
body {
background-color: var(--bg-color);
line-height: 1.6;
font-size: var(--font-size);
color: var(--font-color);
- font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/
+ font-family: "Segoe UI", "Helvetica Neue", sans-serif; /* fallback */
font-family: var(--font-family-sans);
margin: 0;
padding: 0;
@@ -64,7 +48,7 @@ h4,
h5,
h6 {
font-weight: 500;
- margin: 0.35em 0 0.7em 0;
+ margin: 0.35em 0 0.7em;
}
h1 {
@@ -161,7 +145,6 @@ tt {
code,
kbd {
- padding: 0 0.4rem;
font-size: 90%;
white-space: pre-wrap;
border-radius: 4px;
diff --git a/src/_form.css b/src/_form.css
index d4e44ba..5decf9f 100644
--- a/src/_form.css
+++ b/src/_form.css
@@ -8,7 +8,7 @@ legend {
letter-spacing: 0.1rem;
}
-input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]),
+input:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]),
select,
textarea,
textarea[type="text"] {
@@ -22,47 +22,21 @@ textarea[type="text"] {
width: 100%;
}
-input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):not(:disabled):hover,
-select:hover,
-textarea:hover,
-textarea[type="text"]:hover {
- border-color: var(--color-grey);
-}
-
-input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):focus,
-select:focus,
-textarea:focus,
-textarea[type="text"]:focus {
- outline: none;
- border-color: var(--color-primary);
- box-shadow: 0 0 1px var(--color-primary);
-}
-
-input.error:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]),
-textarea.error {
- border-color: var(--color-error);
-}
-
-input.success:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]),
-textarea.success {
- border-color: var(--color-success);
+input[type="checkbox"],
+input[type="radio"],
+input[type="range"],
+progress {
+ accent-color: var(--color-primary);
}
select {
- -webkit-appearance: none;
+ appearance: none;
background: #f3f3f6 no-repeat 100%;
background-size: 1ex;
background-origin: content-box;
background-image: url("data:image/svg+xml;utf8, 
IE / Edge | 
Firefox | 
Chrome | 
Safari | 
Opera | 
iOS Safari | 
Chrome for Android |
+| [
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)