v1.0.0-beta

felixdorner · Dec 31, 2017 · 036feb9 · 036feb9
1 parent fb971a2
commit 036feb9
Show file tree

Hide file tree

Showing 32 changed files with 181 additions and 200 deletions.
diff --git a/README.md b/README.md
@@ -1,27 +1,45 @@
-# STARRRT
+# StarrrtCSS
 
 Object-oriented CSS boilerplate built on top of [PostCSS](http://postcss.org/) and [cssnext](http://cssnext.io/).
 
+## Usage
+
+Read the docs [here](https://felixdorner.github.io/starrrtcss/).
+
 ## Contributing
 
 Contributions are welcome:
 
-- Report bugs and make feature requests via the issue tracker
+- Report bugs and make feature requests via the [issue tracker](https://github.com/felixdorner/starrrtcss/issues)
 - Please ask first before working on any significant pull request
 
 ### Install Dependencies
 
-[Yarn](https://yarnpkg.com/) is used to manage front-end packages and task automation. From the command line on your host machine, navigate to the directory then run `yarn`.
+[Yarn](https://yarnpkg.com/) is used to manage front-end packages and task automation. After you forked the project navigate to the directory from the command line on your host machine, then run `yarn`.
 
 ### Build Commands
 
 `yarn watch` — Compile assets when file changes are made, copy dist files to docs  
 `yarn build` — Compile assets, copy dist files to docs
 
+### Working on the docs
+
+The docs are build with [Jekyll](https://jekyllrb.com/). Navigate to the /docs directory from the command line on your host machine, then run `jekyll serve`.
+
+### Versioning
+
+[SemVer](http://semver.org/) is used for versioning.
+
 ## Author
 
 **Felix Dorner**  
 *Design and development*
 
 - [Website](https://felixdorner.de)
 - [Twitter](https://twitter.com/felixdorner)
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](https://github.com/felixdorner/starrrtcsss/blob/master/LICENSE) file for details.
+
+Copyright © 2017-2018 Felix Dorner, All Rights Reserved.
diff --git a/changelog.md b/changelog.md
@@ -1,12 +1,17 @@
-# STARRRT Changelog
+# StarrrtCSS Changelog
+
+### *20171231* - 0.4.0 - 1.0.0-beta
+* **NEW** Docs: Favicon & social images
+* **TWEAK** Src: Base style improvements
+* **TWEAK** Docs: Improved wording
 
 ### *20171230* - 0.3.0 - 0.4.0
-* **NEW** New object-oriented architecture
-* **NEW** New design for docs
+* **NEW** Src: New object-oriented architecture
+* **NEW** Docs: New design for docs
 
 ### *20170428* - 0.2.0
-* **TWEAK** Updated docs (design and content)
-* **TWEAK** Enhanced file structure
+* **TWEAK** Docs: Updated docs (design and content)
+* **TWEAK** Src: Enhanced file structure
 * **DEV** Added PostCSS sorting config
 
 ### *20170326* - 0.1.0

diff --git a/dist/starrrt.css b/dist/starrrt.css
@@ -2,7 +2,7 @@
 /*!
 
   STARRRT
-  Version: 0.4.0
+  Version: 1.0.0-beta
   Author: Felix Dorner
   Demo URI: https://felixdorner.github.io/starrrt/
   Description: A minimal CSS starter-kit written with PostCSS & cssnext
@@ -267,7 +267,7 @@ i {
   font-style: italic;
 }
 address {
-  margin-bottom: 32px;
+  margin-bottom: 1.2em;
 }
 h1,
 h2,
@@ -334,17 +334,18 @@ big { font-size: 1.2em; }
 blockquote,
 q {
   clear: both;
-  margin: 0 0 32px;
-  padding-left: 16px;
+  margin: 0 0 1.2em;
+  padding-left: 32px;
+  padding-left: 2rem;
   border-left: 4px solid whitesmoke;
   font-size: 1.6em;
   word-wrap: break-word;
 }
 pre {
   overflow: auto;
   max-width: 100%;
-  margin-bottom: 32px;
-  padding: 16px;
+  margin-bottom: 1.2em;
+  padding: 1.2em;
   font-family: Consolas, Monaco, monospace;
   font-size: 0.8em;
   color: black;
@@ -371,7 +372,7 @@ ins {
   background: whitesmoke;
 }
 hr {
-  margin: 32px 0;
+  margin: 1.8em 0;
   border-top: none;
   border-right: none;
   border-bottom: 1px solid whitesmoke;
@@ -815,6 +816,34 @@ object {
 .u-bg--success { background-color: mediumspringgreen; }
 .u-bg--warning { background-color: gold; }
 .u-bg--error { background-color: indianred; }
+/* TYPO */
+.u-ff--primary { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
+.u-ff--secondary { font-family: Athelas, Georgia, times, serif; }
+.u-ff--code { font-family: Consolas, Monaco, monospace; }
+.u-ta--center { text-align: center; }
+.u-ta--left { text-align: left; }
+.u-ta--right { text-align: right; }
+.u-tt--upper { text-transform: uppercase; }
+.u-tt--lower { text-transform: lowercase; }
+.u-tt--capital { text-transform: capitalize; }
+.u-fst--normal { font-style: normal; }
+.u-fst--italic { font-style: italic; }
+.u-fw--normal { font-weight: normal; }
+.u-fw--bold { font-weight: bold; }
+.u-lh--0000 { line-height: 0; }
+.u-lh--0100 { line-height: 1; }
+.u-lh--0102 { line-height: 1.2; }
+.u-lh--0104 { line-height: 1.4; }
+.u-lh--0106 { line-height: 1.6; }
+.u-lh--0108 { line-height: 1.8; }
+.u-fs--01 { font-size: 2.8em; }
+.u-fs--02 { font-size: 2em; }
+.u-fs--03 { font-size: 1.6em; }
+.u-fs--04 { font-size: 1.2em; }
+.u-fs--05 { font-size: 1em; }
+.u-fs--06 { font-size: 0.8em; }
+.u-fs--07 { font-size: 0.7em; }
+.u-fs--08 { font-size: 0.6em; }
 /* DISPLAY */
 .u-dsp--inline { display: inline; }
 .u-dsp--inline-block { display: inline-block; }
@@ -1126,33 +1155,6 @@ object {
   .u-span--11x[class*="u-span--"] { width: 91.66663%; }
   .u-span--12x[class*="u-span--"] { width: 100%; }
 }
-/* TYPO */
-.u-ff--primary { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
-.u-ff--secondary { font-family: Athelas, Georgia, times, serif; }
-.u-ff--code { font-family: Consolas, Monaco, monospace; }
-.u-ta--center { text-align: center; }
-.u-ta--left { text-align: left; }
-.u-ta--right { text-align: right; }
-.u-tt--upper { text-transform: uppercase; }
-.u-tt--lower { text-transform: lowercase; }
-.u-tt--capital { text-transform: capitalize; }
-.u-fst--normal { font-style: normal; }
-.u-fst--italic { font-style: italic; }
-.u-fw--normal { font-weight: normal; }
-.u-fw--bold { font-weight: bold; }
-.u-lh--0000 { line-height: 0; }
-.u-lh--0100 { line-height: 1; }
-.u-lh--0102 { line-height: 1.2; }
-.u-lh--0104 { line-height: 1.4; }
-.u-lh--0106 { line-height: 1.6; }
-.u-lh--0108 { line-height: 1.8; }
-.u-fs--01 { font-size: 2.8em; }
-.u-fs--02 { font-size: 2em; }
-.u-fs--03 { font-size: 1.6em; }
-.u-fs--04 { font-size: 1.2em; }
-.u-fs--05 { font-size: 1em; }
-.u-fs--06 { font-size: 0.8em; }
-.u-fs--07 { font-size: 0.7em; }
 /* VERTICAL ALIGN */
 .u-va--top { vertical-align: top; }
 .u-va--middle { vertical-align: middle; }

diff --git a/dist/starrrt.min.css b/dist/starrrt.min.css
diff --git a/docs/404.html b/docs/404.html
@@ -3,15 +3,12 @@
 canonical: 404.html
 layout: base
 ---
-<main class="content">
 
-  <div class="block hero">
-    <div class="row">
-      <div class="col-12">
-        <h1>404 - Something went wrong...</h1>
-        <p><a href="/starrrt">Back to homepage</a></p>
-      </div>
+<main class="o-container c-content">
+  <div class="o-grid">
+    <div class="o-grid__col u-span--12">
+      <h1>404 - Something went wrong...</h1>
+      <p><a href="/starrrt">Back to homepage</a></p>
     </div>
   </div>
-
 </main>
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -1,7 +1,8 @@
 # Custom variables
-version:  v0.4.0
-repo:     https://github.com/felixdorner/starrrt
-download: https://github.com/felixdorner/starrrt/releases/download/v0.4.0/starrrt.min.css
+docs-ver: v1.0.0-beta
+src-ver:  v1.0.0-beta
+repo:     https://github.com/felixdorner/starrrtcss
+download: https://github.com/felixdorner/starrrtcss/releases/latest
 
 # Collections
 collections:

diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
@@ -1,7 +1,7 @@
 <footer class="o-container c-footer u-pa--00b">
   <div class="o-grid">
     <div class="o-grid__col u-span--12">
-      <p>Code license MIT / Docs copyright &copy;{{ 'now' | date: "%Y" }} <a href="https://felixdorner.de/">Felix Dorner</a>, all rights reserved.</p>
+      <p>StarrrtCSS is licensed under the MIT License / Copyright &copy;{{ 'now' | date: "%Y" }} <a href="https://felixdorner.de/">Felix Dorner</a>, all rights reserved.</p>
     </div>
   </div>
 </footer>
diff --git a/docs/_includes/head.html b/docs/_includes/head.html
@@ -5,19 +5,19 @@
   <meta name="description" content="{{page.description}}">
 
   <!-- Twitter card meta -->
-  <!-- <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:site" content="@felixdorner">
   <meta name="twitter:creator" content="@felixdorner">
-  <meta name="twitter:title" content="STARRRT">
-  <meta name="twitter:description" content="A CSS starter-kit written with PostCSS and cssnext.">
-  <meta name="twitter:image" content="{{site.baseurl}}/img/starrrt-marketing.jpg"> -->
+  <meta name="twitter:title" content="{{page.title}}">
+  <meta name="twitter:description" content="{{page.description}}">
+  <meta name="twitter:image" content="{{site.baseurl}}/img/social.jpg">
 
-  <!-- Open graph met atags -->
-  <!-- <meta property="og:title" content="Waffle Grid system" />
-  <meta property="og:description" content="An easy to use flexbox grid system"/>
+  <!-- Open graph tags -->
+  <meta property="og:title" content="{{page.title}}" />
+  <meta property="og:description" content="{{page.description}}"/>
   <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://felixdorner.github.io/starrrt" />
-  <meta property="og:image" content="{{site.baseurl}}/img/starrrt-marketing.jpg" /> -->
+  <meta property="og:url" content="https://felixdorner.github.io/starrrtcss" />
+  <meta property="og:image" content="{{site.baseurl}}/img/social.jpg" />
 
   <!-- Link tags -->
   <link rel="shortcut icon" href="{{site.baseurl}}/favicon.png">

diff --git a/docs/_includes/header.html b/docs/_includes/header.html
@@ -12,7 +12,7 @@ <h1 class="u-ma--00">{{page.title}}</h1>
           {% endfor %}
         </ul>
         <ul class="c-nav__menu c-nav__menu--sec">
-          <li><span class="c-version">{{site.version}}</span></li>
+          <li><span class="c-version">{{site.src-ver}}</span></li>
           <li><a href="{{site.repo}}">View on Github</a></li>
           <li>Made by <a href="https://twitter.com/felixdorner">@felixdorner</a></li>
         </ul>

diff --git a/docs/_instructions/01-setup.md b/docs/_instructions/01-setup.md
@@ -3,4 +3,4 @@ title: Setup
 slug: setup
 ---
 
-[Download](http://goo.gl/7E1Fbk) and copy the source files into your new project and integrate them with your workflow. Make sure that your task runner processes [PostCSS](http://postcss.org/), [cssnext](http://cssnext.io/) and [postcss-easy-import](https://github.com/TrySound/postcss-easy-import). Here is a [gist](#) on how to setup a workflow with NPM or Yarn.
+Download the [latest release](https://github.com/felixdorner/starrrtcss/releases/latest), copy the source files into your new project, and integrate them with your workflow. Make sure that your task runner processes [PostCSS](http://postcss.org/), [cssnext](http://cssnext.io/) and [postcss-easy-import](https://github.com/TrySound/postcss-easy-import). Here is a [gist](https://gist.github.com/felixdorner/278fa705aa37cb369a809a4151c7d701) on how to setup a workflow with NPM or Yarn.
diff --git a/docs/_instructions/02-architecture.md b/docs/_instructions/02-architecture.md
@@ -0,0 +1,32 @@
+---
+title: Architecture
+slug: architecture
+---
+
+One of the main aspects of StarrrtCSS is to encourage a sane and scalable CSS architecture. Therefor styles are grouped into the following categories:
+
+1. Settings
+2. Base
+3. Objects
+4. Components
+5. Utilities
+
+### Settings
+
+The settings file contains global configurations like variables and breakpoints which are shared across the system.
+
+### Base
+
+Base styles are the default styles of base elements without ID or class selectors.
+
+### Objects
+
+Objects are class-based selectors which define undecorated design patterns like containers or grids. They provide structure to your page and do not contain any cosmetic CSS.
+
+### Components
+
+Components are UI elements. They consist mostly of cosmetic CSS but can also incorporate structural rules if they only affect the corresponding component itself.
+
+### Utilitis
+
+Utilities are high-specificity, very explicit classes. They are used as overrides or for rapid prototyping.
diff --git a/docs/_instructions/02-structure.md b/docs/_instructions/02-structure.md
diff --git a/docs/_instructions/03-example.md b/docs/_instructions/03-example.md
@@ -0,0 +1,15 @@
+---
+title: Example
+slug: example
+---
+
+Here is a section with a centered grid and two responsive columns:
+
+```
+├── .o-container
+│   ├── .o-grid
+│   │   ├── .o-grid__col u-span--12 u-span--06m u-span--06l
+│   │   ├── .o-grid__col u-span--12 u-span--06m u-span--04l
+```
+
+*Note: Spans overwrite each other from small to large breakpoints.*
diff --git a/docs/_instructions/03-settings.md b/docs/_instructions/03-settings.md
diff --git a/docs/_instructions/04-base.md b/docs/_instructions/04-base.md
diff --git a/docs/_instructions/04-extending.md b/docs/_instructions/04-extending.md
@@ -0,0 +1,6 @@
+---
+title: Extending
+slug: extending
+---
+
+StarrrtCSS is no dev dependency but a boilerplate to start with. Therefor, it can be changed or adjusted at any stage of your project. It is highly recommended to use the [BEM class naming approach](http://getbem.com/naming/) to keep things consistent.
diff --git a/docs/_instructions/09-contributing.md → docs/_instructions/05-contributing.md b/docs/_instructions/09-contributing.md → docs/_instructions/05-contributing.md
@@ -5,5 +5,5 @@ slug: contributing
 
 Contributions are welcome:
 
-- Report bugs and make feature requests via the [issue tracker](https://github.com/felixdorner/starrrt/issues)
-- Please ask first before working on any significant pull request
+- Report bugs and make feature requests via the [issue tracker](https://github.com/felixdorner/starrrtcss/issues)
+- Please ask first before working on any significant pull request. Find more information on how to setup the dev environment [here](https://github.com/felixdorner/starrrtcss).