From ffeeba85a805756d344de91ff2b02485bd5b07f3 Mon Sep 17 00:00:00 2001 From: Fynn Becker Date: Sun, 12 Jun 2016 17:28:18 +0200 Subject: [PATCH] Use partial for components markup, Ready for 1.4.0 --- README.md | 30 ++- package.json | 2 +- src/html/components/example.hbs | 39 ++-- src/html/components/forms.hbs | 216 +++++++++--------- src/html/components/typography.hbs | 109 +++++---- src/html/pages/index.hbs | 17 +- src/html/pages/subfolder/example.hbs | 13 +- src/html/partials/includes/example.hbs | 3 +- .../partials/includes/namespace.example.hbs | 6 +- src/html/partials/layouts/article.hbs | 10 + src/html/partials/layouts/components.hbs | 2 +- src/html/partials/layouts/pages.hbs | 2 +- 12 files changed, 232 insertions(+), 217 deletions(-) create mode 100644 src/html/partials/layouts/article.hbs diff --git a/README.md b/README.md index b945dacd..92dced76 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,7 @@ All 3rd-party stuff should be placed inside the folder `src/js/libraries`. JSHin ### Handlebars -Located in `src/html`.
+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. @@ -94,10 +94,10 @@ Layouts are located in `src/html/partials/layouts`. - {{file.meta.title}} + {{@file.meta.title}} - {{{block "content"}}} + {{{block "body"}}} ``` @@ -112,14 +112,14 @@ The syntax `{{> "includes/example" }}` includes the file `src/html/partials/incl #### Pages and Components -Pages are the actual web pages displayed by the browser.
+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 --- @@ -127,12 +127,22 @@ title: Example description: Only used for components. --- {{#extend "layouts/components"}} - {{#content "content"}} -

This will be injected into the layout.

- {{/content}} +{{#content "body"}} +

This will be injected into the layout.

+{{/content}} {{/extend}} ``` +Components may use additional markup with containers for variations. + +```html +{{#embed "layouts/article" title="Some title" description="Some text"}} +{{#content "body"}} +

This creates a nicely formatted container with a title and description.

+{{/content}} +{{/embed}} +``` + ### Holder.js Use [Holder.js](https://github.com/imsky/holder) to include image placeholders. @@ -146,7 +156,7 @@ This basic example generates a gray 300 by 200 pixel image. ### Images -Located in `src/img`.
+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`. diff --git a/package.json b/package.json index 12ee3810..996d4951 100644 --- a/package.json +++ b/package.json @@ -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 ", "scripts": { diff --git a/src/html/components/example.hbs b/src/html/components/example.hbs index a9804348..ddfee28f 100644 --- a/src/html/components/example.hbs +++ b/src/html/components/example.hbs @@ -2,32 +2,25 @@ title: Example Component description: This is a short description for the component. --- -{{#extend "layouts/components"}} - {{#content "content"}} -
-
-

Documentation file for a component

-

You can wrap components or variations thereof in awesome boxes with headings and descriptions.

-
-
-

You can write your component in this file. But it is recommended to build elements as includes for greater reusability of your code.

+{{#extend "layouts/components"}} +{{#content "body"}} -

Includes will be loaded from the src/html/templates folder:

- {{> "includes/example"}} -
-
+ {{#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"}} +

You can write your component in this file. But it is recommended to build elements as includes for greater reusability of your code.

-
-
-

A variation of this component

-

This can have a description aswell.

-
+

Includes will be loaded from the src/html/partials folder:

+ {{> "includes/example"}} + {{/content}} + {{/embed}} -
-

For better file organization you can add a namespace to your includes:

- {{> "includes/namespace.example" }} -
-
+ {{#embed "layouts/article" title="A variation of this component" description="This can have a description aswell."}} + {{#content "body"}} +

For better file organization you can add a namespace to your includes:

+ {{> "includes/namespace.example" }} {{/content}} + {{/embed}} + +{{/content}} {{/extend}} diff --git a/src/html/components/forms.hbs b/src/html/components/forms.hbs index af99f069..14f7db76 100644 --- a/src/html/components/forms.hbs +++ b/src/html/components/forms.hbs @@ -2,145 +2,133 @@ title: Forms description: Users input things. The server gets things. --- -{{#extend "layouts/components"}} - {{#content "content"}} -
-
-

Buttons

-

Usually they submit forms or trigger JavaScript actions.

-
- -
- - - Link -
-
- -
-
-

Inputs

-

Text, password, checkbox etc.

-
- -
-
-
- Text inputs - - - - - - - - - - - - - - - - - -
+{{#extend "layouts/components"}} +{{#content "body"}} -
- Numeric inputs + {{#embed "layouts/article" title="Buttons" description="Usually they submit forms or trigger JavaScript actions."}} + {{#content "body"}} + + + Link + {{/content}} + {{/embed}} - - + {{#embed "layouts/article" title="Text Inputs"}} + {{#content "body"}} + + - - + + - - + + - - -
+ + -
- Checkbox + + - - + + + {{/content}} + {{/embed}} - - + {{#embed "layouts/article" title="Numeric Inputs"}} + {{#content "body"}} + + - - + + - - + + - - -
+ + + {{/content}} + {{/embed}} -
- Radio + {{#embed "layouts/article" title="Checkbox"}} + {{#content "body"}} + + - - + + - - + + - - + + - - + + + {{/content}} + {{/embed}} - - -
+ {{#embed "layouts/article" title="Radio"}} + {{#content "body"}} + + -
- Select + + - - -
+ + -
- Color and file inputs + + - - + + + {{/content}} + {{/embed}} + + {{#embed "layouts/article" title="Select"}} + {{#content "body"}} + + + + + + {{/content}} + {{/embed}} - - -
-
-
-
+ {{#embed "layouts/article" title="Color and File"}} + {{#content "body"}} + + -
-
-

Textarea

-

Multi-line inputs

-
+ + + {{/content}} + {{/embed}} -
-
- - + {{#embed "layouts/article" title="Textarea"}} + {{#content "body"}} + + - - -
-
-
+ + {{/content}} + {{/embed}} + +{{/content}} {{/extend}} diff --git a/src/html/components/typography.hbs b/src/html/components/typography.hbs index c2eadacf..877a62be 100644 --- a/src/html/components/typography.hbs +++ b/src/html/components/typography.hbs @@ -2,69 +2,82 @@ title: Typography description: All those text styles in one place. --- + {{#extend "layouts/components"}} - {{#content "content"}} -
-
-

Headings

-

Also called headlines. Or titles.

-
+{{#content "body"}} -
-

Heading Number 1

-

Heading Number 2

-

Heading Number 3

-

Heading Number 4

-
Heading Number 5
-
Heading Number 6
-
-
+ {{#embed "layouts/article" title="Headings"}} + {{#content "body"}} +

Heading Number 1

+

Heading Number 2

+

Heading Number 3

+

Heading Number 4

+
Heading Number 5
+
Heading Number 6
+ {{/content}} + {{/embed}} -
-
-

Text

-

Paragraphs. Lists. Quotes. You name it.

-
+ {{#embed "layouts/article" title="Lists"}} + {{#content "body"}} +
    +
  • Unordered List Item
    • +
  • Unordered List Item
    • +
  • Unordered List Item
    • +
  • Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
    • +
  • Unordered List Item
    • +
-
-

Heading Number 1

+
    +
  1. Ordered List Item
    2. +
  2. Ordered List Item
    3. +
  3. Ordered List Item
    4. +
  4. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
    5. +
  5. Ordered List Item
    6. +
+ {{/content}} + {{/embed}} -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

+ {{#embed "layouts/article" title="Text"}} + {{#content "body"}} +

Heading Number 1

-

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

-

Heading Number 2

+

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-
    -
  • Unordered List Item
    • -
  • Unordered List Item
    • -
  • Unordered List Item
    • -
  • Unordered List Item
    • -
+

Heading Number 2

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+
    +
  • Unordered List Item
    • +
  • Unordered List Item
    • +
  • Unordered List Item
    • +
  • Unordered List Item
    • +
-
    -
  1. Ordered List Item
    2. -
  2. Ordered List Item
    3. -
  3. Ordered List Item
    4. -
  4. Ordered List Item
    5. -
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-

Heading Number 2

+
    +
  1. Ordered List Item
    2. +
  2. Ordered List Item
    3. +
  3. Ordered List Item
    4. +
  4. Ordered List Item
    5. +
-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+

Heading Number 2

-
-

This is a blockquote. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

-
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+
+

This is a blockquote. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

+
-
+

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-
-
+
+ +

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

{{/content}} + {{/embed}} + +{{/content}} {{/extend}} diff --git a/src/html/pages/index.hbs b/src/html/pages/index.hbs index d399dbb2..2588623a 100644 --- a/src/html/pages/index.hbs +++ b/src/html/pages/index.hbs @@ -1,15 +1,16 @@ --- title: Frontpage --- + {{#extend "layouts/pages"}} - {{#content "content"}} -

This is your Frontpage

+{{#content "body"}} +

This is your Frontpage

-

It's the first page (index.html) the visitor of your site will see.

-

Use the 'pages'-directory to create prototypes of the final web site.

-

Ideally these pages will be built with resusable components from the 'includes'-folder.

+

It's the first page (index.html) the visitor of your site will see.

+

Use the 'pages'-directory to create prototypes of the final web site.

+

Ideally these pages will be built with resusable components from the 'includes'-folder.

-

Image Placeholder

- Image Placeholder - {{/content}} +

Image Placeholder

+ Image Placeholder +{{/content}} {{/extend}} diff --git a/src/html/pages/subfolder/example.hbs b/src/html/pages/subfolder/example.hbs index 9ff27d32..3d8810e3 100644 --- a/src/html/pages/subfolder/example.hbs +++ b/src/html/pages/subfolder/example.hbs @@ -1,12 +1,13 @@ --- title: Page in a Subfolder --- + {{#extend "layouts/pages"}} - {{#content "content"}} -

Page in a Subfolder

+{{#content "body"}} +

Page in a Subfolder

-

Maybe you want to create hierarchic directory tree?

-

Just do it – with subfolders!

-

Gulp takes care of everything else.

- {{/content}} +

Maybe you want to create hierarchic directory tree?

+

Just do it – with subfolders!

+

Gulp takes care of everything else.

+{{/content}} {{/extend}} diff --git a/src/html/partials/includes/example.hbs b/src/html/partials/includes/example.hbs index 320c49bb..0644f567 100644 --- a/src/html/partials/includes/example.hbs +++ b/src/html/partials/includes/example.hbs @@ -1,2 +1 @@ -

This is a namespaced include

-

It should be placed in a subfolder for better file organization!

+

This is a partial file that was included.

diff --git a/src/html/partials/includes/namespace.example.hbs b/src/html/partials/includes/namespace.example.hbs index d28acb0a..1fff52e4 100644 --- a/src/html/partials/includes/namespace.example.hbs +++ b/src/html/partials/includes/namespace.example.hbs @@ -1,3 +1,3 @@ -

This is a sample include file.

-

Includes will never be rendered into full pages.

-

They have to be included (hence the name) in other files (pages, layouts or even includes)

+

This is a partial file that was included.

+

Partials will not be rendered into standalone pages.

+

They have to be included in other files (pages, layouts or even other includes)

diff --git a/src/html/partials/layouts/article.hbs b/src/html/partials/layouts/article.hbs new file mode 100644 index 00000000..926d2521 --- /dev/null +++ b/src/html/partials/layouts/article.hbs @@ -0,0 +1,10 @@ +
+
+

{{title}}

+

{{description}}

+
+ +
+ {{{block "body"}}} +
+
diff --git a/src/html/partials/layouts/components.hbs b/src/html/partials/layouts/components.hbs index d3142bcb..7af8b9f1 100644 --- a/src/html/partials/layouts/components.hbs +++ b/src/html/partials/layouts/components.hbs @@ -20,7 +20,7 @@
- {{{block "content"}}} + {{{block "body"}}}
diff --git a/src/html/partials/layouts/pages.hbs b/src/html/partials/layouts/pages.hbs index d4da13db..610f5dae 100644 --- a/src/html/partials/layouts/pages.hbs +++ b/src/html/partials/layouts/pages.hbs @@ -18,7 +18,7 @@ {{> "styleguide/nav"}} {{/if}} - {{{block "content"}}} + {{{block "body"}}}