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 사이즈

.

Megatype: Easy typographic structure

Megatype makes it easy to create typographic structure.

Sierra SCSS micro library http://sierra-library.github.io/

This is a micro SCSS library to help you build websites, without all the arbitrary selectors.

    ✓ Only 37.03 kB (8.9 kB gzipped)
    ✓ Modular
    ✓ 2 configurable grid systems (bootstrap and flexboxgrid)
    ✓ Adjust colors, borders, radius & sizes in the variables.scss file
    ✓ Responsive

https://www.periscope.tv/

https://medium.com/@periscope

소개

>Periscope 이야기

바로 1년 전, 우리는 다른 사람의 시각을 통해 세계 곳곳을 살펴본다는 아이디어를 떠올리고 여기에 매료되었습니다. 우크라이나 시위대의 눈에 비친 세상을 볼 수 있다면, 터키 카파토키아 상공의 열기구에 올라 석양을 바라 볼 수 있다면 얼마나 멋진 일일까요? 터무니없는 생각처럼 들릴 수도 있지만, 우리는 순간이동에 가까운 세상에 없던 무엇인가를 만들고 싶었습니다. 세계 곳곳의 사건과 장소들을 접할 수 있는 방법은 기존에도 많이 있었지만 실시간 동영상보다 더 생생한 방법은 없다는 것을 깨달았습니다. 사진이 수천 단어의 말을 대신할 수 있다면, 실시간 동영상은 마치 현장에 있는 것처럼 세계를 여행할 수 있게 해드릴 것입니다.

Grd: A CSS grid framework

Grd is a CSS grid framework using Flexbox. It’s only 512 bytes (Gzipped), and provides just two base classes.

A CSS grid framework using Flexbox. Only 512 bytes (Gzipped). https://1000ch.github.io/grd

.

Morphy-Toolbar: An expanding/collapsing toolbar

Morphy-Toolbar is a morphing toolbar that can expand or collapse at any time. It’s easy to integrate with several customizations already possible.

 A morphing toolbar that can expand/collapse at anytime

Ever wanted a beautiful transition when switching fragments?

Morphy Toolbar is your answer :)

Overview

Why did I create this library? I often read questions on stack overflow on how to reproduce an animation like this one, more or less always resulting in the use of the design support library CollapsibleToolbar. However, I find this library to be quite buggy, and it aims to be used for scrolling events.
I needed this library to have a custom toolbar with a picture, title and subtitle, and the possibility to animate it whenswitching fragments.

• Easiest integration ever
• No need to handle transitions or whatever youself
• Perfect to animate a small changes statically without scrolling events
• Several customisations already possible, more to come
• Smooth animation for transitions (for example when switching fragments)

Sample

You can checkout the Sample Application on the Play Store

모바일 - 반응형 웹

http://readme.skplanet.com/?p=9739   2015/01/20

• Part.1 가변폭 설정하기
• Part.2 최솟값/최댓값 설정하기
• Part.3 컬럼 나누기
• Part.4 하이브리드 레이아웃
• Part.5 미디어 쿼리 설정
• Part.6 가변폭 미디어 콘텐츠
• Part.7 고정폭 테이블
• Part.8 모바일 뷰 포트 설정
• Part.9 글꼴 크기를 반응형으로 제어
• Part.10 웹 폰트 사용

반응형 웹에 대하여 조금 더 상세히 알고 싶다면 제가 쓴 다른 글들을 참고해 보세요.

• 미디어 쿼리 이해 – http://naradesign.net/wp/2012/05/30/1823/
• HelloWorld 블로그 반응형 웹 개편 – http://helloworld.naver.com/helloworld/81480
• DEVIEW 2012 반응형 웹 구축기 – http://naradesign.net/rwd/pr/
• 글꼴 사이즈를 반응형으로 만들기 – http://naradesign.net/wp/2014/11/06/2077/

반응형 웹과 관련하여 최근 저에게 영감을 주었던 다른 저자의 글도 참고해 보세요.

• 9 basic principles of responsive web design – http://goo.gl/ryi8sT
• 레티나 웹(Retina Web)에 대응하는 우리들의 자세 : “래스터 이미지 편” – http://goo.gl/VxbMzX

.

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.