Markdown UI

Responsive User Interfaces in Markdown

A framework for creating responsive UI’s for mobile and web using Markdown Syntax. It is a tool for Rapid Prototyping UI’s for Single-page and Multiple-page apps, and allows to write UI’s only once and then translate it to Semantic UI 2.0, BootStrap 3 (coming soon), Foundation (coming soon), etc.

It helps the developer to focus on the big picture on paper or text-editors, and with few details it lessen the cognitive load which means having meaningful productivity which equates to happiness!

> Pointing Menu:
> [Home](#home "active")
> [Messages](#messages)
> [Friends](#friends)
> > Right Menu:
> > [Logout](#logout)

__Button|Add Friend__

Installation

gem install markdown-ui

Usage

markdown-ui index.md > index.html

Github

github.com/jjuliano/markdown-ui

Buttons

Button

Standard Button

Standard Button
Preview
Follow
Markdown Syntax
__Button|Follow__
Standard Button with Custom Class
Preview
Markdown Syntax
__Follow-Button Button|Follow__
or
__Button|Follow|Follow-Button__
Focusable Button
Preview
Markdown Syntax
__Focusable Button|Follow__

Emphasis

A button can be formatted to show different levels of emphasis

Emphasis
Preview
Save
Discard

Save
Discard
Markdown Syntax
__Button|Save|Primary__ __Button|Discard__ __Button|Save|Secondary__ __Button|Discard__

Animated

A button can animate to show hidden content

Animated
Preview
Next
Markdown Syntax
__Animated Button|Text:Next;Icon:Right Arrow__
Vertical Animated
Preview
Markdown Syntax
__Vertical Animated Button|Icon:Shop;Text:Shop__
Fade Animated
Preview
Sign-up for a Pro account
Markdown Syntax
__Fade Animated Button|Text:Sign-up for a Pro account;Text:$12.99 a month__
or
__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__

Icon

A button can have only an icon

Icon Button
Preview
Markdown Syntax
__Icon Button|Icon:Cloud__

Labeled Icon

A button can have an icon and a label

Labeled Icon
Preview
Pause
Markdown Syntax
__Labeled Icon Button|Icon:Pause,Text:Pause__

Basic Button

A basic button is less pronounced

Basic Button
Preview
Add Friend
Markdown Syntax
__Basic Button|Icon:User,Text:Add Friend__
Basic Button
Preview
Black
Yellow
Green
Blue
Orange
Purple
Pink
Red
Teal
Markdown Syntax
__Button|Text:Black|Basic Black__ __Button|Text:Yellow|Basic Yellow__ __Button|Text:Green|Basic Green__ __Button|Text:Blue|Basic Blue__ __Button|Text:Orange|Basic Orange__ __Button|Text:Purple|Basic Purple__ __Button|Text:Pink|Basic Pink__ __Button|Text:Red|Basic Red__ __Button|Text:Teal|Basic Teal__