From 27f8ded65eb80640d044cbf30e3a334e8966e3fc Mon Sep 17 00:00:00 2001 From: Jenil Gogari Date: Fri, 31 Mar 2017 18:29:57 -0400 Subject: [PATCH 1/7] Basic docs --- .gitignore | 3 +++ Gemfile | 2 ++ LICENSE | 21 ------------------- doc-styles.css | 28 +++++++++++++++++++++++++ index.html | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++ logo.svg | 10 +++++++++ 6 files changed, 98 insertions(+), 21 deletions(-) create mode 100644 .gitignore create mode 100644 Gemfile delete mode 100644 LICENSE create mode 100644 doc-styles.css create mode 100644 index.html create mode 100644 logo.svg diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7a4438e --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules +_site +*.lock diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..37f5eaa --- /dev/null +++ b/Gemfile @@ -0,0 +1,2 @@ +source 'https://rubygems.org' +gem 'github-pages', group: :jekyll_plugins diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 869751e..0000000 --- a/LICENSE +++ /dev/null @@ -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. diff --git a/doc-styles.css b/doc-styles.css new file mode 100644 index 0000000..ac735ce --- /dev/null +++ b/doc-styles.css @@ -0,0 +1,28 @@ +.hero { + display: flex; + flex-direction: column; +} + +.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; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..62ca613 --- /dev/null +++ b/index.html @@ -0,0 +1,55 @@ + + + + + + + chota.css - A really small CSS framework + + + + + + +
+
+ +
+
+ +
+
+
+
+

Features

+
    +
  • ⚡️  Super light-weight. Just 3kb (minified + gzipped).
    • +
  • ⛔️  No preprocessor, just plug-n-play
    • +
  • 📐  Magical 12 column grid
    • +
  • 🌈  Easy to extended with CSS variables
    • +
  • 🎲  Comes with a handful of components & utilities
    • +
  • ✅  Good Semantics
    • +
+
+
+

Getting Started

+

All you need is 1 CSS file, chota.css to be included in your webpage.

+
Easiest way
+

Link this CSS in your HTML:

+ 
https://unpkg.com/chota
+

You can download it from Github or install it from npm or yarn:

+ 
npm install chota
+
+
+ + + + diff --git a/logo.svg b/logo.svg new file mode 100644 index 0000000..d619e04 --- /dev/null +++ b/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + From 0b576e71e4df4e1af126013d33d07a15fda49870 Mon Sep 17 00:00:00 2001 From: Jenil Gogari Date: Fri, 31 Mar 2017 18:34:45 -0400 Subject: [PATCH 2/7] Update index.html --- index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 62ca613..093e3ad 100644 --- a/index.html +++ b/index.html @@ -42,7 +42,9 @@

All you need is 1 CSS file, chota.css to be included in your webpage.

Easiest way

Link this CSS in your HTML:

- 
https://unpkg.com/chota
+ {% highlight ruby %} + + {% endhighlight %}

You can download it from Github or install it from npm or yarn:

npm install chota
From 27ad97c6f610a6483f60325eb008ec0462477a30 Mon Sep 17 00:00:00 2001 From: Jenil Gogari Date: Fri, 31 Mar 2017 19:36:04 -0400 Subject: [PATCH 3/7] syntax highlight --- Gemfile | 2 -- doc-styles.css | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 10 ++++--- 3 files changed, 79 insertions(+), 5 deletions(-) delete mode 100644 Gemfile diff --git a/Gemfile b/Gemfile deleted file mode 100644 index 37f5eaa..0000000 --- a/Gemfile +++ /dev/null @@ -1,2 +0,0 @@ -source 'https://rubygems.org' -gem 'github-pages', group: :jekyll_plugins diff --git a/doc-styles.css b/doc-styles.css index ac735ce..b7168f5 100644 --- a/doc-styles.css +++ b/doc-styles.css @@ -26,3 +26,75 @@ section { max-width: 700px; margin: 5rem auto; } + + +/*https://github.com/richleland/pygments-css/*/ +.highlight .hll { background-color: #ffffcc } +.highlight { background: #f8f8f8; } +.highlight .c { color: #408080; font-style: italic } /* Comment */ +.highlight .err { border: 1px solid #FF0000 } /* Error */ +.highlight .k { color: #008000; font-weight: bold } /* Keyword */ +.highlight .o { color: #666666 } /* Operator */ +.highlight .ch { color: #408080; font-style: italic } /* Comment.Hashbang */ +.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #BC7A00 } /* Comment.Preproc */ +.highlight .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */ +.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #A00000 } /* Generic.Deleted */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #FF0000 } /* Generic.Error */ +.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */ +.highlight .gi { color: #00A000 } /* Generic.Inserted */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ +.highlight .gt { color: #0044DD } /* Generic.Traceback */ +.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */ +.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */ +.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */ +.highlight .kp { color: #008000 } /* Keyword.Pseudo */ +.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #B00040 } /* Keyword.Type */ +.highlight .m { color: #666666 } /* Literal.Number */ +.highlight .s { color: #BA2121 } /* Literal.String */ +.highlight .na { color: #7D9029 } /* Name.Attribute */ +.highlight .nb { color: #008000 } /* Name.Builtin */ +.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */ +.highlight .no { color: #880000 } /* Name.Constant */ +.highlight .nd { color: #AA22FF } /* Name.Decorator */ +.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */ +.highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #0000FF } /* Name.Function */ +.highlight .nl { color: #A0A000 } /* Name.Label */ +.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */ +.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */ +.highlight .nv { color: #19177C } /* Name.Variable */ +.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mb { color: #666666 } /* Literal.Number.Bin */ +.highlight .mf { color: #666666 } /* Literal.Number.Float */ +.highlight .mh { color: #666666 } /* Literal.Number.Hex */ +.highlight .mi { color: #666666 } /* Literal.Number.Integer */ +.highlight .mo { color: #666666 } /* Literal.Number.Oct */ +.highlight .sa { color: #BA2121 } /* Literal.String.Affix */ +.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */ +.highlight .sc { color: #BA2121 } /* Literal.String.Char */ +.highlight .dl { color: #BA2121 } /* Literal.String.Delimiter */ +.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */ +.highlight .s2 { color: #BA2121 } /* Literal.String.Double */ +.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */ +.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */ +.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */ +.highlight .sx { color: #008000 } /* Literal.String.Other */ +.highlight .sr { color: #BB6688 } /* Literal.String.Regex */ +.highlight .s1 { color: #BA2121 } /* Literal.String.Single */ +.highlight .ss { color: #19177C } /* Literal.String.Symbol */ +.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */ +.highlight .fm { color: #0000FF } /* Name.Function.Magic */ +.highlight .vc { color: #19177C } /* Name.Variable.Class */ +.highlight .vg { color: #19177C } /* Name.Variable.Global */ +.highlight .vi { color: #19177C } /* Name.Variable.Instance */ +.highlight .vm { color: #19177C } /* Name.Variable.Magic */ +.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */ diff --git a/index.html b/index.html index 093e3ad..76084ee 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,12 @@ +--- +--- - chota.css - A really small CSS framework + chota - A small CSS framework @@ -42,11 +44,13 @@

All you need is 1 CSS file, chota.css to be included in your webpage.

Easiest way

Link this CSS in your HTML:

- {% highlight ruby %} + {% highlight html %} {% endhighlight %}

You can download it from Github or install it from npm or yarn:

- 
npm install chota
+ {% highlight bash %} + npm install chota + {% endhighlight %}