easterpeanut / legobox Goto Github PK

Make a (sub)brick out of the logo. (momentarily in the header)

• logo (required)
• text (default none)
• links to homepage

• list (loop through products)
• list_item
• tile

Options:

• image (required)
• summary (required)
• link (required)

• list (loop through blog posts)
• list_item
• tile

Contains:

• image (default none)
• summary (required)
• author (required)
• date (auto created at inserted)
• link (required)

• Hero
• author name (required)
• author image (optional, default placeholder)
• date
• Rich text
• blog preview (related / more)

• Intro
• Product list
• Lazy loading
• Filtering?

• list (loop through team members)
• tile

Contains:

• image (default placeholder)
• name (required)
• function (optional)
• email link (optional)

Make sure every project has them in it. Just plain content pages.

• Header
• Footer
• Hero
• Product preview
• Featured
• Slider

Possible sub bricks:

• navigation
• company info (telephone nr, email addr, address)
• logo + company description
• follow on social media
• newsletter subscription?
• (twitter) feed / blog posts
• opening hours

Also a 'lower footer'
copyright / year / privacy policy / terms of service / sitemap

• hero
• team list
• cta

A stretching image header (height and width, depending on the img ratio) with the following options:

• narrow or full-width variants (default full-width)
• image to set as bg (required)
• text / header to set (optional)
• button link + text (optional)
• transparant layer color and opacity (default none)

As brick? Or not needed?

See if we want to add this.

Photoswipe?

• look at how to show the gallery items
• standard full window view
• input:
  • images with any ratio (required)
  • subtitle (optional)

• list (loop through featured items)
• tile

Contains:

• image (default none)
• title (required)
• summary (optional)

• Strip comments and other clutter
• make sure to be able to pass just a filename and not the relative path, need to configure sprockets?

Do we want this?

• phone number
• language switcher
• slogan part

Collapse animation: something material design-like.
Loop over all available pages to render the navigation items.

Videos, animations, photographs, illustrations?

Some nice trends for this year: https://webflow.com/blog/20-web-design-trends-for-2019

Also make sure the icon in the button can be passed to the hero: button_icon_left and button_icon_right being optional

Search throughout site. Needs a form and plugin search

Add these meta tags in the head.

• Hero
• author name (required)
• author image (optional, default placeholder)
• date
• Rich text
• news preview (more)

• Intro
• Blog list
• Lazy loading
• another search form maybe in sidebar?

Because 'sass' is replaced by 'sassc' (middleman/middleman@36326e4) got some issues with sprockets: middleman/middleman-sprockets#132. Temporary solution is to still install 'sass'.

Originally posted by @EasterPeanut in #53 (comment)

Rather not include sass, so whenever this is fixed in middleman, remove 'sass'

• Input text
• Input email
• Input number / tel
• Textarea
• Select
• Radio
• Checkbox
• File
• Datepicker / date / datetime / time
• Button (submit, reset, regular)

Related to #20 :

• Search form / input

Use glob @import "../bricks/**/*"; in site.css.scss to prevent having to add every partial scss to it.

Edit: also //= require "../bricks/**/*" for site.js

Possible options:

• image (default placeholder)
• author (required)
• text (required)
• date (auto default to inserted date / updated date)
• use slider for this

Instead of :class => "button primary ghost" I'd like to do :class => [:button, :primary, :ghost]

• Intro
• News list
• Lazy loading

Use bricks from the form and maybe set this up with netlify.

• Hero
• Rich text
• product preview (related)

• list (loop through news items)
• list_item
• tile

Contains:

• image (default none)
• summary (required)
• author (required)
• date (auto created at inserted)
• link (required)

• Hero
• intro
• contact details
• contact form
• map

Investigate Taiga.

Edit: just use CSS grid.

See what parts can be added last.
Investigate dns-prefetch / preload / preconnect

• gradient option
• color knockout of font and icon?

slick?
uses hero as content
options:

• show next / prev
• show pagination
• auto rotate
• pauze on hover
• rotation duration
• links for whole slide

• Hero / Slider
• rich content (can include hero/gallery/slider/button)

• Markdown parsing
• Style every part possible

Also possible to include:

• hero
• slider
• gallery
• button

..and let the build config take care of it and place it in the root.

To shorten this:

<svg class="icon left icon-<%= icon_left %>"><use xlink:href="#icon-<%= icon_left %>"></use></svg>

to:

<%= partial("bricks/icon/icon", locals: { icon: icon_left,
                                          class: "left" }) %>

• button text (required)
• button link (required)
• button style (default style)
• icon (default none)
• button_class > tertiary / black?
• round variant?

Wait for this to happen: dear-github/dear-github#113

So the nav gets the background of this hero.

• - Change the icon
• - More radius options
• - Gradient option

Add a maps brick.
Options should include:

• address (required)
• marker (default style)
  (multiple addresses and markers?)
• some color settings?
• popup?
• color and text overlay?

Google maps or alternative?