Permalink
Browse files

Adding pages and documentation

  • Loading branch information...
AljanScholtens committed Jun 9, 2017
1 parent d0c0235 commit aed345abf5dcfe8abc84f8ce55f25978c3c48310
View
20 LICENSE
@@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2012-2017 Aljan Scholtens, https://aljanscholtens.nl/.
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 NON INFRINGEMENT. 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.
@@ -70,13 +70,9 @@
.sg-h2 {
clear: both;
font-weight: 600;
padding-top: var(--space-default);
margin-top: var(--space-default) * 2;
/*&:first-of-type {
padding-top: 0;
margin-top: 0;
}*/
}
.sg-h3 {
@@ -92,6 +88,20 @@
& a { float: right; }
}
.sg-lead {
font-size: var(--font-size-50);
line-height: var(--line-height-30);
color: var(--color-neutral-50);
font-weight: 300;
}
.sg-code {
background: var(--color-neutral-10);
padding: var(--space-default);
line-height: 1.35em;
margin: var(--space-stack-default);
}
.sg-component {
margin-bottom: var(--space-default);
@@ -108,11 +118,11 @@
* Colors
*/
.sg-colors {
lost-utility: clearfix;
margin: var(--space-stack-default);
display: grid;
grid-template-columns: 1fr 1fr;
& ul {
width: 50%;
float: left;
list-style: none;
margin-left: 0;
}
View
@@ -7,6 +7,7 @@
{% from "components/ListItem/ListItem.html" import ListItem %}
{% from "components/Heading/Heading.html" import Heading %}
{% from "components/Panel/Panel.html" import Panel %}
{% from "components/Paragraph/Paragraph.html" import Paragraph %}
{% set page_title = 'Home' %}
@@ -18,8 +19,8 @@
{% call Grid(columns='8') %}
{% call Heading(element='h1') %} Set up Taiga {% endcall %}
<p>Taiga Boilerplate is a small HTML/PostCSS framework for starting a new web project. It is mobile-first with CSS Grid Layout and based on the principles of ITCSS and BEM.</p>
{% call Heading(element='h1', size='large') %}Index{% endcall %}
{% call Paragraph(type='large') %}This is your home page, create your components in the style guide and insert them on your pages like this one.{% endcall %}
{% endcall %}
@@ -30,8 +31,8 @@
{% call Container() %}
{% call List() %}
{% call ListItem() %}<strong>Get started</strong> with Taiga, check the <a href="https://github.com/aljanscholtens/taiga-boilerplate/blob/master/README.md">Readme on Github</a>.{% endcall %}
{% call ListItem() %}Need components? Taiga has a small <strong><a href="styleguide/index.html">styleguide</a></strong>.{% endcall %}
{% call ListItem() %}<strong>Get started</strong> with Taiga, check the <a href="styleguide/">Getting Started</a> chapter in the style guide.{% endcall %}
{% call ListItem() %}Need components? Taiga has a small set of components in the <strong><a href="styleguide/components.html">styleguide</a></strong>.{% endcall %}
{% call ListItem() %}If you like Taiga, please star it on <a href="https://github.com/aljanscholtens/taiga-boilerplate">Github</a>.{% endcall %}
{% call ListItem() %}Questions? Mail me at <a href="mailto:aljan@studiowolf.com">aljan@scholtens.me</a> or tweet to <a href="http://twitter.com/aljanscholtens/">@AljanScholtens</a>.{% endcall %}
{% endcall %}
@@ -22,7 +22,8 @@
<aside class="sg-aside">
<h2 class="u-spacing">Styleguide</h2>
<ul class="sg-navigation">
<li><a href="/styleguide/index.html">Introduction</a></li>
<li><a href="/styleguide/index.html">Getting Started</a></li>
<li><a href="/styleguide/guidelines.html">Guidelines</a></li>
<li><a href="/styleguide/tokens.html">Tokens</a></li>
<li><a href="/styleguide/base.html">Base</a></li>
<li>
@@ -52,6 +53,8 @@ <h2 class="u-spacing">Styleguide</h2>
</ul>
</li>
<li><a href="/styleguide/utilities.html">Utilities</a></li>
<li><a href="/styleguide/templates.html">Templates</a></li>
<li><a href="/styleguide/support.html">Support</a></li>
</ul>
</aside>
View
@@ -4,7 +4,8 @@
{% block content %}
<h1 class="c-heading c-heading--30 u-spacing">{{page_title}}</h1>
<h1 class="c-heading c-heading--large">{{page_title}}</h1>
<p class="sg-lead">Without working in components you already have some basic styling on HTML elements.</p>
<h2 class="sg-h2" id="form">Form</h2>
<h3 class="sg-h3">Input</h3>
@@ -4,15 +4,15 @@
{% block content %}
<h1 class="c-heading c-heading--30 u-spacing">{{ page_title }}</h1>
<h1 class="c-heading c-heading--large">{{ page_title }}</h1>
<p class="sg-lead">On this page you can find all available components. To change or add a component, dive into the folder components/.</p>
<h2 class="sg-h2" id="Alert">Alert</h2>
<div class="sg-component">
{% include 'components/Alert/example.html' %}
</div>
<h2 class="sg-h2" id="Button">Button</h2>
<p>A button gives the option for an action.
<div class="sg-component">
{% include 'components/Button/example.html' %}
</div>
@@ -0,0 +1,78 @@
{% extends 'layout/styleguide.html' %}
{% set page_title = 'Guidelines' %}
{% block content %}
<h1 class="c-heading c-heading--large">{{page_title}}</h1>
<p class="sg-lead">This page provides info about framework and code guide lines.</p>
<h2 class="sg-h2">Components</h2>
<p>Component thinking is the most crucial part of Taiga. A project consists mainly of components. You can combine every component you want as long you follow the guidelines. If you want to change the code of for example a button, you only have to edit it in the button component and not on actual pages. Quick, consistent and awesome.
<h2 class="sg-h2">ITCSS</h2>
<p>Taiga is inspired by <a href="https://www.youtube.com/watch?v=1OKZOV-iLj4">ITCSS</a> to get the best performance and the least specitifity in the project.</p>
<h2 class="sg-h2">CSS Guidelines</h2>
<p>Most of how the CSS is build up is inspired by <a href="https://cssguidelin.es/">CSS Guidelines</a> from Harry Roberts.</p>
<h2 class="sg-h2">BEM and namespaces</h2>
<p>Taiga uses <a href="https://css-tricks.com/bem-101/">BEM</a> to set up the CSS of a component. Below you can find an example of how to build up a simple component including the order of setting up the CSS, which is important.</p>
<pre class="sg-code"><code>/*
* Block
*/
.c-example {
/* 1: Add the direct properties of the element */
property: value;
/* 2: Add media queries or print styles */
@media (--breakpoint-10) { property: value; }
/* 3: Add selectors of the parent element */
&amp;:hover { property: value; }
/* 4: Add temporary states of the parent element */
&amp;.is-open { property: value; }
/* 5: Add nested elements */
&amp; strong { property: value; }
}
/*
* Element
*/
.c-example__subcomponent {
property: value;
}
/*
* Modifier
*/
.c-example--modifier {
property: value;
}
</code></pre>
<h2 class="sg-h2">Tokens and variables</h2>
<p>Variables are defined in assets/stylesheets/tokens.css and are treated a bit differently. In the example below you'll notice Taiga works with steps of 10, 20, 30 and so on. The trick is simple, 10 is small or light and 100 is large or dark. So we work from nothing to something.</p>
<p>The steps are created this way so you can easily add more in between. This way we will have more consistency in a website, but maintain the creativity and freedom.</p>
<p><pre class="sg-code"><code>/*
* Rounded borders
*/
--border-radius-10: 0.125rem; /* Small */
--border-radius-20: 0.313rem; /* Larger */
/*
* Brand colors
*/
--color-primary-30: #29c882; /* Lighter */
--color-primary-50: #09a25f; /* Default */
--color-primary-70: #038049; /* Darker */
</code></pre></p>
{% endblock %}
View
@@ -1,13 +1,38 @@
{% extends 'layout/styleguide.html' %}
{% set page_title = 'Introduction' %}
{% set page_title = 'Getting Started' %}
{% block content %}
<h1 class="c-heading--30 u-spacing">{{page_title}}</h1>
<h1 class="c-heading c-heading--large">{{page_title}}</h1>
<p class="sg-lead">Taiga Boilerplate is a small Nunjucks/HTML/PostCSS framework for starting a new web project build on components. It's mobile-first based on the principles of ITCSS and BEM.</p>
<h2 class="sg-h2">How to use Taiga</h2>
<p>Taiga is a boilerplate for visualizing your components or a part of your design system. You can use what you want, change it and add pages, rules and components. Once you've made it ready for your project, build on from there, do not try to update it from the latest version on Github.</p>
<h2 class="sg-h2">Sketch file</h2>
<p>Taiga has a Sketch file with design tokens and components. <a href="https://www.dropbox.com/s/qmlgky4b0ko1jl4/taiga-ds.sketch.zip?dl=0">Download the sketch file</a>.
<h2 class="sg-h2">File structure</h2>
<p>Below you can find the file structure of Taiga, the whole src/ folder will compile to a dist/ folder where it renders the Nunjucks files to plain HTML.</p>
<p><pre class="sg-code"><code>src/
├── assets/
│ ├── images/
│ ├── scripts/
│ ├── stylesheets/
├── components/
│ ├── Alert/
│ ├── Button/
│ └── [All components]
├── layout/
├── media/
└── styleguide/
└── [templates]
</code></pre></p>
<h2 class="sg-h2">Components</h2>
<p>For adding a new component just duplicate a component folder and edit the files with your component name. To make it work also add a CSS import in the styles.css in the assets/stylesheets/ folder. Finally, include the example file of your folder in styleguide/index.html to let it show up in the style guide.</p>
<h2 class="sg-h2">How does it work?</h2>
<p>Taiga is based on ITCSS – ‘Inverted Triangle CSS'. It involves visualising your entire CSS project as a layered, upside-down triangle. This hierarchical shape represents a model that will help you order your CSS in the most effective, least wasteful way.</p>
<p>Learn more about ITCSS by <a href="https://www.youtube.com/watch?v=1OKZOV-iLj4">a talk from Harry Roberts</a>.</p>
{% endblock %}
@@ -0,0 +1,16 @@
{% extends 'layout/styleguide.html' %}
{% set page_title = 'Support' %}
{% block content %}
<h1 class="c-heading c-heading--large">{{page_title}}</h1>
<p class="sg-lead">This page provides info about how to get in contact with the team about the design system.</p>
<h2 class="sg-h2">Channels</h2>
<p>Information about the channels like Slack, e-mail or other.</p>
<h2 class="sg-h2">Contribution</h2>
<p>If you want to contribute on the project, just get in touch.</p>
{% endblock %}
@@ -0,0 +1,12 @@
{% extends 'layout/styleguide.html' %}
{% set page_title = 'Templates' %}
{% block content %}
<h1 class="c-heading c-heading--large">{{page_title}}</h1>
<p class="sg-lead">Templates are made when the layout component is combined with other components. These templates can be found here.</p>
<p>Create links to your templates here.</p>
{% endblock %}
View
@@ -4,7 +4,14 @@
{% block content %}
<h1 class="c-heading c-heading--30 u-spacing">{{page_title}}</h1>
<h1 class="c-heading c-heading--large">{{page_title}}</h1>
<p class="sg-lead">Tokens are the basic settings for components to build. They include colors, typographic rules, rounded borders sizes and so on.
<h2 class="sg-h2" id="typography">Typography</h2>
<p>Needs documentation</p>
<h2 class="sg-h2" id="spacing">Spacing</h2>
<p>Needs documentation</p>
<h2 class="sg-h2" id="colors">Colors</h2>
<h3 class="sg-h3">Primary</h3>
@@ -73,4 +80,7 @@ <h3 class="sg-h3">Alert</h3>
</ul>
</div>
<h2 class="sg-h2" id="other">Other</h2>
<p>Needs documentation</p>
{% endblock %}
@@ -4,6 +4,30 @@
{% block content %}
<h1 class="c-heading c-heading--30 u-spacing">{{page_title}}</h1>
<h1 class="c-heading c-heading--large">{{page_title}}</h1>
<p class="sg-lead">Utilities can override certain CSS properties, like helper classes.</p>
<h2 class="sg-h2">Current utilities</h2>
<p>Below you can find the utilities which are currently in use. You can add your own utilities as long as they are most of the time include one CSS property.</p>
<p><code>.u-display-none</code></p>
<p><code>.u-visibility-hidden</code></p>
<p><code>.u-text-align-left</code></p>
<p><code>.u-text-align-right</code></p>
<p><code>.u-text-align-center</code></p>
<p><code>.u-float-left</code></p>
<p><code>.u-float-right</code></p>
<p><code>.u-spacing</code></p>
<p><code>.u-line-through</code></p>
{% endblock %}

0 comments on commit aed345a

Please sign in to comment.