Skip to content
This repository has been archived by the owner on May 20, 2024. It is now read-only.

Commit

Permalink
[nj] moved all current examples to new Examples page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArmorDarks
ArmorDarks committed Jun 14, 2016
1 parent 34c044c commit 6c7c51f
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 149 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,5 @@
- [sass] Disable of outline of focused elements is now off by default
- [sass] Predefined breakpoints has been changed
- [sass] Default style of form's placeholder changer to `normal`
- [nj] Namespaced all classes with type according to new Ekzo convention
- [nj] Namespaced all classes with type according to new Ekzo convention
- [nj] All current examples moved to new Examples page. Still quite messy and limited, but better than nothing
87 changes: 86 additions & 1 deletion source/layouts/examples/index.nj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,92 @@

{% block main %}

<h2 class='h-margin-top++ h-margin-bottom+'>Grid</h2>
{# @todo This is WIP page. Don't be too hard with it yet. #}

<h2 class='h-margin-top++ h-margin-bottom+'>Icons and sprites</h2>

{% call components.example(title = 'Generated icons and sprites examples') -%}
<p>Webfont home icon: <i class='o-icon icon--home icon--right'></i></p>

<p>1px sprite: <i class='o-sprite sprite--test icon--right'></i></p>
{% endcall %}


<h2 class='h-margin-top++ h-margin-bottom+'>Macros</h2>

{% call components.example(title = 'Macros examples') -%}
{% raw %}<p>{{ components.exmapleMacro('this is from index page') }}</p>{% endraw %}
{% endcall %}


<h2 class='h-margin-top++ h-margin-bottom+'>L10n</h2>

{% call components.example(title = '', classes = ['localeDir(locale)']) -%}
{% raw %}<p>This site available in following languages:</p>

<ul>
{% for locale in site.locales %}
<li>
{% if locale == page.locale %}
{{ locale }} (current)
{% else %}
<a href='{{ localeDir(locale) }}/{{ page.url }}'>{{ locale }}</a>
{% endif %}
</li>
{% endfor %}
</ul>{% endraw %}
{% endcall %}

{% call components.example(title = '', classes = ['gettext()']) -%}
{% raw %}<p>Output translation from current locale:</p>

<p><code>{{ gettext('This string will be displayd in selected language') }}</code></p>{% endraw %}
{% endcall %}

{% call components.example(title = '', classes = ['dgettext()']) -%}
{% raw %}<p>Output translation from other locales and domains</p>

<p>
Display same string from <code>`ru-RU`</code> locale:<br>
<code>{{ dgettext('ru-RU', 'This string will be displayd in selected language') }}</code>
</p>
<p>
Display same string from <code>`ru-RU`</code> locale and <code>`other`</code> domain:<br>
<code>{{ dgettext('ru-RU:other', 'This string will be displayd in selected language') }}</code>
</p>
<p>
Display same string from <code>`ru-RU`</code> locale and <code>`nav:bar`</code> domain:<br>
<code>{{ dgettext('ru-RU:nav:bar', 'This string will be displayd in selected language') }}</code>
</p>
<p>
Display same string from current locale and <code>`nav:bar`</code> domain:<br>
<code>{{ dgettext(':nav:bar', 'This string will be displayd in selected language') }}</code>
</p>{% endraw %}
{% endcall %}

{% call components.example(title = 'Plurals') -%}
{% raw %}<p>Singular: <code>{{ ngettext('%s apple', '%s apples', 1)|template(1) }}</code></p>
<p>Plural: <code>{{ ngettext('%s apple', '%s apples', 2)|template(2) }}</code></p>
<p>Other: <code>{{ ngettext('%s apple', '%s apples', 5)|template(5) }}</code></p>{% endraw %}
{% endcall %}


<h2 class='h-margin-top++ h-margin-bottom+'>Data examples</h2>

{% call components.example(title = 'Inline data') -%}
{% raw %}<p>Current year is {{ data.currentYear }}</p>

<p>Images path is <code>{{ path.images }}</code></p>{% endraw %}
{% endcall %}

{% call components.example(title = 'External data') -%}
{% raw %}<h4 class='h-h5'>{{ data.example.title }}</h4>

<p>{{ data.example.content }}</p>{% endraw %}
{% endcall %}


<h2 class='h-margin-top++ h-margin-bottom+'>Grids</h2>

{% call components.example(title = '', classes = ['.o-grid', '.o-grid__item'], full = true) -%}
<div class='o-grid h-bleed-top'>
Expand Down
147 changes: 0 additions & 147 deletions source/layouts/index.nj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,156 +9,9 @@

{% block main %}


<p>This is very basic page to let you know that everything works fine!</p>


<section class='o-grid h-childs-displace+ h-flex-y--center h-margin-top+'>

<div class='o-grid__item h-2/5'>
<h2 class='h-margin-bottom0'>Generated icons and sprites examples</h2>
</div>{# /grid__item #}

<div class='o-grid__item h-3/5'>

<p>Webfont home icon: <i class='o-icon icon--home icon--right'></i></p>

<p>1px sprite: <i class='o-sprite sprite--test icon--right'></i></p>

</div>{# /grid__item #}

</section>{# /grid #}


<hr class='h-margin-ends+'>


<section class='o-grid h-childs-displace+ h-flex-y--center'>

<div class='o-grid__item h-2/5'>
<h2 class='h-margin-bottom0'>Macros examples</h2>
</div>{# /grid__item #}

<div class='o-grid__item h-3/5'>
<p>{{ components.exmapleMacro('this is from index page') }}</p>
</div>{# /grid__item #}

</section>{# /grid #}


<hr class='h-margin-ends+'>


<section class='o-grid h-childs-displace+ h-flex-y--center'>

<div class='o-grid__item h-2/5'>
<h2 class='h-margin-bottom0'>i18n examples</h2>
</div>{# /grid__item #}

<div class='o-grid__item h-3/5'>

<h3 class='h-h4'>This site available in following languages:</h3>

<ul>
{% for locale in site.locales %}
<li>
{% if locale == page.locale %}
{{ locale }} (current)
{% else %}
<a href='{{ localeDir(locale) }}/'>{{ locale }}</a>
{% endif %}
</li>
{% endfor %}
</ul>

<h3 class='h-h4 h-margin-top+'>Output translation from current locale</h3>

<p><code>{{ gettext('This string will be displayd in selected language') }}</code></p>

<h3 class='h-h4 h-margin-top+'>Output translation from other locales and domains</h3>

<p>
Display same string from <code>`ru-RU`</code> locale:<br>
<code>{{ dgettext('ru-RU', 'This string will be displayd in selected language') }}</code>
</p>
<p>
Display same string from <code>`ru-RU`</code> locale and <code>`other`</code> domain:<br>
<code>{{ dgettext('ru-RU:other', 'This string will be displayd in selected language') }}</code>
</p>
<p>
Display same string from <code>`ru-RU`</code> locale and <code>`nav:bar`</code> domain:<br>
<code>{{ dgettext('ru-RU:nav:bar', 'This string will be displayd in selected language') }}</code>
</p>
<p>
Display same string from current locale and <code>`nav:bar`</code> domain:<br>
<code>{{ dgettext(':nav:bar', 'This string will be displayd in selected language') }}</code>
</p>

<h3 class='h-h4 h-margin-top+'>Translation with plurals</h3>

<p>Singular: <code>{{ ngettext('%s apple', '%s apples', 1)|template(1) }}</code></p>
<p>Plural: <code>{{ ngettext('%s apple', '%s apples', 2)|template(2) }}</code></p>
<p>Other: <code>{{ ngettext('%s apple', '%s apples', 5)|template(5) }}</code></p>

</div>{# /grid__item #}

</section>{# /grid #}


<hr class='h-margin-ends+'>


<section class='o-grid h-childs-displace+ h-flex-y--center'>

<div class='o-grid__item h-2/5'>
<h2 class='h-margin-bottom0'>Data examples</h2>
</div>{# /grid__item #}

<div class='o-grid__item h-3/5'>

<section class='o-grid h-childs-displace+ h-flex-y--center'>

<div class='o-grid__item h-2/5'>
<h3 class='h-margin-bottom0'>Inline data</h3>
</div>{# /grid__item #}

<div class='o-grid__item h-3/5'>

<p>Current year is {{ data.currentYear }}</p>

<p>Images path is <code>{{ path.images }}</code></p>

</div>{# /grid__item #}

</section>{# /grid #}

<section class='o-grid h-childs-displace+ h-flex-y--center h-margin-top+'>

<div class='o-grid__item h-2/5'>
<h3 class='h-margin-bottom0'>External data</h3>
</div>{# /grid__item #}

<div class='o-grid__item h-3/5'>

<h4 class='h-h5'>{{ data.example.title }}</h4>

<p>{{ data.example.content }}</p>

</div>{# /grid__item #}

</section>{# /grid #}

</div>{# /grid__item #}

</section>{# /grid #}

<hr class='h-margin-ends+'>


<p>
Learn more about
<a class='o-btn g-link--go h-margin-left--' href='https://github.com/LotusTM/Kotsu' target='blank'>Kotsu at Github</a>
</p>


{% endblock %}

0 comments on commit 6c7c51f

Please sign in to comment.