Stashy

A collection of components for doing responsive things

  Download   View project on Github

Stashy is a library aiming to help you with your responsive designs. Inside, you'll find layouts and utilities that might just be useful to you.

Components in this library are mainly focussed on layouts, so you'll have to style them properly yourself for the look and feel you are after. For example, this site uses the awesome Bootstrap plus some personal CSS.

All the pages on this site were built using Stashy, so you can check what you can do with these components by going around the docs.

OffCanvas

Offcanvas layouts have the ability to adapt to any screen size by hiding / showing panels when reaching certain break points.

This page, and most in these docs are offcanvas layouts, so resize your browser to see them in action. In small sizes, click the     buttons for showing side panels.

Go to OffCanvas docs

Flyout

This component allows you to create a left menu showing and hiding its content on user interactions.

You can see this component in web and mobile applications like the Facebook and Google ones.

Go to Flyout docs

Sticky

Stick your footer always at bottom.

Go to Sticky docs

Focal Point

Cropping images at client side inspired in the focal point technique.

Go to FocalPoint docs

Toogle Menu

Top menu showing all its links in large screens and hiding them on smaller ones for showing a button to slide the menu down.

Menu at the top of this page is a sample of Toggle using Stashy. Resize your browser window to see it in action.

Go to Toggle docs

Slider

This componet allow to create touch enabled sliding layouts or carousels

Go to Slider docs

ShowMeMore

This utility allow hiding list items and showing a "Show more" button.

Go to ShowMeMore docs

Loader

Nice loader for your responsive designs inspired in the Windows 8 / Windows Phone one.

Go to Loader docs

Refresh

Touch enabled pull to refresh control.

Go to Refresh docs

ElasticText

Adapt text to any screen size.

Go to ElasticText docs

ElasticVideo

Adapt videos to any screen size.

Go to ElasticVideo docs

List

Beautiful responsive List for any device.

Go to List docs

Table

Responsive tables with priority columns.

Go to Table docs

Notify

Notifications using toasts, panels and bars.

Go to Notify docs

You can check each component across the docs, but it´s easy to get started by simply checking the standalone samples in the Github Project.

Check it!!

For using the whole library, you need to add the Stashy files you´ll find in the dist folder of the Github project.

If you want to use specific components, you need to include only the CSS and JavaScript required for those components so you have to build the specific less files and add the required JavaScript ones.

You´ll find this dependencies in the component doc pages.