mirror
/
chota
mirror of https://github.com/jenil/chota.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

update for dark mode 🌙

This commit is contained in:
Jenil Gogari 2020-05-16 16:38:29 -04:00
parent df8e6c9fc0
commit 6a5a35f124
8 changed files with 1441 additions and 1041 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
node_modules node_modules
_site _site
*.lock *.lock
.jekyll-cache

11
dist/chota.css vendored
View File

@ -129,6 +129,7 @@ kbd {
border-radius: 4px; border-radius: 4px;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
background-color: var(--bg-secondary-color); background-color: var(--bg-secondary-color);
color: var(--color-error);
} }
pre { pre {
background-color: var(--bg-secondary-color); background-color: var(--bg-secondary-color);
@ -731,11 +732,11 @@ button:disabled:hover {
margin: auto 1rem; margin: auto 1rem;
} }
.card { .card {
padding: 1rem 2rem; padding: 1rem 2rem;
border-radius: 4px; border-radius: 4px;
background: var(--bg-color); background: var(--bg-color);
-webkit-box-shadow: 0 1px 3px var(--color-grey); -webkit-box-shadow: 0 1px 3px var(--color-grey);
box-shadow: 0 1px 3px var(--color-grey); box-shadow: 0 1px 3px var(--color-grey);
} }
.card p:last-child { .card p:last-child {
margin: 0; margin: 0;

365
docs/doc-styles.css
View File

@ -1,152 +1,303 @@
body.dark { body.dark {
--bg-color: #000; --bg-color: #000;
--bg-secondary-color: #131316; --bg-secondary-color: #262626;
--font-color: #f5f5f5; --font-color: #f5f5f5;
--color-grey: #ccc; --color-grey: #bbb;
--color-darkGrey: #777; --color-darkGrey: #888;
--color-primary: #17c16f;
--color-error: #ea4f4f;
} }
body>.container { body > .container {
max-width: 720px; max-width: 720px;
} }
.hero { .hero {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.logo { .logo {
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
} }
.logo svg { .logo svg {
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;
} }
.logo h3 { .logo h3 {
font-weight: 300; font-weight: 300;
} }
body>footer { body > footer {
background-color: #fafafa; background-color: #fafafa;
padding: 4rem; padding: 4rem;
} }
body.dark>footer { body.dark > footer {
background-color: #1a1a1a; background-color: #262626;
} }
section { section {
margin: 5rem auto; margin: 5rem auto;
} }
#features ul { #features ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
font-size: 1.2em; font-size: 1.2em;
font-weight: 200; font-weight: 200;
} }
figure.highlight { figure.highlight {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
hr { hr {
margin: 3rem 0; margin: 3rem 0;
} }
#grid .card { #grid .card {
padding: 1rem 0rem; padding: 1rem 0rem;
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; box-shadow: none;
background-color: rgba(26, 159, 96, 0.2); background-color: rgba(26, 159, 96, 0.2);
font-size: 1.2rem; font-size: 1.2rem;
}
body.dark #grid .card {
background-color: rgba(26, 159, 96, 0.4);
}
body.dark .card {
box-shadow: 0 1px 3px var(--color-darkGrey);
} }
.buttons { .buttons {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
.buttons > * { .buttons > * {
margin: .5rem; margin: 0.5rem;
} }
.buttons > .button + .button { .buttons > .button + .button {
margin-left: .5rem; margin-left: 0.5rem;
} }
.highlight, code { background-color: var(--bg-secondary-color); } .highlight,
.highlight .c { color: #93a1a1 } /* Comment */ code {
.highlight .err { color: #586e75 } /* Error */ background-color: var(--bg-secondary-color);
.highlight .g { color: #586e75 } /* Generic */ }
.highlight .k { color: #859900 } /* Keyword */ .highlight .c {
.highlight .l { color: #586e75 } /* Literal */ color: #93a1a1;
.highlight .n { color: #586e75 } /* Name */ } /* Comment */
.highlight .o { color: #859900 } /* Operator */ .highlight .err {
.highlight .x { color: #cb4b16 } /* Other */ color: #586e75;
.highlight .p { color: #586e75 } /* Punctuation */ } /* Error */
.highlight .cm { color: #93a1a1 } /* Comment.Multiline */ .highlight .g {
.highlight .cp { color: #859900 } /* Comment.Preproc */ color: #586e75;
.highlight .c1 { color: #93a1a1 } /* Comment.Single */ } /* Generic */
.highlight .cs { color: #859900 } /* Comment.Special */ .highlight .k {
.highlight .gd { color: #2aa198 } /* Generic.Deleted */ color: #859900;
.highlight .ge { color: #586e75; font-style: italic } /* Generic.Emph */ } /* Keyword */
.highlight .gr { color: #dc322f } /* Generic.Error */ .highlight .l {
.highlight .gh { color: #cb4b16 } /* Generic.Heading */ color: #586e75;
.highlight .gi { color: #859900 } /* Generic.Inserted */ } /* Literal */
.highlight .go { color: #586e75 } /* Generic.Output */ .highlight .n {
.highlight .gp { color: #586e75 } /* Generic.Prompt */ color: #586e75;
.highlight .gs { color: #586e75; font-weight: bold } /* Generic.Strong */ } /* Name */
.highlight .gu { color: #cb4b16 } /* Generic.Subheading */ .highlight .o {
.highlight .gt { color: #586e75 } /* Generic.Traceback */ color: #859900;
.highlight .kc { color: #cb4b16 } /* Keyword.Constant */ } /* Operator */
.highlight .kd { color: #22b3eb } /* Keyword.Declaration */ .highlight .x {
.highlight .kn { color: #859900 } /* Keyword.Namespace */ color: #cb4b16;
.highlight .kp { color: #859900 } /* Keyword.Pseudo */ } /* Other */
.highlight .kr { color: #22b3eb } /* Keyword.Reserved */ .highlight .p {
.highlight .kt { color: #dc322f } /* Keyword.Type */ color: #586e75;
.highlight .ld { color: #586e75 } /* Literal.Date */ } /* Punctuation */
.highlight .m { color: #2aa198 } /* Literal.Number */ .highlight .cm {
.highlight .s { color: #2aa198 } /* Literal.String */ color: #93a1a1;
.highlight .na { color: #586e75 } /* Name.Attribute */ } /* Comment.Multiline */
.highlight .nb { color: #B58900 } /* Name.Builtin */ .highlight .cp {
.highlight .nc { color: #22b3eb } /* Name.Class */ color: #859900;
.highlight .no { color: #cb4b16 } /* Name.Constant */ } /* Comment.Preproc */
.highlight .nd { color: #22b3eb } /* Name.Decorator */ .highlight .c1 {
.highlight .ni { color: #cb4b16 } /* Name.Entity */ color: #93a1a1;
.highlight .ne { color: #cb4b16 } /* Name.Exception */ } /* Comment.Single */
.highlight .nf { color: #22b3eb } /* Name.Function */ .highlight .cs {
.highlight .nl { color: #586e75 } /* Name.Label */ color: #859900;
.highlight .nn { color: #586e75 } /* Name.Namespace */ } /* Comment.Special */
.highlight .nx { color: #586e75 } /* Name.Other */ .highlight .gd {
.highlight .py { color: #586e75 } /* Name.Property */ color: #2aa198;
.highlight .nt { color: #22b3eb } /* Name.Tag */ } /* Generic.Deleted */
.highlight .nv { color: #22b3eb } /* Name.Variable */ .highlight .ge {
.highlight .ow { color: #859900 } /* Operator.Word */ color: #586e75;
.highlight .w { color: #586e75 } /* Text.Whitespace */ font-style: italic;
.highlight .mf { color: #2aa198 } /* Literal.Number.Float */ } /* Generic.Emph */
.highlight .mh { color: #2aa198 } /* Literal.Number.Hex */ .highlight .gr {
.highlight .mi { color: #2aa198 } /* Literal.Number.Integer */ color: #dc322f;
.highlight .mo { color: #2aa198 } /* Literal.Number.Oct */ } /* Generic.Error */
.highlight .sb { color: #93a1a1 } /* Literal.String.Backtick */ .highlight .gh {
.highlight .sc { color: #2aa198 } /* Literal.String.Char */ color: #cb4b16;
.highlight .sd { color: #586e75 } /* Literal.String.Doc */ } /* Generic.Heading */
.highlight .s2 { color: #2aa198 } /* Literal.String.Double */ .highlight .gi {
.highlight .se { color: #cb4b16 } /* Literal.String.Escape */ color: #859900;
.highlight .sh { color: #586e75 } /* Literal.String.Heredoc */ } /* Generic.Inserted */
.highlight .si { color: #2aa198 } /* Literal.String.Interpol */ .highlight .go {
.highlight .sx { color: #2aa198 } /* Literal.String.Other */ color: #586e75;
.highlight .sr { color: #dc322f } /* Literal.String.Regex */ } /* Generic.Output */
.highlight .s1 { color: #2aa198 } /* Literal.String.Single */ .highlight .gp {
.highlight .ss { color: #2aa198 } /* Literal.String.Symbol */ color: #586e75;
.highlight .bp { color: #22b3eb } /* Name.Builtin.Pseudo */ } /* Generic.Prompt */
.highlight .vc { color: #22b3eb } /* Name.Variable.Class */ .highlight .gs {
.highlight .vg { color: #22b3eb } /* Name.Variable.Global */ color: #586e75;
.highlight .vi { color: #22b3eb } /* Name.Variable.Instance */ font-weight: bold;
.highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */ } /* Generic.Strong */
.highlight .gu {
color: #cb4b16;
} /* Generic.Subheading */
.highlight .gt {
color: #586e75;
} /* Generic.Traceback */
.highlight .kc {
color: #cb4b16;
} /* Keyword.Constant */
.highlight .kd {
color: #22b3eb;
} /* Keyword.Declaration */
.highlight .kn {
color: #859900;
} /* Keyword.Namespace */
.highlight .kp {
color: #859900;
} /* Keyword.Pseudo */
.highlight .kr {
color: #22b3eb;
} /* Keyword.Reserved */
.highlight .kt {
color: #dc322f;
} /* Keyword.Type */
.highlight .ld {
color: #586e75;
} /* Literal.Date */
.highlight .m {
color: #2aa198;
} /* Literal.Number */
.highlight .s {
color: #2aa198;
} /* Literal.String */
.highlight .na {
color: #586e75;
} /* Name.Attribute */
.highlight .nb {
color: #b58900;
} /* Name.Builtin */
.highlight .nc {
color: #22b3eb;
} /* Name.Class */
.highlight .no {
color: #cb4b16;
} /* Name.Constant */
.highlight .nd {
color: #22b3eb;
} /* Name.Decorator */
.highlight .ni {
color: #cb4b16;
} /* Name.Entity */
.highlight .ne {
color: #cb4b16;
} /* Name.Exception */
.highlight .nf {
color: #22b3eb;
} /* Name.Function */
.highlight .nl {
color: #586e75;
} /* Name.Label */
.highlight .nn {
color: #586e75;
} /* Name.Namespace */
.highlight .nx {
color: #586e75;
} /* Name.Other */
.highlight .py {
color: #586e75;
} /* Name.Property */
.highlight .nt {
color: #22b3eb;
} /* Name.Tag */
.highlight .nv {
color: #22b3eb;
} /* Name.Variable */
.highlight .ow {
color: #859900;
} /* Operator.Word */
.highlight .w {
color: #586e75;
} /* Text.Whitespace */
.highlight .mf {
color: #2aa198;
} /* Literal.Number.Float */
.highlight .mh {
color: #2aa198;
} /* Literal.Number.Hex */
.highlight .mi {
color: #2aa198;
} /* Literal.Number.Integer */
.highlight .mo {
color: #2aa198;
} /* Literal.Number.Oct */
.highlight .sb {
color: #93a1a1;
} /* Literal.String.Backtick */
.highlight .sc {
color: #2aa198;
} /* Literal.String.Char */
.highlight .sd {
color: #586e75;
} /* Literal.String.Doc */
.highlight .s2 {
color: #2aa198;
} /* Literal.String.Double */
.highlight .se {
color: #cb4b16;
} /* Literal.String.Escape */
.highlight .sh {
color: #586e75;
} /* Literal.String.Heredoc */
.highlight .si {
color: #2aa198;
} /* Literal.String.Interpol */
.highlight .sx {
color: #2aa198;
} /* Literal.String.Other */
.highlight .sr {
color: #dc322f;
} /* Literal.String.Regex */
.highlight .s1 {
color: #2aa198;
} /* Literal.String.Single */
.highlight .ss {
color: #2aa198;
} /* Literal.String.Symbol */
.highlight .bp {
color: #22b3eb;
} /* Name.Builtin.Pseudo */
.highlight .vc {
color: #22b3eb;
} /* Name.Variable.Class */
.highlight .vg {
color: #22b3eb;
} /* Name.Variable.Global */
.highlight .vi {
color: #22b3eb;
} /* Name.Variable.Instance */
.highlight .il {
color: #2aa198;
} /* Literal.Number.Integer.Long */

25
docs/index.html
View File

@ -8,9 +8,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>chota - A micro CSS framework</title> <title>chota - A micro CSS framework</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/chota"> <!-- <link rel="stylesheet" href="https://unpkg.com/chota"> -->
<!-- for dev --> <!-- for dev -->
<!-- <link rel="stylesheet" href="./dist/chota.css"> --> <link rel="stylesheet" href="http://localhost:5000/dist/chota.css">
<link rel="stylesheet" href="./doc-styles.css"> <link rel="stylesheet" href="./doc-styles.css">
<link rel="icon" type="image/png" href="favicon.png" /> <link rel="icon" type="image/png" href="favicon.png" />
</head> </head>
@ -28,7 +28,7 @@
<a href="#start">start</a> <a href="#start">start</a>
<a href="#docs">docs</a> <a href="#docs">docs</a>
<a href="https://github.com/jenil/chota">GitHub</a> <a href="https://github.com/jenil/chota">GitHub</a>
<a href="javascript:void(0)" onclick="switchMode(this)">☀️</a> <a href="javascript:void(0)" id="theme-switch" onclick="switchMode(this)">☀️</a>
</nav> </nav>
</div> </div>
@ -113,7 +113,7 @@
/* Other styles..... */ /* Other styles..... */
{% endhighlight %} {% endhighlight %}
<br> <br>
<p>Addtionally, you can add dark mode to you site, to support devices that prefer dark mode.</p> <p>Addtionally, you can add dark mode to your site, to support devices that prefer dark mode.</p>
{% highlight html %} {% highlight html %}
<style> <style>
body.dark { body.dark {
@ -176,7 +176,22 @@
<p>Want icons for your project too? Checkout <a href="https://icongr.am" target="_blank">Icongr.am 🚀</a></p> <p>Want icons for your project too? Checkout <a href="https://icongr.am" target="_blank">Icongr.am 🚀</a></p>
<h5>Made by <a href="https://jgog.in" target="_blank">Jenil Gogari</a></h5> <h5>Made by <a href="https://jgog.in" target="_blank">Jenil Gogari</a></h5>
</footer> </footer>
<script src="./main.js"></script> <script>
if (
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
document.body.classList.add("dark");
document.querySelector('#theme-switch').innerHTML = "🌙"
}
function switchMode(el) {
const bodyClass = document.body.classList;
bodyClass.contains("dark")
? ((el.innerHTML = "☀️"), bodyClass.remove("dark"))
: ((el.innerHTML = "🌙"), bodyClass.add("dark"));
}
</script>
<script> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

1
src/_base.css
View File

@ -150,6 +150,7 @@ kbd {
border-radius: 4px; border-radius: 4px;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
background-color: var(--bg-secondary-color); background-color: var(--bg-secondary-color);
color: var(--color-error);
} }
pre { pre {

8
src/_card.css
View File

@ -1,8 +1,8 @@
.card { .card {
padding: 1rem 2rem; padding: 1rem 2rem;
border-radius: 4px; border-radius: 4px;
background: var(--bg-color); background: var(--bg-color);
box-shadow: 0 1px 3px var(--color-grey); box-shadow: 0 1px 3px var(--color-grey);
} }
.card p:last-child { .card p:last-child {

804
test/components.html
View File

@ -1,432 +1,452 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Components</title>
<link rel="stylesheet" href="../dist/chota.css" />
<style>
.nav {
border: 1px solid red;
}
<head> body.dark {
<meta charset="utf-8"> --bg-color: #000;
<meta name="viewport" content="width=device-width, initial-scale=1.0"> --bg-secondary-color: #131316;
<title>Components</title> --font-color: #f5f5f5;
<link rel="stylesheet" href="../dist/chota.css"> --color-grey: #ccc;
<style> --color-darkGrey: #777;
.nav { }
border: 1px solid red; </style>
} </head>
body.dark {
--bg-color: #000;
--bg-secondary-color: #131316;
--font-color: #f5f5f5;
--color-grey: #ccc;
--color-darkGrey: #777;
}
</style>
</head>
<body> <body>
<div class="container">
<h1 class="pull-right" style="margin: 0;">
<a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
</h1>
<h1>Nav</h1>
</div>
<div class="clearfix" ></div>
<nav class="nav">
<div class="container"> <div class="container">
<h1 class="pull-right" style="margin: 0;">
<a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
</h1>
<h1>Nav</h1>
</div>
<div class="clearfix"></div>
<nav class="nav">
<div class="container">
<div class="nav-left">
<a class="brand" href="#">Logo</a>
</div>
<div class="nav-center">
<a class="button outline" 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" class="active">Link 3</a>
</div>
</div>
</nav>
<br />
<hr />
<br />
<nav class="nav">
<div class="nav-left"> <div class="nav-left">
<a class="brand" href="#">Logo</a> <a class="brand" href="#">Logo</a>
</div> </div>
<div class="nav-center"> <div class="nav-center">
<a class="button outline" href="#">Centered</a> <a href="#">Centered</a>
</div> </div>
<div class="nav-right"> <div class="nav-right">
<a href="#!1.html">Link 1</a> <a href="#!1.html">Link 1</a>
<a href="#!2.html">Link 2</a> <a href="#!2.html">Link 2</a>
<a href="#!3.html" class="active">Link 3</a> <a href="#!3.html">Link 3</a>
</div> </div>
</div> </nav>
</nav> <div class="container">
<br> <section>
<hr> <br />
<br> <hr />
<nav class="nav"> <br />
<div class="nav-left"> <nav class="nav">
<a class="brand" href="#">Logo</a> <div class="nav-center">
</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>
</nav>
<div class="container">
<section>
<br>
<hr>
<br>
<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" class="active">Link 3</a>
<a href="#!" class="button primary">Button</a>
</div>
</nav>
<br>
<hr>
<br>
<nav class="nav">
<div class="nav-left">
<a class="brand" href="#">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
Brand</a>
</div>
<div class="nav-right">
<div class="tabs">
<a href="#!1.html">Link 1</a> <a href="#!1.html">Link 1</a>
<a href="#!2.html">Link 2</a> <a href="#!2.html">Link 2</a>
<a href="#!3.html" class="active">Link 3</a> <a href="#!3.html" class="active">Link 3</a>
<a href="#!" class="button primary">Button</a>
</div>
</nav>
<br />
<hr />
<br />
<nav class="nav">
<div class="nav-left">
<a class="brand" href="#">
<img
src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
alt=""
/>
Brand</a
>
</div>
<div class="nav-right">
<div class="tabs">
<a href="#!1.html">Link 1</a>
<a href="#!2.html">Link 2</a>
<a href="#!3.html" class="active">Link 3</a>
</div>
</div>
</nav>
<br />
<hr />
<br />
<nav class="nav">
<div class="nav-left">
<a class="brand" href="#">
<img
src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
alt=""
/>
</a>
<div class="tabs">
<a href="#!1.html">Link 1</a>
<a href="#!2.html">Link 2</a>
<a href="#!3.html">Link 3</a>
</div>
</div>
</nav>
<br />
<hr />
<br />
</section>
<section>
<h1>Tabs</h1>
<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>
<br />
<hr />
<br />
<div class="tabs is-full">
<a class="active" href="#!1.html">Tab 1</a>
<a href="#!2.html">Tab 2</a>
<a href="#!3.html">Tab 3</a>
</div>
</section>
<section>
<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>
</div> </div>
</nav> </section>
<br> <section>
<hr> <h1>Tag</h1>
<br> <p>
<nav class="nav"> <span class="tag">One</span>
<div class="nav-left"> <span class="tag">Two</span>
<a class="brand" href="#"> <span class="tag">Three</span>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt=""> <span class="tag is-small">Small</span>
</a> <span class="tag is-large">Large</span>
<div class="tabs"> </p>
<a href="#!1.html">Link 1</a> </section>
<a href="#!2.html">Link 2</a> <section>
<a href="#!3.html">Link 3</a> <h1>Grid</h1>
<div class="row">
<div class="col">
<div class="card is-center">.col</div>
</div> </div>
</div> </div>
</nav> <div class="row">
<br> <div class="col">
<hr> <div class="card is-center">.col</div>
<br> </div>
</section> <div class="col">
<section> <div class="card is-center">.col</div>
<h1>Tabs</h1> </div>
<div class="tabs"> <div class="col">
<a class="active" href="#!1.html">Tab 1</a> <div class="card is-center">.col</div>
<a href="#!2.html">Tab 2</a>
<a href="#!3.html">Tab 3</a>
</div>
<br>
<hr>
<br>
<div class="tabs is-full">
<a class="active" href="#!1.html">Tab 1</a>
<a href="#!2.html">Tab 2</a>
<a href="#!3.html">Tab 3</a>
</div>
</section>
<section>
<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> </div>
<div class="col-6"> <div class="row">
<div class="card"> <div class="col-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et <div class="card is-center">.col-1</div>
dolore </div>
magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p> <div class="col-1">
<p>Ipsa magnam consequatur itaque, mollitia non quam voluptate consequuntur dignissimos recusandae ea quas, <div class="card is-center">.col-1</div>
nobis, </div>
debitis officia iure minus et dolore, reprehenderit sapiente iste. Eligendi eveniet ut qui at, deleniti <div class="col-1">
enim!</p> <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> </div>
</div> <div class="row">
</section> <div class="col-2">
<section> <div class="card is-center">.col-2</div>
<h1>Tag</h1> </div>
<p> <div class="col-2">
<span class="tag">One</span> <div class="card is-center">.col-2</div>
<span class="tag">Two</span> </div>
<span class="tag">Three</span> <div class="col-2">
<span class="tag is-small">Small</span> <div class="card is-center">.col-2</div>
<span class="tag is-large">Large</span> </div>
</p> <div class="col">
</section> <div class="card is-center">.col</div>
<section> </div>
<h1>Grid</h1>
<div class="row">
<div class="col">
<div class="card is-center">.col</div>
</div> </div>
</div> <div class="row">
<div class="row"> <div class="col-3">
<div class="col"> <div class="card is-center">.col-3</div>
<div class="card is-center">.col</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>
<div class="col"> <div class="row">
<div class="card is-center">.col</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 class="col-4">
<div class="card is-center">.col-4</div>
</div>
</div> </div>
<div class="col"> <div class="row">
<div class="card is-center">.col</div> <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>
</div> <div class="row">
<div class="row"> <div class="col-6">
<div class="col-1"> <div class="card is-center">.col-6</div>
<div class="card is-center">.col-1</div> </div>
<div class="col-6">
<div class="card is-center">.col-6</div>
</div>
</div> </div>
<div class="col-1"> <div class="row">
<div class="card is-center">.col-1</div> <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>
<div class="col-1"> <div class="row">
<div class="card is-center">.col-1</div> <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>
<div class="col-1"> <div class="row">
<div class="card is-center">.col-1</div> <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>
<div class="col-1"> <div class="row">
<div class="card is-center">.col-1</div> <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>
<div class="col-1"> <div class="row">
<div class="card is-center">.col-1</div> <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>
<div class="col-1"> <div class="row">
<div class="card is-center">.col-1</div> <div class="col-12">
<div class="card is-center">.col-12</div>
</div>
</div> </div>
<div class="col-1"> <h4>Responsive grids:</h4>
<div class="card is-center">.col-1</div> <div class="row">
<div class="col-12 col-6-md col-4-lg">
<div class="card is-center">.col-12.col-6-md.col-4-lg</div>
</div>
<div class="col-6 col-3-md col-4-lg">
<div class="card is-center">.col-6.col-3-md.col-4-lg</div>
</div>
<div class="col-6 col-3-md col-4-lg">
<div class="card is-center">.col-6.col-3-md.col-4-lg</div>
</div>
</div> </div>
<div class="col-1"> <div class="row">
<div class="card is-center">.col-1</div> <div class="col col-6-lg">
<div class="card is-center">.col.col-6-lg</div>
</div>
<div class="col col-3-lg">
<div class="card is-center">.col.col-3-lg</div>
</div>
<div class="col col-3-lg">
<div class="card is-center">.col.col-3-lg</div>
</div>
</div> </div>
<div class="col-1"> <div class="row">
<div class="card is-center">.col-1</div> <div class="col hide-sm">
<div class="card is-center">.hide-sm</div>
</div>
<div class="col hide-md">
<div class="card is-center">.hide-md</div>
</div>
<div class="col hide-lg">
<div class="card is-center">.hide-lg</div>
</div>
</div> </div>
<div class="col-1"> </section>
<div class="card is-center">.col-1</div> <section>
<h1>Helpers</h1>
<h4>Text color</h4>
<p class="text-primary">Primary</p>
<p class="text-light">Light</p>
<p class="text-grey">Grey</p>
<p class="text-dark">Dark</p>
<p class="text-error">Error</p>
<p class="text-success">Success</p>
<h4>Background color</h4>
<div class="row">
<div class="col">
<div class="card bg-primary">.bg-primary</div>
</div>
<div class="col">
<div class="card bg-light">.bg-light</div>
</div>
<div class="col">
<div class="card bg-grey">.bg-grey</div>
</div>
<div class="col">
<div class="card bg-dark">.bg-dark</div>
</div>
<div class="col">
<div class="card bg-success">.bg-success</div>
</div>
<div class="col">
<div class="card bg-error">.bg-error</div>
</div>
</div> </div>
<div class="col-1"> <h4>Responsive Helpers</h4>
<div class="card is-center">.col-1</div> <div class="hide-xs">.hide-xs</div>
</div> <div class="hide-sm">.hide-sm</div>
</div> <div class="hide-md">.hide-md</div>
<div class="row"> <div class="hide-lg">.hide-lg</div>
<div class="col-2"> </section>
<div class="card is-center">.col-2</div> <section>
</div> <h1>Icons</h1>
<div class="col-2"> <button type="button" class="button primary icon">
<div class="card is-center">.col-2</div> New file
</div> <img
<div class="col-2"> src="https://icongr.am/feather/file.svg?size=16&color=ffffff"
<div class="card is-center">.col-2</div> alt="icon"
</div> />
<div class="col"> </button>
<div class="card is-center">.col</div> <button type="button" class="button icon">
</div> New file
</div> <img src="https://icongr.am/feather/file.svg?size=12" alt="icon" />
<div class="row"> </button>
<div class="col-3"> <button type="button" class="button dark icon">
<div class="card is-center">.col-3</div> New file
</div> <img
<div class="col-3"> src="https://icongr.am/feather/file.svg?size=32&color=ffffff"
<div class="card is-center">.col-3</div> alt="icon"
</div> />
<div class="col-3"> </button>
<div class="card is-center">.col-3</div> <button class="button icon-only">
</div> <img src="https://icongr.am/feather/search.svg?size=16" />
<div class="col-3"> </button>
<div class="card is-center">.col-3</div> <button class="button icon-only">
</div> <img src="https://icongr.am/feather/search.svg" />
</div> </button>
<div class="row"> </section>
<div class="col-4"> </div>
<div class="card is-center">.col-4</div> <p>
</div> <br />
<div class="col-4"> </p>
<div class="card is-center">.col-4</div> <script src="../docs/main.js"></script>
</div> </body>
<div class="col-4"> </html>
<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>
<h4>Responsive grids:</h4>
<div class="row">
<div class="col-12 col-6-md col-4-lg">
<div class="card is-center">.col-12.col-6-md.col-4-lg</div>
</div>
<div class="col-6 col-3-md col-4-lg">
<div class="card is-center">.col-6.col-3-md.col-4-lg</div>
</div>
<div class="col-6 col-3-md col-4-lg">
<div class="card is-center">.col-6.col-3-md.col-4-lg</div>
</div>
</div>
<div class="row">
<div class="col col-6-lg">
<div class="card is-center">.col.col-6-lg</div>
</div>
<div class="col col-3-lg">
<div class="card is-center">.col.col-3-lg</div>
</div>
<div class="col col-3-lg">
<div class="card is-center">.col.col-3-lg</div>
</div>
</div>
<div class="row">
<div class="col hide-sm">
<div class="card is-center">.hide-sm</div>
</div>
<div class="col hide-md">
<div class="card is-center">.hide-md</div>
</div>
<div class="col hide-lg">
<div class="card is-center">.hide-lg</div>
</div>
</div>
</section>
<section>
<h1>Helpers</h1>
<h4>Text color</h4>
<p class="text-primary">Primary</p>
<p class="text-light">Light</p>
<p class="text-grey">Grey</p>
<p class="text-dark">Dark</p>
<p class="text-error">Error</p>
<p class="text-success">Success</p>
<h4>Background color</h4>
<div class="row">
<div class="col">
<div class="card bg-primary">.bg-primary</div>
</div>
<div class="col">
<div class="card bg-light">.bg-light</div>
</div>
<div class="col">
<div class="card bg-grey">.bg-grey</div>
</div>
<div class="col">
<div class="card bg-dark">.bg-dark</div>
</div>
<div class="col">
<div class="card bg-success">.bg-success</div>
</div>
<div class="col">
<div class="card bg-error">.bg-error</div>
</div>
</div>
<h4>Responsive Helpers</h4>
<div class="hide-xs">.hide-xs</div>
<div class="hide-sm">.hide-sm</div>
<div class="hide-md">.hide-md</div>
<div class="hide-lg">.hide-lg</div>
</section>
<section>
<h1>Icons</h1>
<button type="button" class="button primary icon">New file
<img src="https://icongr.am/feather/file.svg?size=16&color=ffffff" alt="icon">
</button>
<button type="button" class="button icon">New file
<img src="https://icongr.am/feather/file.svg?size=12" alt="icon">
</button>
<button type="button" class="button dark icon">New file
<img src="https://icongr.am/feather/file.svg?size=32&color=ffffff" alt="icon">
</button>
<button class="button icon-only">
<img src="https://icongr.am/feather/search.svg?size=16">
</button>
<button class="button icon-only">
<img src="https://icongr.am/feather/search.svg">
</button>
</section>
</div>
<p>
<br>
</p>
<script src="../docs/main.js"></script>
</body>
</html>

1267
test/index.html
View File

File diff suppressed because it is too large Load Diff