mirror of
https://github.com/jenil/chota.git
synced 2023-08-10 21:13:07 +03:00
0.1.0 🚀
This commit is contained in:
Jenil Gogari
parent
bf70215eda
commit
413957b9f0
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
node_modules
|
||||||
|
_site
|
||||||
|
*.lock
|
||||||
1
dist/chota.css
vendored
Normal file
1
dist/chota.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/chota.min.css
vendored
Normal file
1
dist/chota.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
26
package.json
Normal file
26
package.json
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"name": "chota",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "A really small CSS framework",
|
||||||
|
"main": "dist/chota.min.css",
|
||||||
|
"scripts": {
|
||||||
|
"start": "browser-sync start --server --files '**/*.css' '**/*.html'",
|
||||||
|
"build": "rm -r dist/ && yarn postcss && yarn postcss -- -u cssnano -x .min.css",
|
||||||
|
"postcss": "postcss ./src/chota.css --use postcss-import -d dist/ --no-map",
|
||||||
|
"watch": "yarn postcss -- -u cssnano -x .min.css -w",
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"css",
|
||||||
|
"minimal"
|
||||||
|
],
|
||||||
|
"author": "Jenil Gogari",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"autoprefixer": "^6.7.7",
|
||||||
|
"browser-sync": "^2.18.8",
|
||||||
|
"cssnano": "^3.10.0",
|
||||||
|
"postcss-cli": "^3.0.0",
|
||||||
|
"postcss-import": "^9.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
132
src/_base.css
Normal file
132
src/_base.css
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
:root {
|
||||||
|
--primary-color: #1a9f60;
|
||||||
|
--lightGrey-color: #ddd;
|
||||||
|
--grid-maxWidth: 120rem;
|
||||||
|
--grid-gutter: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 62.5%;
|
||||||
|
line-height: 1.15;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover:not(.button) {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
padding: 1.5rem 2rem;
|
||||||
|
border-left: 3px solid var(--lightGrey-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
dl dt {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
background-color: var(--lightGrey-color);
|
||||||
|
height: 1px;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: 1.2rem 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
border-bottom: 2px solid var(--lightGrey-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
tfoot {
|
||||||
|
border-top: 2px solid var(--lightGrey-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
pre,
|
||||||
|
samp,
|
||||||
|
tt {
|
||||||
|
font-family: monaco, "Consolas", "Lucida Console", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd {
|
||||||
|
padding: 0 0.4rem;
|
||||||
|
font-size: 90%;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #d00939;
|
||||||
|
border: 1px solid var(--lightGrey-color);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-size: 1em;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: none;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset,
|
||||||
|
iframe {
|
||||||
|
border: 1px solid var(--lightGrey-color);
|
||||||
|
}
|
||||||
10
src/_card.css
Normal file
10
src/_card.css
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
.card {
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card header > * {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
138
src/_form.css
Normal file
138
src/_form.css
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
fieldset {
|
||||||
|
padding: 0.5rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 0.8em;
|
||||||
|
letter-spacing: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),
|
||||||
|
select,
|
||||||
|
textarea,
|
||||||
|
textarea[type=text] {
|
||||||
|
font-family: inherit;
|
||||||
|
padding: 0.7rem 1rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--lightGrey-color);
|
||||||
|
font-size: 1em;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,
|
||||||
|
select:hover,
|
||||||
|
textarea:hover,
|
||||||
|
textarea[type=text]:hover {
|
||||||
|
border-color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
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(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background-color: #fafafa;
|
||||||
|
border: 1px solid var(--lightGrey-color);
|
||||||
|
background-position: right center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 1ex;
|
||||||
|
background-origin: content-box;
|
||||||
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>");
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 1.6rem;
|
||||||
|
height: 1.6rem;
|
||||||
|
margin: -0.2rem 0.2rem;
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="radio"] {
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: inset 0 0 0 3px white;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="radio"]:checked {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="checkbox"]:checked {
|
||||||
|
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC") var(--primary-color) no-repeat center;
|
||||||
|
background-size: 1rem;
|
||||||
|
}
|
||||||
|
/* BUTTONS */
|
||||||
|
.button,
|
||||||
|
[type=button],
|
||||||
|
[type=reset],
|
||||||
|
[type=submit],
|
||||||
|
button {
|
||||||
|
padding: 1rem 2.5rem;
|
||||||
|
color: #333;
|
||||||
|
background: #e6e6e6;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: none;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
text-decoration: none;
|
||||||
|
transform: scale(1);
|
||||||
|
transition: all 300ms;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button + .button {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover,
|
||||||
|
[type=button]:hover,
|
||||||
|
[type=reset]:hover,
|
||||||
|
[type=submit]:hover,
|
||||||
|
button:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:active,
|
||||||
|
[type=button]:active,
|
||||||
|
[type=reset]:active,
|
||||||
|
[type=submit]:active,
|
||||||
|
button:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[disabled] {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.primary,
|
||||||
|
[type=submit] {
|
||||||
|
color: #fff;
|
||||||
|
background: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.outline {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid var(--lightGrey-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.outline.primary {
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.clear {
|
||||||
|
background-color: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
84
src/_grid.css
Normal file
84
src/_grid.css
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
.container {
|
||||||
|
max-width: var(--grid-maxWidth);
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-top: var(--grid-gutter);
|
||||||
|
margin-bottom: var(--grid-gutter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.row > :first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col,
|
||||||
|
[class*=" col-"],
|
||||||
|
[class^='col-'] {
|
||||||
|
margin-left: var(--grid-gutter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-1 {
|
||||||
|
width: calc((100% - var(--grid-gutter)*((12/1) - 1))/(12/1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-2 {
|
||||||
|
width: calc((100% - var(--grid-gutter)*((12/2) - 1))/(12/2));
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-3 {
|
||||||
|
width: calc((100% - var(--grid-gutter)*((12/3) - 1))/(12/3));
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-4 {
|
||||||
|
width: calc((100% - var(--grid-gutter)*((12/4) - 1))/(12/4));
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-5 {
|
||||||
|
width: calc((100% - var(--grid-gutter)*((12/5) - 1))/(12/5));
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-6 {
|
||||||
|
width: calc((100% - var(--grid-gutter)*((12/6) - 1))/(12/6));
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-7 {
|
||||||
|
width: calc((100% - var(--grid-gutter)*((12/7) - 1))/(12/7));
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-8 {
|
||||||
|
width: calc((100% - var(--grid-gutter)*((12/8) - 1))/(12/8));
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-9 {
|
||||||
|
width: calc((100% - var(--grid-gutter)*((12/9) - 1))/(12/9));
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-10 {
|
||||||
|
width: calc((100% - var(--grid-gutter)*((12/10) - 1))/(12/10));
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-11 {
|
||||||
|
width: calc((100% - var(--grid-gutter)*((12/11) - 1))/(12/11));
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-12 {
|
||||||
|
width: calc((100% - var(--grid-gutter)*((12/12) - 1))/(12/12));
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.col,
|
||||||
|
[class*=" col-"],
|
||||||
|
[class^='col-'] {
|
||||||
|
margin: var(--grid-gutter) 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
65
src/_nav.css
Normal file
65
src/_nav.css
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
min-height: 5rem;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav > .container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > .nav {
|
||||||
|
padding-left: var(--grid-gutter);
|
||||||
|
padding-right: var(--grid-gutter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-center,
|
||||||
|
.nav-left,
|
||||||
|
.nav-right {
|
||||||
|
display: flex;
|
||||||
|
flex-basis: 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-left {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-right {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
.nav, .nav>.container {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-center,
|
||||||
|
.nav-left,
|
||||||
|
.nav-right {
|
||||||
|
flex-basis: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 1;
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav .brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a {
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
}
|
||||||
24
src/_tab.css
Normal file
24
src/_tab.css
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs > a {
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
flex: 1;
|
||||||
|
color: #555;
|
||||||
|
border-bottom: 2px solid var(--lightGrey-color);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs > a.active,
|
||||||
|
.tabs > a:hover {
|
||||||
|
border-bottom: 2px solid #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs > a.active {
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
}
|
||||||
91
src/_util.css
Normal file
91
src/_util.css
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
.pull-right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pull-left {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-text-left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-text-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-text-uppercase {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-text-lowercase {
|
||||||
|
text-transform: lowercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-text-capitalize {
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-full-screen {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-full-width {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-vertical-align {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-horizontal-align {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-center {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-fixed {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
.hide-phone {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.hide-tablet {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
9
src/chota.css
Normal file
9
src/chota.css
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
@import "_base.css";
|
||||||
|
@import "_grid.css";
|
||||||
|
@import "_form.css";
|
||||||
|
|
||||||
|
@import "_nav.css";
|
||||||
|
@import "_card.css";
|
||||||
|
@import "_tab.css";
|
||||||
|
|
||||||
|
@import "_util.css";
|
||||||
239
test/components.html
Normal file
239
test/components.html
Normal file
@ -0,0 +1,239 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Grids</title>
|
||||||
|
<link rel="stylesheet" href="../dist/chota.min.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="container">
|
||||||
|
<div class="nav-left">
|
||||||
|
<h2 class="brand">
|
||||||
|
<a href="#">Logo</a>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="nav-center">
|
||||||
|
<a href="#">Centered</a>
|
||||||
|
</div>
|
||||||
|
<div class="nav-right">
|
||||||
|
<a href="#!1.html">Link 1</a>
|
||||||
|
<a href="#!2.html">Link 2</a>
|
||||||
|
<a href="#!3.html">Link 3</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div class="container">
|
||||||
|
<h1>Nav</h1>
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="nav-center">
|
||||||
|
<a href="#!1.html">Link 1</a>
|
||||||
|
<a href="#!2.html">Link 2</a>
|
||||||
|
<a href="#!3.html">Link 3</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<h1>Tabs</h1>
|
||||||
|
<div class="row is-center">
|
||||||
|
<div class="col-5">
|
||||||
|
<div class="tabs">
|
||||||
|
<a class="active" href="#!1.html">Tab 1</a>
|
||||||
|
<a href="#!2.html">Tab 2</a>
|
||||||
|
<a href="#!3.html">Tab 3</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h1>Card</h1>
|
||||||
|
<div class="row is-center">
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="card">
|
||||||
|
<header>
|
||||||
|
<h4>Card title</h4>
|
||||||
|
</header>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
|
||||||
|
<footer class="is-right">
|
||||||
|
<a href="#!" class="button primary">Submit</a>
|
||||||
|
<a href="#!" class="button">Cancel</a>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="card">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
|
||||||
|
<p>Ipsa magnam consequatur itaque, mollitia non quam voluptate consequuntur dignissimos recusandae ea quas, nobis, debitis officia iure minus et dolore, reprehenderit sapiente iste. Eligendi eveniet ut qui at, deleniti enim!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h1>Grid</h1>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-2">
|
||||||
|
<div class="card is-center">.col-2</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<div class="card is-center">.col-2</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<div class="card is-center">.col-2</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-3">
|
||||||
|
<div class="card is-center">.col-3</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<div class="card is-center">.col-3</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<div class="card is-center">.col-3</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<div class="card is-center">.col-3</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="card is-center">.col-4</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="card is-center">.col-4</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="card is-center">.col-4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-5">
|
||||||
|
<div class="card is-center">.col-5</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-5">
|
||||||
|
<div class="card is-center">.col-5</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="card is-center">.col-6</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="card is-center">.col-6</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-7">
|
||||||
|
<div class="card is-center">.col-7</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-8">
|
||||||
|
<div class="card is-center">.col-8</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-9">
|
||||||
|
<div class="card is-center">.col-9</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-10">
|
||||||
|
<div class="card is-center">.col-10</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-11">
|
||||||
|
<div class="card is-center">.col-11</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="card is-center">.col-12</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
478
test/index.html
Normal file
478
test/index.html
Normal file
@ -0,0 +1,478 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Elements</title>
|
||||||
|
<link rel="stylesheet" href="../dist/chota.min.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="top" class="container" role="document">
|
||||||
|
<header role="banner">
|
||||||
|
<h1>Chota CSS</h1>
|
||||||
|
<p>A small CSS framework.</p>
|
||||||
|
</header>
|
||||||
|
<nav role="navigation">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="#text">Text</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#text__headings">Headings</a></li>
|
||||||
|
<li><a href="#text__paragraphs">Paragraphs</a></li>
|
||||||
|
<li><a href="#text__blockquotes">Blockquotes</a></li>
|
||||||
|
<li><a href="#text__lists">Lists</a></li>
|
||||||
|
<li><a href="#text__hr">Horizontal rules</a></li>
|
||||||
|
<li><a href="#text__tables">Tabular data</a></li>
|
||||||
|
<li><a href="#text__code">Code</a></li>
|
||||||
|
<li><a href="#text__inline">Inline elements</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#embedded">Embedded content</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#embedded__images">Images</a></li>
|
||||||
|
<li><a href="#embedded__audio">Audio</a></li>
|
||||||
|
<li><a href="#embedded__video">Video</a></li>
|
||||||
|
<li><a href="#embedded__canvas">Canvas</a></li>
|
||||||
|
<li><a href="#embedded__meter">Meter</a></li>
|
||||||
|
<li><a href="#embedded__progress">Progress</a></li>
|
||||||
|
<li><a href="#embedded__svg">Inline SVG</a></li>
|
||||||
|
<li><a href="#embedded__iframe">IFrames</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#forms">Form elements</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#forms__input">Input fields</a></li>
|
||||||
|
<li><a href="#forms__select">Select menus</a></li>
|
||||||
|
<li><a href="#forms__checkbox">Checkboxes</a></li>
|
||||||
|
<li><a href="#forms__radio">Radio buttons</a></li>
|
||||||
|
<li><a href="#forms__textareas">Textareas</a></li>
|
||||||
|
<li><a href="#forms__html5">HTML5 inputs</a></li>
|
||||||
|
<li><a href="#forms__action">Action buttons</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<main role="main">
|
||||||
|
<section id="text">
|
||||||
|
<header>
|
||||||
|
<h1>Text</h1></header>
|
||||||
|
<article id="text__headings">
|
||||||
|
<header>
|
||||||
|
<h1>Headings</h1>
|
||||||
|
</header>
|
||||||
|
<div>
|
||||||
|
<h1>Heading 1</h1>
|
||||||
|
<h2>Heading 2</h2>
|
||||||
|
<h3>Heading 3</h3>
|
||||||
|
<h4>Heading 4</h4>
|
||||||
|
<h5>Heading 5</h5>
|
||||||
|
<h6>Heading 6</h6>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<article id="text__paragraphs">
|
||||||
|
<header>
|
||||||
|
<h1>Paragraphs</h1></header>
|
||||||
|
<div>
|
||||||
|
<p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required
|
||||||
|
by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<article id="text__blockquotes">
|
||||||
|
<header>
|
||||||
|
<h1>Blockquotes</h1></header>
|
||||||
|
<div>
|
||||||
|
<blockquote>
|
||||||
|
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
|
||||||
|
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
|
||||||
|
<cite><a href="#!">Said no one, ever.</a></cite>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<article id="text__lists">
|
||||||
|
<header>
|
||||||
|
<h1>Lists</h1></header>
|
||||||
|
<div>
|
||||||
|
<h3>Definition list</h3>
|
||||||
|
<dl>
|
||||||
|
<dt>Definition List Title</dt>
|
||||||
|
<dd>This is a definition list division.</dd>
|
||||||
|
</dl>
|
||||||
|
<h3>Ordered List</h3>
|
||||||
|
<ol>
|
||||||
|
<li>List Item 1</li>
|
||||||
|
<li>List Item 2</li>
|
||||||
|
<li>List Item 3</li>
|
||||||
|
</ol>
|
||||||
|
<h3>Unordered List</h3>
|
||||||
|
<ul>
|
||||||
|
<li>List Item 1</li>
|
||||||
|
<li>List Item 2</li>
|
||||||
|
<li>List Item 3</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<article id="text__hr">
|
||||||
|
<header>
|
||||||
|
<h1>Horizontal rules</h1></header>
|
||||||
|
<div>
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<article id="text__tables">
|
||||||
|
<header>
|
||||||
|
<h1>Tabular data</h1></header>
|
||||||
|
<table>
|
||||||
|
<caption>Table Caption</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Table Heading 1</th>
|
||||||
|
<th>Table Heading 2</th>
|
||||||
|
<th>Table Heading 3</th>
|
||||||
|
<th>Table Heading 4</th>
|
||||||
|
<th>Table Heading 5</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th>Table Footer 1</th>
|
||||||
|
<th>Table Footer 2</th>
|
||||||
|
<th>Table Footer 3</th>
|
||||||
|
<th>Table Footer 4</th>
|
||||||
|
<th>Table Footer 5</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Table Cell 1</td>
|
||||||
|
<td>Table Cell 2</td>
|
||||||
|
<td>Table Cell 3</td>
|
||||||
|
<td>Table Cell 4</td>
|
||||||
|
<td>Table Cell 5</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Table Cell 1</td>
|
||||||
|
<td>Table Cell 2</td>
|
||||||
|
<td>Table Cell 3</td>
|
||||||
|
<td>Table Cell 4</td>
|
||||||
|
<td>Table Cell 5</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Table Cell 1</td>
|
||||||
|
<td>Table Cell 2</td>
|
||||||
|
<td>Table Cell 3</td>
|
||||||
|
<td>Table Cell 4</td>
|
||||||
|
<td>Table Cell 5</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Table Cell 1</td>
|
||||||
|
<td>Table Cell 2</td>
|
||||||
|
<td>Table Cell 3</td>
|
||||||
|
<td>Table Cell 4</td>
|
||||||
|
<td>Table Cell 5</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<footer>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<article id="text__code">
|
||||||
|
<header>
|
||||||
|
<h1>Code</h1></header>
|
||||||
|
<div>
|
||||||
|
<p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
|
||||||
|
<p><strong>Inline code:</strong> <code><div>code</div></code></p>
|
||||||
|
<p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
|
||||||
|
<h2>Pre-formatted text</h2>
|
||||||
|
<pre>P R E F O R M A T T E D T E X T
|
||||||
|
! " # $ % & ' ( ) * + , - . /
|
||||||
|
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
|
||||||
|
@ A B C D E F G H I J K L M N O
|
||||||
|
P Q R S T U V W X Y Z [ \ ] ^ _
|
||||||
|
` a b c d e f g h i j k l m n o
|
||||||
|
p q r s t u v w x y z { | } ~ </pre>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<article id="text__inline">
|
||||||
|
<header>
|
||||||
|
<h1>Inline elements</h1></header>
|
||||||
|
<div>
|
||||||
|
<p><a href="#!">This is a text link</a>.</p>
|
||||||
|
<p><strong>Strong is used to indicate strong importance.</strong></p>
|
||||||
|
<p><em>This text has added emphasis.</em></p>
|
||||||
|
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
|
||||||
|
<p>The <i>i element</i> is text that is offset from the normal text.</p>
|
||||||
|
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
|
||||||
|
<p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
|
||||||
|
<p><s>This text has a strikethrough</s>.</p>
|
||||||
|
<p>Superscript<sup>®</sup>.</p>
|
||||||
|
<p>Subscript for things like H<sub>2</sub>O.</p>
|
||||||
|
<p><small>This small text is small for for fine print, etc.</small></p>
|
||||||
|
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
|
||||||
|
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
|
||||||
|
<p><cite>This is a citation.</cite></p>
|
||||||
|
<p>The <dfn>dfn element</dfn> indicates a definition.</p>
|
||||||
|
<p>The <mark>mark element</mark> indicates a highlight.</p>
|
||||||
|
<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
|
||||||
|
<p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="embedded">
|
||||||
|
<header>
|
||||||
|
<h1>Embedded content</h1></header>
|
||||||
|
<article id="embedded__images">
|
||||||
|
<header>
|
||||||
|
<h2>Images</h2></header>
|
||||||
|
<div>
|
||||||
|
<h3>No <code><figure></code> element</h3>
|
||||||
|
<p><img src="http://unsplash.it/480/480" alt="Image alt text"></p>
|
||||||
|
<h3>Wrapped in a <code><figure></code> element, no <code><figcaption></code></h3>
|
||||||
|
<figure><img src="http://unsplash.it/420/420" alt="Image alt text"></figure>
|
||||||
|
<h3>Wrapped in a <code><figure></code> element, with a <code><figcaption></code></h3>
|
||||||
|
<figure>
|
||||||
|
<img src="http://unsplash.it/420/420" alt="Image alt text">
|
||||||
|
<figcaption>Here is a caption for this image.</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<article id="embedded__audio">
|
||||||
|
<header>
|
||||||
|
<h2>Audio</h2></header>
|
||||||
|
<div><audio controls="">audio</audio></div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<article id="embedded__video">
|
||||||
|
<header>
|
||||||
|
<h2>Video</h2></header>
|
||||||
|
<div><video controls="">video</video></div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<article id="embedded__canvas">
|
||||||
|
<header>
|
||||||
|
<h2>Canvas</h2></header>
|
||||||
|
<div><canvas>canvas</canvas></div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<article id="embedded__meter">
|
||||||
|
<header>
|
||||||
|
<h2>Meter</h2></header>
|
||||||
|
<div><meter value="2" min="0" max="10">2 out of 10</meter></div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<article id="embedded__progress">
|
||||||
|
<header>
|
||||||
|
<h2>Progress</h2></header>
|
||||||
|
<div><progress>progress</progress></div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<article id="embedded__svg">
|
||||||
|
<header>
|
||||||
|
<h2>Inline SVG</h2></header>
|
||||||
|
<div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<article id="embedded__iframe">
|
||||||
|
<header>
|
||||||
|
<h2>IFrame</h2></header>
|
||||||
|
<div><iframe src="index.html" height="300"></iframe></div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
<section id="forms">
|
||||||
|
<header>
|
||||||
|
<h1>Form elements</h1></header>
|
||||||
|
<form>
|
||||||
|
<fieldset id="forms__input">
|
||||||
|
<legend>Input fields</legend>
|
||||||
|
<p>
|
||||||
|
<label for="input__text">Text Input</label>
|
||||||
|
<input id="input__text" type="text" placeholder="Text Input">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="input__password">Password</label>
|
||||||
|
<input id="input__password" type="password" placeholder="Type your Password">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="input__webaddress">Web Address</label>
|
||||||
|
<input id="input__webaddress" type="url" placeholder="http://yoursite.com">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="input__emailaddress">Email Address</label>
|
||||||
|
<input id="input__emailaddress" type="email" placeholder="name@email.com">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="input__phone">Phone Number</label>
|
||||||
|
<input id="input__phone" type="tel" placeholder="(999) 999-9999">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="input__search">Search</label>
|
||||||
|
<input id="input__search" type="search" placeholder="Enter Search Term">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="input__text2">Number Input</label>
|
||||||
|
<input id="input__text2" type="number" placeholder="Enter a Number">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="input__text3" class="error">Error</label>
|
||||||
|
<input id="input__text3" class="is-error" type="text" placeholder="Text Input">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="input__text4" class="valid">Valid</label>
|
||||||
|
<input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="input__text">Disabled Text Input</label>
|
||||||
|
<input id="input__text" type="text" placeholder="Disabled Text Input" disabled>
|
||||||
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
<fieldset id="forms__select">
|
||||||
|
<legend>Select menus</legend>
|
||||||
|
<p>
|
||||||
|
<label for="select">Select</label>
|
||||||
|
<select id="select">
|
||||||
|
<optgroup label="Option Group">
|
||||||
|
<option>Option One</option>
|
||||||
|
<option>Option Two</option>
|
||||||
|
<option>Option Three</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
<fieldset id="forms__checkbox">
|
||||||
|
<legend>Checkboxes</legend>
|
||||||
|
<ul class="list list--bare">
|
||||||
|
<li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
|
||||||
|
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
|
||||||
|
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
|
||||||
|
</ul>
|
||||||
|
</fieldset>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
<fieldset id="forms__radio">
|
||||||
|
<legend>Radio buttons</legend>
|
||||||
|
<ul class="list list--bare">
|
||||||
|
<li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
|
||||||
|
<li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
|
||||||
|
<li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
|
||||||
|
</ul>
|
||||||
|
</fieldset>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
<fieldset id="forms__textareas">
|
||||||
|
<legend>Textareas</legend>
|
||||||
|
<p>
|
||||||
|
<label for="textarea">Textarea</label>
|
||||||
|
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
|
||||||
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
<fieldset id="forms__html5">
|
||||||
|
<legend>HTML5 inputs</legend>
|
||||||
|
<p>
|
||||||
|
<label for="ic">Color input</label>
|
||||||
|
<input type="color" id="ic" value="#000000">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="in">Number input</label>
|
||||||
|
<input type="number" id="in" min="0" max="10" value="5">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="ir">Range input</label>
|
||||||
|
<input type="range" id="ir" value="10">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="idd">Date input</label>
|
||||||
|
<input type="date" id="idd" value="1970-01-01">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="idm">Month input</label>
|
||||||
|
<input type="month" id="idm" value="1970-01">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="idw">Week input</label>
|
||||||
|
<input type="week" id="idw" value="1970-W01">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="idt">Datetime input</label>
|
||||||
|
<input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="idtl">Datetime-local input</label>
|
||||||
|
<input type="datetime-local" id="idtl" value="1970-01-01T00:00">
|
||||||
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
<fieldset id="forms__action">
|
||||||
|
<legend>Action buttons</legend>
|
||||||
|
<p>
|
||||||
|
<input type="submit" value="<input type=submit>">
|
||||||
|
<input type="button" value="<input type=button>">
|
||||||
|
<input type="reset" value="<input type=reset>">
|
||||||
|
<input type="submit" value="<input disabled>" disabled>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<button type="submit"><button type=submit></button>
|
||||||
|
<button type="button"><button type=button></button>
|
||||||
|
<button type="reset"><button type=reset></button>
|
||||||
|
<button type="button" disabled><button disabled></button>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a href="#" class="button">a.button</a>
|
||||||
|
<a href="#" class="button primary">a.button.primary</a>
|
||||||
|
<a href="#" class="button outline">a.button.outline</a>
|
||||||
|
<a href="#" class="button outline primary">a.button.outline.primary</a>
|
||||||
|
<a href="#" class="button clear">a.button.clear</a>
|
||||||
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user