2020-05-16 23:38:29 +03:00
<!DOCTYPE html>
2017-03-30 08:00:14 +03:00
< html lang = "en" >
2020-05-16 23:38:29 +03:00
< 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.css" / >
< style >
body.dark {
--bg-color: #000;
--bg-secondary-color: #131316;
--font-color: #f5f5f5;
--color-grey: #ccc;
--color-darkGrey: #777;
}
< / style >
< / head >
2017-03-30 08:00:14 +03:00
2020-05-16 23:38:29 +03:00
< body >
< div id = "top" class = "container" role = "document" >
< header role = "banner" >
< h1 class = "pull-right" style = "margin: 0;" >
< a href = "javascript:void(0)" onclick = "switchMode(this)" > ☀️< / a >
< / h1 >
< h1 > Chota CSS< / h1 >
< div class = "clearfix" > < / div >
< p > A small CSS framework.< / p >
< / header >
< nav role = "navigation" >
< ul >
< li >
< a href = "#text" > Text< / a >
2017-03-30 08:00:14 +03:00
< ul >
2020-05-16 23:38:29 +03:00
< 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 >
2017-03-30 08:00:14 +03:00
< / ul >
2020-05-16 23:38:29 +03:00
< / 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" >
2017-03-30 08:00:14 +03:00
< header >
2020-05-16 23:38:29 +03:00
< 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 >
< / tbody >
< / table >
< br / >
< h4 >
Table with strips. Just add the < code > striped< / code > class to
< code > < table> < / code > .
< / h4 >
< table class = "striped" >
< 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
2017-03-30 08:00:14 +03:00
! " # $ % & ' ( ) * + , - . /
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
2017-09-27 22:04:48 +03:00
p q r s t u v w x y z { | } ~
2020-05-16 23:38:29 +03:00
~ 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
>
< pre > < code > < h2> Pre-formatted text< /h2> < / code > < / 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 >
2017-03-30 08:00:14 +03:00
2020-05-16 23:38:29 +03:00
< section id = "embedded" >
2017-03-30 08:00:14 +03:00
< header >
2020-05-16 23:38:29 +03:00
< 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" >
2017-03-30 08:00:14 +03:00
< header >
2020-05-16 23:38:29 +03:00
< 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="error"
type="text"
placeholder="Text Input"
/>
< / p >
< p >
< label for = "input__text4" class = "success" > Valid< / label >
< input
id="input__text4"
class="success"
type="text"
placeholder="Text Input"
/>
< / p >
< p >
< label for = "input__text5" > Disabled Text Input< / label >
< input
id="input__text5"
type="text"
placeholder="Disabled Text Input"
disabled
/>
< / p >
< p class = "grouped" >
< input
type="search"
name="input__text6"
id="input__text6"
placeholder="Search"
/>
< button class = "button icon-only" >
< img src = "https://icongr.am/feather/search.svg?size=16" / >
< / button >
< / p >
< p class = "grouped" >
< input
type="text"
name="input__text7"
id="input__text7"
placeholder="Username"
/>
< input
type="text"
name="input__text8"
id="input__text8"
placeholder="Password"
/>
< button class = "button primary" > Submit< / button >
< / p >
< / fieldset >
2017-03-30 08:00:14 +03:00
< p > < a href = "#top" > [Top]< / a > < / p >
2020-05-16 23:38:29 +03:00
< fieldset id = "forms__select" >
< legend > Select menus< / legend >
< p >
< label for = "select" > Select< / label >
< select id = "select" >
2017-03-30 08:00:14 +03:00
< optgroup label = "Option Group" >
< option > Option One< / option >
< option > Option Two< / option >
< option > Option Three< / option >
< / optgroup >
< / select >
2020-05-16 23:38:29 +03:00
< / 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 secondary" > a.button.secondary< / a >
< a href = "#" class = "button dark" > a.button.dark< / a >
< a href = "#" class = "button error" > a.button.error< / a >
< a href = "#" class = "button success" > a.button.success< / a >
< / p >
< p >
< a href = "#" class = "button outline" > a.button.outline< / a >
< a href = "#" class = "button outline primary"
>a.button.outline.primary< /a
>
< a href = "#" class = "button outline secondary"
>a.button.outline.secondary< /a
>
< a href = "#" class = "button outline dark"
>a.button.outline.dark< /a
>
< a href = "#" class = "button clear" > a.button.clear< / a >
< / p >
< / fieldset >
< p > < a href = "#top" > [Top]< / a > < / p >
< / form >
< / section >
< / main >
< / div >
< script src = "../docs/main.js" > < / script >
< / body >
2017-03-30 08:00:14 +03:00
< / html >
