login

Introduction

As I study various languages I focus on learning the code, implementing the code in some way, and storing it in my 'toolbox' for future use. An important part of learning is sharing your new knowledge with others.

Here is a collection of simple user interface components that I created while studying html and css.

Banner

The title banner at the top of this page is a flex container with a background image. A gradient filter and a text shadow is used to improve readability.

Badge

Mia Onyx Samantha

Card

A basic card layout.

Backyard Blooms

Why not take a break to check out the 1000s of pictures taken in our backyard garden.

Posted by Kingbird

Empty State

This is an example of an 'empty state' flex layout. It's just an svg and two paragraphs centered with flex on a light blue background.

Shopping cart empty

Get started by browsing our recommended products.

Feeds

A feed is similar to a notification but with a time element.

  1. Kingbird on globe fountain

    Kingbird

    Landed on the globe fountain in the backyard.

  2. Hummingbird

    Hummer In The Blue Sky - simulates an extra long name to test layout.

    Hovered around the clematis and feeder. It then flew NE and disapeared.

Float An Element

This section uses a combination of flex and float to place an image on the right side, and vertical center of a paragraph element. The Caterpillar and Alice looked at each other for some time in silence. At last the Caterpillar took the hookah out of its mouth, addressed her in a languid, sleepy voice and asked, "Where are you travelling to on this beautiful sunny day?" Alice replied cheerfully, "I'm going down the rabbit hole to visit my friends. I'll return later and tell you about all my adventures." Then she slowly skipped away into the forest and dissapeared.

Notifications

This is an example of notifications.

  1. Mia 'liked' your comment!

  2. Scooby has 'poked' you. Would you like to poke back?

Pagination

Here is an unordered list with anchors styled to look like a pagination bar.

Responsive Grid Using Flex

This is a unique layout that uses flex to create a responsive grid. Notice how the items wrap but the item text does not wrap and the item cell widths grow to fill each line. Cool!

This works well when the content lengths are variable or unknown.

  • Pick a Tool:

  • Air Compressor
  • Angle Grinder
  • Axe
  • Drill Press
  • Hacksaw
  • Hammer
  • Hammer Drill
  • Jig Saw
  • Radial Arm Saw
  • Router
  • Screw Driver
  • Table Saw
  • Thickness Planer
  • Utility Knife
  • Wrench

Of course it's only cool if you have a place to use it. The 'Articles' page shows a dynamic example of this user interface component at the bottom of the page. It uses a PHP foreach loop to populate list items with an anchor pointing to each available article. As more articles are created, the article name/anchor is added to the table. The footer of this page also uses this component to display several links.

Table

Funiture Value
Total Value:

Toast

This is a simple toast element with an icon, title, action and body.

Article Saved

Success: Your article has been saved.

More Articles > Article Quick Pick