[FACEBOOK UI] github - facebook UI material

https://github.com/nekomy/nekomy-platform

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

https://github.com/danivegamx/facebook-material

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.

...

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

.

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.

.

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

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.

Gridlex

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 :

.

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.

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.

.

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.