Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
eureka.js is designed HTML & mobile first and works well with modern smartphones.
One of the challenges of approaching
eureka.js with HTML-first design principles was translating the familiar functionality of the "tree" sidebar on a mobile device. When designer an HTML-first component there is usually a tag or two you simply couldn't do without, in that case that was the
<optgroup> tag. Using
<optgroup> we can give our users a way to easily navigate to any directory.
<optgroup> is used by
eureka.js on mobile and when the sidebar area is closed
Prioritizing Focused Items
Whenever a media items receives focus it is allowed to occupy more space than the other items. Items can receive focus from being tapped, clicked, or tabbed to using keyboard shortcuts.
Focused Item on the iPhone 6.
Focused item on the iPad
Focused item on Safari OS X
Wider viewports leverage a Media Source component that features a
<select> to change the current media source and a basic "tree" component to browse the current media source. This sidebar can be collapsed to allow the Media Content area to take up more space. When the sidebar is collapsed, alternate components are displayed that mimic the functionality of the sidebar in a simpler way.
Eureka currently supports up to four different views for browsing media. The default "table" view allows name, dimension, file size, and edited on information to easily accessed and even sorted on. Additionally, focused media items will show contextual options to do things like choose or rename the item.
Eureka Table View
Eureka Thumb View
Eureka Grid View
Eureka List View