Merge branch 'gh-pages'

* gh-pages: move docs Docs till customizing Update index.html Highlight color adjust syntax highlight Update index.html Basic docs # Conflicts: # README.md
2023-08-10 21:13:07 +03:00 · 2017-03-31 22:14:23 -04:00 · 2017-03-31 22:14:23 -04:00 · 46030f0e46
commit 46030f0e46
parent 6d1f8c4019 549c994515
5 changed files with 227 additions and 21 deletions
--- a/21
+++ b/21
@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2017 Jenil Gogari
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
--- a/docs/README.md
+++ b/docs/README.md
@ -0,0 +1,9 @@
+# chota
+A really small CSS framework. 
+
+Full details on [master](https://github.com/jenil/chota/blob/master/README.md)
+
+To run docs locally first install Jekyll and then run:
+```
+jekyll serve
+```
--- a/docs/doc-styles.css
+++ b/docs/doc-styles.css
@ -0,0 +1,109 @@
+.hero {
+    display: flex;
+    flex-direction: column;
+}
+
+code {
+  background-color: #f7f7f7;
+  color: #c62424;
+  white-space: pre-wrap;
+  padding: 0.2em 0.4em;
+}
+
+pre code {
+  background: none;
+}
+
+.logo {
+    flex: 1;
+    flex-direction: column;
+}
+
+.logo svg {
+    width: 100%;
+    max-width: 300px;
+}
+
+.logo h3 {
+  font-weight: 300;
+}
+
+footer {
+    background-color: #fafafa;
+    padding: 4rem;
+}
+
+section {
+    max-width: 700px;
+    margin: 5rem auto;
+}
+
+.highlight, code { background-color: #f1f5f5; }
+.highlight .c { color: #93a1a1 } /* Comment */
+.highlight .err { color: #586e75 } /* Error */
+.highlight .g { color: #586e75 } /* Generic */
+.highlight .k { color: #859900 } /* Keyword */
+.highlight .l { color: #586e75 } /* Literal */
+.highlight .n { color: #586e75 } /* Name */
+.highlight .o { color: #859900 } /* Operator */
+.highlight .x { color: #cb4b16 } /* Other */
+.highlight .p { color: #586e75 } /* Punctuation */
+.highlight .cm { color: #93a1a1 } /* Comment.Multiline */
+.highlight .cp { color: #859900 } /* Comment.Preproc */
+.highlight .c1 { color: #93a1a1 } /* Comment.Single */
+.highlight .cs { color: #859900 } /* Comment.Special */
+.highlight .gd { color: #2aa198 } /* Generic.Deleted */
+.highlight .ge { color: #586e75; font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #dc322f } /* Generic.Error */
+.highlight .gh { color: #cb4b16 } /* Generic.Heading */
+.highlight .gi { color: #859900 } /* Generic.Inserted */
+.highlight .go { color: #586e75 } /* Generic.Output */
+.highlight .gp { color: #586e75 } /* Generic.Prompt */
+.highlight .gs { color: #586e75; font-weight: bold } /* 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 */
--- a/docs/index.html
+++ b/docs/index.html
@ -0,0 +1,99 @@
+---
+---
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+  <title>chota - A small CSS framework</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://unpkg.com/chota">
+  <link rel="stylesheet" href="./doc-styles.css">
+</head>
+
+<body>
+  <div class="container">
+    <div class="hero is-full-screen">
+      <div class="logo is-center is-vertical-align">
+        <img src="./logo.svg" alt="">
+        <h3>A <strong>small</strong> (3kb) CSS framework.</h3>
+      </div>
+      <div class="row is-center">
+        <div class="col-3">
+          <nav class="tabs">
+            <a href="#features">features</a>
+            <a href="#start">start</a>
+            <a href="#docs">docs</a>
+            <a href="https://github.com/jenil/chota">github</a>
+          </nav>
+        </div>
+      </div>
+    </div>
+    <section id="features">
+      <h2>Features</h2>
+      <ul>
+        <li>⚡️&nbsp; Super light-weight. Just 3kb (minified + gzipped).</li>
+        <li>⛔️&nbsp; No preprocessor, just plug-n-play</li>
+        <li>📐&nbsp; Magical 12 column grid</li>
+        <li>🌈&nbsp; Easy to extended with CSS variables</li>
+        <li>🎲&nbsp; Comes with a handful of components &amp; utilities</li>
+        <li>✅&nbsp; Good Semantics</li>
+      </ul>
+    </section>
+    <section id="start">
+      <h2>Getting Started</h2>
+      <p>All you need is 1 CSS file, <code>chota.css</code> to be included in your webpage.</p>
+      <p>Link this CSS in your HTML:</p>
+      {% highlight html %}<link rel="stylesheet" href="https://unpkg.com/chota">{% endhighlight %}
+      <br>
+      <p>You can download it from Github or install it from <code>npm</code> or <code>yarn</code>:</p>
+      {% highlight bash %} npm install chota {% endhighlight %}
+    </section>
+    <section id="docs">
+      <h2>Docs</h2>
+      <p class="catch">
+        Chota is <em>dead</em> simple to use. It doesn't require learning a lot of class names like other frameworks. It applies a few basic styles to the HTML following the <a href="https://www.w3schools.com/html/html5_semantic_elements.asp" target="_blank">HTML Semenatics</a>.
+      </p>
+      <p>Here is a <a href="https://rawgit.com/jenil/chota/master/test/index.html">demo</a>.</p>
+
+      <h3>Customizing</h3>
+      <p>Chota comes with a basic set of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSS variables</a>:</p>
+{% highlight css %}
+:root {
+    --primary-color: #1a9f60;
+    --lightGrey-color: #ddd;
+    --grid-maxWidth: 120rem;
+    --grid-gutter: 1.5rem;
+    --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+{% endhighlight %}
+    <p>To override the variables, just add them to your <code>:root</code> selector after importing <code>chota.css</code></p>
+{% highlight css %}
+@import url(chota.css)
+
+:root {
+    --primary-color: #da1d50; /* brand color */
+    --grid-maxWidth: 108rem; /* max container width 1080px */
+}
+
+/* Other styles..... */
+{% endhighlight %}
+    </section>
+  </div>
+  <footer class="is-text-center">
+    <h5>Made by <a href="//jgog.in">Jenil Gogari</a></h5>
+  </footer>
+  <script>
+    (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),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-91125324-3', 'auto');
+    ga('send', 'pageview');
+
+  </script>
+</body>
+
+</html>
--- a/docs/logo.svg
+++ b/docs/logo.svg