hugobricks doc. (SKELETON) (nested menus ... à-la hugocodex.org add-on ... ) makingof

hugobricks-doc-SKELETON.md

( HBKS - draft Table of Contents )

(nested menus might look like this ... : )

1. [Hugobricks]
   1. [What’s included in Hugobricks?]
   2. [Hugobricks that are available (see use cases and some snippets of below) :]
   3. [Shortcodes that are available (se use cases and some snippets of below):]
      1. [Hugobricks workflow]
      2. [Hugobricks under the Hood]
      3. [Get started with Hugobricks]
      4. [Hugobricks Feedback]
      5. [Credits and licenses]
2. [Appendix - Use Cases (bricks)- study :]
   1. [Use Case 1 - Call To Acion (CTA brick)
      1. [Image in a hugobrick]
      2. [Style guide (github/. link to the relevant styles.css section goes here \\!/)]
   2. [Use Case 2 - Featuring (Features brick)]
      1. [Style guide (github/. link to the relevant styles.css section goes here \\!/)]
   3. [Use Case 3 - Frequently Asked Questions (CTA brick)]
      1. 'Making of': (to be reworded) take fine title layoutting + 'wide' css snippet and pivot around the FAQ list?
      2. [Style guide (github/ . link to the relevant styles.css section goes here \\!/)]

Hugobricks

View DEMO website and get the source code here; Hugobricks is a free website theme for Hugo. It makes building Hugo websites child’s play due to its stackable (LEGO-like) content bricks. Stack an intro brick on top of some image bricks and a pricing table and build a complete website in seconds!

What’s included in Hugobricks?

Hugoplate is a comprehensive starter theme that includes everything you need to get started with your Hugo project. What’s Included in

• 10+ Pre-build pages
• 99+ Google Pagespeed Score
• Built with Hugo and CSS variables for easy styling
• Fully responsive on all devices
• SEO-optimized for better search engine rankings

Hugobricks that are available (see use cases and some snippets of below) :

• Intro,
• CTA,
• Image,
• Image2 (alt),
• About,
• Contact,
• 404 Page
• Title,
• Map,
• Preheader,
• Team,
• Reviews,
• Usps,
• Faqs,
• Quote,
• Stats,
• Pricing,
• Carousel,
• Video,
• Blog,
• Post,
• Related
• Authors
• Search
• Products,
• Product,
• Stats,
• Gallery,
• Brands,
• Openinghours

Shortcodes that are available (se use cases and some snippets of below):

• Contact form
• Map
• Button (primary and secondary)
• Social buttons
• Contact buttons

Hugobricks workflow

Hugobricks aims to enhance the Hugo web framework by providing a variety of pre-made bricks for straightforward website-building.

Our companion project, hugocodex, guides beginners in starting a Hugo project from scratch. For those who already have experience with Hugo and want to use it for rapid prototyping and iterating, Hugobricks offers premade websites and customizable components powered by Hugo.

Cloning this repository allows you to start building lightning-fast static sites with flexibility and ease with and already working website.

Hugobricks under the Hood

According to Hugo's official documentation, the framework offers :

• Shortcodes
• Partials
• Layouts / templating

...we focus on.

Hugobricks takes advantage of these features to allow content re-use, pivot around content and layouts, and calling the required styling and functional logic.

Get started with Hugobricks

In order to get a working website feel free to

• clone our repository and start building with stackable content bricks.
• enjoy your already working hugo website, plan your changes/iterations
• re-use default hugobricks
• and/or customise them !

Hugobricks Feedback

Make your wishlist. Missing a given Hugobrick ?,let us know in this open conversation here.

1. Let's talk about general Hugobricks approach

   Feel free to give feedback, comment, issue, submit your wishlist or fork. Hugobricks is here to make your Hugo experience even better.

Credits and licenses

1. Inspiration, the functionality is inspired by the many Gutenberg Block Plugins that are available online. The design is based on the MIT licensed Hugoplate from Zeon Studio. The fonts and icons are Apache Licensed and come from Google Fonts and Google Material Symbols. The illustrations are free to use but require an attribution to Storyset. The avatars are CC0 licensed and come from Pravatar. The social media icons (Facebook, Instagram, etc) belong to the respective social networks/their owners.

2. Source code repository

3. MIT Licensed - made wi t h < l o v e / >

Use Case 1 - Call To Acion (CTA brick)

Image in a hugobrick

Style guide

(github/.../hugobricks ... link to the relevant styles.css section goes here \\!/)

Use Case 2 - Featuring (Features brick)

Style guide (github/.../hugobricks ... link to the relevant styles.css section goes here \\!/)

Use Case 3 - Frequently Asked Questions (CTA brick)

'Making of':

(to be reworded) take fine title layoutting + 'wide' css snippet and pivot around the FAQ list?

Style guide

(github/.../hugobricks ... link to the relevant styles.css section goes here \\!/)