MUURIv0.2.0

Responsive, sortable, filterable and draggable grid layoutsMIT licenseBrowser support: IE9+Grab it and grid it!


Site     : https://haltu.github.io/muuri/

Github : https://github.com/haltu/muuri


Responsive, sortable, filterable and draggable grid layouts 



Posted by 홍반장水 홍반장水

Driveway: Pure CSS masonry layout

Driveway is a pure CSS masonry layout aid. It was developed using stylus, and is exploring pure CSS masonry layouts.

 

pure CSS masonry layouts 

 

driveway

driveway is an explorative project for developing pure CSS masonry layouts. It is developed using stylus.

  • easy to use
  • interactive
  • responsive
  • config driven
  • customisable
  • extendable

 

탭 사이즈 탭 세로 사이즈 스마트폰 세로 사이즈

 

 

PC 사이즈PC 사이즈

 

 

 

 

 

 

 

 

 

 

.

Posted by 홍반장水 홍반장水

Turntable.js: Responsive jQuery slider

 

 

Turntable.js is a responsive jQuery slider. It lets you flip through a series of images as your mouse/finger moves across a container.

turntable.js

 

 

 

 

 

Posted by 홍반장水 홍반장水
Responsive CSS3 slider without Javascript

 

CSS3 Responsive Slider is, as the name implies, a responsive CSS3 slider without Javascript. The actual slider is much like any JavaScript slider. It floats all of the content areas (articles) next to each other. And then hides the overflow. We then animate the margin of the inner div, so if we have 5 articles, moving the left-margin -100% would give us the second article. To save our input we are using radio buttons. As mentioned above you could also use :target and anchor links, but it doesn’t mimic Javascript in the same way as you would only be able to handle one action at a time, you would end up with a bunch of items in your history (clicking back would turn the slider back one), and it’s been done before.
Responsive CSS3 Slider Without Javascript

Posted by 홍반장水 홍반장水

 bxSlider



The Responsive jQuery Content Slider



Why should I use this slider?

  • Fully responsive - will adapt to any device
  • Horizontal, vertical, and fade modes
  • Slides can contain images, video, or HTML content
  • Advanced touch / swipe support built-in
  • Uses CSS transitions for slide animation (native hardware acceleration!)
  • Full callback API and public methods
  • Small file size, fully themed, simple to implement
  • Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+
  • Tons of configuration options

How to install

Step 1: Link required files

First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download the package from this site and link the bxSlider CSS file (for the theme) and the bxSlider Javascript file.

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

Step 2: Create HTML markup

Create a <ul class="bxslider"> element, with a <li> for each slide. Slides can contain images, video, or any other HTML content!

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

Step 3: Call the bxSlider

Call .bxslider() on <ul class="bxslider">. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

Check the examples and FAQs for more information on installation and customization


Posted by 홍반장水 홍반장水

Chartist.js: Simple responsive charts

 

Chartist.js makes it simple to create highly customizable responsive charts. It’s completely built and customizable with SASS, uses SVG, and is DPI independent.

chartist.js

 

Checkout the documentation site at http://gionkunz.github.io/chartist-js/

Checkout this lightening talk that gives you an overview of Chartist in 5 minuteshttps://www.youtube.com/watch?v=WdYzPhOB_c8

Chartist.js is a simple responsive charting library built with SVG. There are hundreds of nice charting libraries already out there, but they are either:

  • not responsive
  • use the wrong technologies for illustration (canvas)
  • are not flexible enough while keeping the configuration simple
  • are not friendly to your own code
  • are not friendly to designers
  • have unnecessary dependencies to monolithic libraries
  • more annoying things

That's why we have started Chartist.js and our goal is to solve all of the above issues.

 

 

 

 

 

 

 

 

Posted by 홍반장水 홍반장水

S Gallery: Responsive jQuery gallery plugin

S Gallery is a responsive jQuery gallery plugin that includes CSS3 animations inspired by Sony’s products gallery. It supports touch/swipe functions, too.

s gallery

 

Licensed under Creative Commons Attribution Non-Commercial (CC BY-NC 4.0)

 

 

Posted by 홍반장水 홍반장水

Mobify.js: Adapt your site for any device

 

Mobify.js makes it quick and easy to create responsive versions of your website. It provides responsive images, JavaScript and CSS optimization, and Adaptive Templating, among other features.

mobify

Mobify.js is an open source library for improving responsive sites by providing responsive images, JS/CSS optimization, Adaptive Templating and more. 
Posted by 홍반장水 홍반장水

Fluidity: Making HTML 100% responsive

Fluidity is a tiny bit of CSS (107 bytes total) that fixes the part of HTML that isn’t completely responsive. It makes changes to the way images, tables, iframes, preformatted text, and canvas elements, so that they’re completely responsive.

fluidity

 

Posted by 홍반장水 홍반장水

Fluidity: Making HTML 100% responsive

CSS - Responsive / Added on March 17, 2014 / Add to favorites

Fluidity is a tiny bit of CSS (107 bytes total) that fixes the part of HTML that isn’t completely responsive. It makes changes to the way images, tables, iframes, preformatted text, and canvas elements, so that they’re completely responsive.

fluidity

 

FLUIDITY

A fully responsive css framework that is impossibly small

HTML out of the box is almost 100% responsive. This stylesheet fixes that in 115 minified bytes. Let's make the web just a bit more responsive shall we?

Installing fluidity

Production

Just include this file in the head of your html file.

<link rel="stylesheet" href="css/fluidity.min.css">

Development

Or if you want to develop with the uncompressed version

<link rel="stylesheet" href="css/fluidity.css">
Posted by 홍반장水 홍반장水