Skip to content

UX pattern of switching from desktop tabs to vertical accordion without duplicate markup.

License

Notifications You must be signed in to change notification settings

offsetChris/tab-to-accordion

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

tab-to-accordion

UX pattern of switching from desktop tabs to vertical accordion without duplicate markup.

This pattern was originally developed to be embedded into a large, 3rd party application. For the purposes of this repository I have modified it from its original, messy system markup version into a simple concept demo.

View the demo here: https://offsetchris.github.io/tab-to-accordion/build/

Sass design pattern

Inspired by Brad Frost's Atomic design and BEM principles, named for a local landmark in MN.

Bits Bits are small repeatable patterns like buttons, section designations, etc.

Pieces Similar to Atomic design's components. Small assemblages of bits that make simple UX patterns.

Whole Large, page layout patterns (probably not used in this example)

Sass design reference:

Walker Art Center Minneapolis MN Artist: Lawrence Weiner Period: Conceptual art Created: 2005 Genre: Abstract art

About

UX pattern of switching from desktop tabs to vertical accordion without duplicate markup.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published