반응형 웹 디자인의 9가지 기본 원칙

https://knulab.com/archives/1153

MUURIv0.2.0

Responsive, sortable, filterable and draggable grid layoutsMIT license•Browser 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 http://haltu.github.io/muuri/

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 http://jh3y.github.io/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 사이즈

.

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.

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.

 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

<!-- 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" />

<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>

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

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