From fab7d3607e52b3610e8ea77b03445cced728f838 Mon Sep 17 00:00:00 2001 From: Jenil Gogari Date: Fri, 31 Mar 2017 21:57:06 -0400 Subject: [PATCH] Docs till customizing --- README.md | 9 ++++++++- doc-styles.css | 13 ++++++++++++- index.html | 50 +++++++++++++++++++++++++++++++++++++++----------- 3 files changed, 59 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 3dc20e3..101ba4f 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,9 @@ # chota -A really small CSS framework +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 +``` diff --git a/doc-styles.css b/doc-styles.css index cc7e90c..dfc9436 100644 --- a/doc-styles.css +++ b/doc-styles.css @@ -3,6 +3,17 @@ 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; @@ -27,7 +38,7 @@ section { margin: 5rem auto; } - +.highlight, code { background-color: #f1f5f5; } .highlight .c { color: #93a1a1 } /* Comment */ .highlight .err { color: #586e75 } /* Error */ .highlight .g { color: #586e75 } /* Generic */ diff --git a/index.html b/index.html index b0d2a0a..c0bc729 100644 --- a/index.html +++ b/index.html @@ -22,8 +22,10 @@
@@ -42,19 +44,45 @@

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:

- {% highlight html %} - - {% endhighlight %} -

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

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

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

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

Docs

+

+ Chota is dead 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 HTML Semenatics. +

+

Here is a demo.

+ +

Customizing

+

Chota comes with a basic set of CSS variables:

+{% 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 %} +

To override the variables, just add them to your :root selector after importing chota.css

+{% highlight css %} +@import url(chota.css) + +:root { + --primary-color: #da1d50; /* brand color */ + --grid-maxWidth: 108rem; /* max container width 1080px */ +} + +/* Other styles..... */ +{% endhighlight %}