All dynamic data is ONLY inside _data
folder
Every content page is inside _includes/page-name-folder
CSS and JavaScript source code are inside _frontend
folder
- CSS:
_frontend/frontsize
- JavaScript:
_frontend/js
The source code is built inside /css
and /js
folder in the root of the project.
Run the setup with this command (requires Ruby 2.6.1 & Node.js 8)
bin/setup
To start the local server:
bin/server
and then visit https://localhost:4000
To add contents without edit SASS, create a page in the root path and write code with this simple widgets.
Wrap contents inside this page wrapper:
<div class="limit">
wrapped contents
</div>
This will show a huge title in the center of the page:
<div class="intro intro--no-height">
<h1 class="intro__title">Code of Conduct</h1>
</div>
To choose the number of the columns per row use this modifier row--2
where 2 is the number of columns per row.
<div class="row row--2">
<p class="row__column">
Single paragraph column
</p>
<p class="row__column">
Single paragraph column
</p>
</div>
Available columns set modifiers:
row--2
row--3
row--4
To use one column per row, just skip adding the modifier:
<div class="row">
<p class="row__column">
Single column row
</p>
<p class="row__column">
Single column row
</p>
</div>
Remember the more columns you use per row, the smaller text paragraphs you need to put inside them.
If you need a title and more paragraphs per row add it outside the row to ensure a good vertical align between paragraphs:
<h2 class="row__title">The Short Version</h2>
<div class="row row--2">
<div class="row__column">
...
</div>
<div class="row__column">
...
</div>
</div>
If you need multiple paragraphs per column, use this approach:
<div class="row row--2">
<div class="row__column">
<p class="row__text">
Multiple paragraphs per column
</p>
<p class="row__text">
Multiple paragraphs per column
</p>
<p class="row__text">
Multiple paragraphs per column
</p>
</div>
<div class="row__column">
<p class="row__text">
Multiple paragraphs per column
</p>
<p class="row__text">
Multiple paragraphs per column
</p>
</div>
</div>