Posted by 홍반장水 홍반장水
TAG 2018, Design, trend, UI, UX

Posted by 홍반장水 홍반장水

[FACEBOOK UI] github - facebook UI material

An open source LMS (eLearning platform) for MOOCs and online courses (like or with extra features). Tech stack includes PWA & SPA with Facebook's React, Google's Firebase, Slack API and Material UI

This is a UI version of the main Facebook timeline, using Polymer and webcomponents. The main idea is to make a visual substitution of the react.js view-controllers with the Material Design concept.


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 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 홍반장水 홍반장水

React Storybook: Develop UI components outside your app


React Storybook lets you develop React UI components without running your app. Just load your UI components into React Storybook and start working on them.

react storybook





Posted by 홍반장水 홍반장水

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


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)


You can checkout the Sample Application on the Play Store


Posted by 홍반장水 홍반장水

Gridlex: Flexbox grid system

Gridlex is a simple flexbox grid system. There are three different ways to use it: the basic way where you add a class; the precise, cell-by-cell way; or the automatic, where you just tell it how many cells you want in the grid.


Just a Flexbox Grid System

v. 2.0.5

The concept is simple: you need to wrap your .col in a .grid.

What can we expect?

  • Basically each column is the same width as every other cell in the grid.
  • But you can add sizing classes to individual columns.
  • For responsive designs, you can add classes based on media-queries.
  • Top, bottom, or middle. For the grid. And for the columns.
  • Grids can be nested. Always. Directly in a column.

Less, Sass, CSS?

I just wanna use it in my page!

To use Gridlex out of the box, call the gridlex.css or gridlex.min.css file in your project :


Posted by 홍반장水 홍반장水

PatternPack: Easy pattern library creation and maintenance


PatternPack makes it easy to create and maintain pattern libraries. It’s a static site generator that lets you document your UI using Markdown and just one grunt task.










Posted by 홍반장水 홍반장水
Material UI: A Material Design CSS framework


Material UI is a CSS framework and set of React components that incorporate Google’s Material Design. Components include buttons, drop downs, menus, switches, toolbars, and more.


material ui


























Posted by 홍반장水 홍반장水

UILang: A UI-focused programming language

UILang is a UI-focused programming language specifically for web designers. It makes it easy to build interfaces with things like pop overs, galleries, tabs, overlays, and more.


Posted by 홍반장水 홍반장水