endlesshypnosis / pattern-party

Pattrn Party

By Nick Svetnicka for Turing

Introduction

This is a showcase of 3 common widgets encountered in many web applications, and provides consistant styling across components. Each component has been styled for standard monitor size, a mid/tablet size, and finally a layout designed for mobile devices.

Components

Accordion Tabs

• Basic tabbed structure where only one tab can be active at any time, and there must always be an active tab.

• There is minimal javascript used to swap the css classes on the for the active tab.

Flexible Cards

• This widget demonstrates a basic card layout with un-equal card widths, which responsively react to the screen resoluion by adjusting their size.

Header Bar

• Demonstrates how a typical navigation bar could be layed out, with a main site icon, a series of navigation links, and finally a search bar.

• On a mobile layout, this bar is reconfigured into a column based layout, and acts more like a hamburger menu.

Built With

• HTML
• CSS
• JQuery

pattern-party's Issues

add readme

add codepen