Skip to content

Commit

Permalink
Use partial for components markup, Ready for 1.4.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@mvsde
mvsde committed Jun 12, 2016
1 parent 318bd70 commit ffeeba8
Show file tree
Hide file tree
Showing 12 changed files with 232 additions and 217 deletions.
30 changes: 20 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ All 3rd-party stuff should be placed inside the folder `src/js/libraries`. JSHin


### Handlebars
Located in `src/html`.<br>
Located in `src/html`.
Output to `dev` or `dist`.

*Handlebars* is an HTML templating engine based on JavaScript. Gulp creates static HTML from Handlebars files.
Expand All @@ -94,10 +94,10 @@ Layouts are located in `src/html/partials/layouts`.
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{file.meta.title}}</title>
<title>{{@file.meta.title}}</title>
</head>
<body>
{{{block "content"}}}
{{{block "body"}}}
</body>
</html>
```
Expand All @@ -112,27 +112,37 @@ The syntax `{{> "includes/example" }}` includes the file `src/html/partials/incl


#### Pages and Components
Pages are the actual web pages displayed by the browser.<br>
Pages are prototypes for the final web pages.
Components are reference pages for smaller UI parts. The gulp task `production` will not render them.

The `default` gulp task injects a flyout menu into pages and components for easier navigation during development.
The `default` gulp task injects a horizontal navigation bar into pages and components for fast file switching.

Pages are located in `src/html/pages`, components in `src/html/components`.

The YAML front matter between `---` contains general information like the page title and description. This will be used primarily by layouts. You can add additional information, which can be accessed via `{{file.meta.key}}`. Replace `key` with the name from the front matter.
The YAML front matter between the opening `---` and closing `---` contains general information like the page title and description. This will be used primarily by layouts. You can add additional information (arrays and even objects), which can be accessed via `{{@file.meta.key}}`. Replace `key` with the variable name from the front matter.

```html
---
title: Example
description: Only used for components.
---
{{#extend "layouts/components"}}
{{#content "content"}}
<p>This will be injected into the layout.</p>
{{/content}}
{{#content "body"}}
<p>This will be injected into the layout.</p>
{{/content}}
{{/extend}}
```

Components may use additional markup with containers for variations.

```html
{{#embed "layouts/article" title="Some title" description="Some text"}}
{{#content "body"}}
<p>This creates a nicely formatted container with a title and description.</p>
{{/content}}
{{/embed}}
```

### Holder.js
Use [Holder.js](https://github.com/imsky/holder) to include image placeholders.

Expand All @@ -146,7 +156,7 @@ This basic example generates a gray 300 by 200 pixel image.


### Images
Located in `src/img`.<br>
Located in `src/img`.
Output to `dev/img` or `dist/img`.

All files and folders placed in `src/img` will be copied to `dev/img` or `dist/img`.
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "styleguide",
"version": "1.3.2",
"version": "1.4.0",
"description": "Front-end development styleguide with Sass, JavaScript and Handlebars.",
"author": "Fynn Becker <[email protected]>",
"scripts": {
Expand Down
39 changes: 16 additions & 23 deletions src/html/components/example.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,25 @@
title: Example Component
description: This is a short description for the component.
---
{{#extend "layouts/components"}}
{{#content "content"}}
<article class="sg-article">
<header class="sg-article__header">
<h2 class="sg-article__title">Documentation file for a component</h2>
<p class="sg-article__description">You can wrap components or variations thereof in awesome boxes with headings and descriptions.</p>
</header>

<div class="sg-article__body">
<p>You can write your component in this file. But it is recommended to build elements as includes for greater reusability of your code.</p>
{{#extend "layouts/components"}}
{{#content "body"}}

<p>Includes will be loaded from the <code>src/html/templates</code> folder:</p>
{{> "includes/example"}}
</div>
</article>
{{#embed "layouts/article" title="Documentation file for a component" description="You can wrap components or variations thereof in awesome boxes with headings and descriptions."}}
{{#content "body"}}
<p>You can write your component in this file. But it is recommended to build elements as includes for greater reusability of your code.</p>

<article class="sg-article">
<header class="sg-article__header">
<h2 class="sg-article__title">A variation of this component</h2>
<p class="sg-article__description">This can have a description aswell.</p>
</header>
<p>Includes will be loaded from the <code>src/html/partials</code> folder:</p>
{{> "includes/example"}}
{{/content}}
{{/embed}}

<div class="sg-article__body">
<p>For better file organization you can add a namespace to your includes:</p>
{{> "includes/namespace.example" }}
</div>
</article>
{{#embed "layouts/article" title="A variation of this component" description="This can have a description aswell."}}
{{#content "body"}}
<p>For better file organization you can add a namespace to your includes:</p>
{{> "includes/namespace.example" }}
{{/content}}
{{/embed}}

{{/content}}
{{/extend}}
216 changes: 102 additions & 114 deletions src/html/components/forms.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,145 +2,133 @@
title: Forms
description: Users input things. The server gets things.
---
{{#extend "layouts/components"}}
{{#content "content"}}
<article class="sg-article">
<header class="sg-article__header">
<h2 class="sg-article__title">Buttons</h2>
<p class="sg-article__description">Usually they submit forms or trigger JavaScript actions.</p>
</header>

<div class="sg-article__body">
<button class="button">Button</button>
<input type="submit" value="Input">
<a href="#" class="button">Link</a>
</div>
</article>

<article class="sg-article">
<header class="sg-article__header">
<h2 class="sg-article__title">Inputs</h2>
<p class="sg-article__description">Text, password, checkbox etc.</p>
</header>

<div class="sg-article__body">
<form>
<fieldset>
<legend>Text inputs</legend>

<label for="text">Text input</label>
<input type="text" id="text" placeholder="Text">

<label for="text-disabled">Text input (disabled)</label>
<input type="text" id="text-disabled" placeholder="Text (disabled)" disabled>

<label for="email">E-mail input</label>
<input type="email" id="email" placeholder="E-mail">

<label for="password">Password input</label>
<input type="password" id="password" placeholder="Password">

<label for="search">Search input</label>
<input type="search" id="search" placeholder="Search">

<label for="url">URL input</label>
<input type="url" id="url" placeholder="URL">
</fieldset>
{{#extend "layouts/components"}}
{{#content "body"}}

<fieldset>
<legend>Numeric inputs</legend>
{{#embed "layouts/article" title="Buttons" description="Usually they submit forms or trigger JavaScript actions."}}
{{#content "body"}}
<button>Button</button>
<input type="submit" value="Input">
<a href="#">Link</a>
{{/content}}
{{/embed}}

<label for="tel">Telephone input</label>
<input type="tel" id="tel" placeholder="Telephone">
{{#embed "layouts/article" title="Text Inputs"}}
{{#content "body"}}
<label for="text">Text input</label>
<input type="text" id="text" placeholder="Text">

<label for="number">Number input</label>
<input type="number" id="number" placeholder="7">
<label for="text-disabled">Text input (disabled)</label>
<input type="text" id="text-disabled" placeholder="Text (disabled)" disabled>

<label for="date">Date input</label>
<input type="date" id="date">
<label for="email">E-mail input</label>
<input type="email" id="email" placeholder="E-mail">

<label for="time">Time input</label>
<input type="time" id="time">
</fieldset>
<label for="password">Password input</label>
<input type="password" id="password" placeholder="Password">

<fieldset>
<legend>Checkbox</legend>
<label for="search">Search input</label>
<input type="search" id="search" placeholder="Search">

<input type="checkbox" name="checkbox" value="checkbox-1" id="checkbox-1" checked>
<label for="checkbox-1">Checkbox #1 (checked)</label>
<label for="url">URL input</label>
<input type="url" id="url" placeholder="URL">
{{/content}}
{{/embed}}

<input type="checkbox" name="checkbox" value="checkbox-2" id="checkbox-2">
<label for="checkbox-2">Checkbox #2</label>
{{#embed "layouts/article" title="Numeric Inputs"}}
{{#content "body"}}
<label for="tel">Telephone input</label>
<input type="tel" id="tel" placeholder="Telephone">

<input type="checkbox" name="checkbox" value="checkbox-3" id="checkbox-3" disabled>
<label for="checkbox-3">Checkbox #3 (disabled)</label>
<label for="number">Number input</label>
<input type="number" id="number" placeholder="7">

<input type="checkbox" name="checkbox" value="checkbox-4" id="checkbox-4">
<label for="checkbox-4">Checkbox #4</label>
<label for="date">Date input</label>
<input type="date" id="date">

<input type="checkbox" name="checkbox" value="checkbox-5" id="checkbox-5" disabled checked>
<label for="checkbox-5">Checkbox #5 (checked, disabled)</label>
</fieldset>
<label for="time">Time input</label>
<input type="time" id="time">
{{/content}}
{{/embed}}

<fieldset>
<legend>Radio</legend>
{{#embed "layouts/article" title="Checkbox"}}
{{#content "body"}}
<input type="checkbox" name="checkbox" value="checkbox-1" id="checkbox-1" checked>
<label for="checkbox-1">Checkbox #1 (checked)</label>

<input type="radio" name="radio" value="radio-1" id="radio-1" checked>
<label for="radio-1">Radio #1</label>
<input type="checkbox" name="checkbox" value="checkbox-2" id="checkbox-2">
<label for="checkbox-2">Checkbox #2</label>

<input type="radio" name="radio" value="radio-2" id="radio-2">
<label for="radio-2">Radio #2</label>
<input type="checkbox" name="checkbox" value="checkbox-3" id="checkbox-3" disabled>
<label for="checkbox-3">Checkbox #3 (disabled)</label>

<input type="radio" name="radio" value="radio-3" id="radio-3" disabled>
<label for="radio-3">Radio #3 (disabled)</label>
<input type="checkbox" name="checkbox" value="checkbox-4" id="checkbox-4">
<label for="checkbox-4">Checkbox #4</label>

<input type="radio" name="radio" value="radio-4" id="radio-4">
<label for="radio-4">Radio #4</label>
<input type="checkbox" name="checkbox" value="checkbox-5" id="checkbox-5" disabled checked>
<label for="checkbox-5">Checkbox #5 (checked, disabled)</label>
{{/content}}
{{/embed}}

<input type="radio" name="radio2" value="radio" id="radio3" disabled checked>
<label for="radio2">Radio (checked, disabled)</label>
</fieldset>
{{#embed "layouts/article" title="Radio"}}
{{#content "body"}}
<input type="radio" name="radio" value="radio-1" id="radio-1" checked>
<label for="radio-1">Radio #1</label>

<fieldset>
<legend>Select</legend>
<input type="radio" name="radio" value="radio-2" id="radio-2">
<label for="radio-2">Radio #2</label>

<label for="select">Select input</label>
<select id="select">
<option value="select-1">Option 1</option>
<option value="select-2">Option 2</option>
<option value="select-3">Option 3</option>
<option value="select-4">Option 4</option>
</select>
</fieldset>
<input type="radio" name="radio" value="radio-3" id="radio-3" disabled>
<label for="radio-3">Radio #3 (disabled)</label>

<fieldset>
<legend>Color and file inputs</legend>
<input type="radio" name="radio" value="radio-4" id="radio-4">
<label for="radio-4">Radio #4</label>

<label for="color">Color input</label>
<input type="color" id="color">
<input type="radio" name="radio2" value="radio" id="radio3" disabled checked>
<label for="radio2">Radio (checked, disabled)</label>
{{/content}}
{{/embed}}

{{#embed "layouts/article" title="Select"}}
{{#content "body"}}
<label for="select">Select</label>
<select id="select">
<option value="select-1">Option 1</option>
<option value="select-2">Option 2</option>
<option value="select-3">Option 3</option>
<option value="select-4">Option 4</option>
</select>

<label for="select">Select (disabled)</label>
<select id="select">
<option value="select-1">Option 1</option>
<option value="select-2">Option 2</option>
<option value="select-3">Option 3</option>
<option value="select-4">Option 4</option>
</select>
{{/content}}
{{/embed}}

<label for="file">File input</label>
<input type="file" id="file">
</fieldset>
</form>
</div>
</article>
{{#embed "layouts/article" title="Color and File"}}
{{#content "body"}}
<label for="color">Color input</label>
<input type="color" id="color">

<article class="sg-article">
<header class="sg-article__header">
<h2 class="sg-article__title">Textarea</h2>
<p class="sg-article__description">Multi-line inputs</p>
</header>
<label for="file">File input</label>
<input type="file" id="file">
{{/content}}
{{/embed}}

<div class="sg-article__body">
<form>
<label for="textarea">Textarea</label>
<textarea id="textarea" placeholder="Textarea"></textarea>
{{#embed "layouts/article" title="Textarea"}}
{{#content "body"}}
<label for="textarea">Textarea</label>
<textarea id="textarea" placeholder="Textarea"></textarea>

<label for="textarea-disabled">Textarea (disabled)</label>
<textarea id="textarea-disabled" placeholder="Textarea (disabled)" disabled></textarea>
</form>
</div>
</article>
<label for="textarea-disabled">Textarea (disabled)</label>
<textarea id="textarea-disabled" placeholder="Textarea (disabled)" disabled></textarea>
{{/content}}
{{/embed}}

{{/content}}
{{/extend}}
Loading

0 comments on commit ffeeba8

Please sign in to comment.