Markdown UI

Create Beautiful and Responsive Websites in Markdown Syntax

About

Markdown-UI is a development framework that utilizes the Semantic-UI web framework, to create beautiful, human-friendly HTML and responsive layouts using Markdown Syntax.Markdown-UI is not affiliated with Semantic-UI in any matter.

Installation

Markdown-UI is readily available as a Ruby gem. The minimum required Ruby version is 2.0.

gem install markdown-ui

Usage

Output is via standard out, which can be piped to create an HTML file. (Under Mac and Linux)

markdown-ui index.mdui > index.html

Markdown-UI (Read-Evaluate-Print-Loop) REPL shell

You can interactively create Markdown-UI websites using the markdown-ui-shell.
$ markdown-ui-shell

Hit RETURN three times to parse.
# __Button|A Button__
#
#

<button class="ui button">A Button</button>

#

Credits

Markdown-UI would not be possible without the the Semantic-UI framework, and the Ruby RedCarpet library. A huge thanks and credit goes to the people behind these wonderful framework and libraries.

Source

This document is written entirely in Markdown-UI. see: the source files

Notes/Issues/Bugs

  • Ongoing support for Semantic-UI elements/modules/components
  • The Colon (:) character will be parsed when used inside a text, needs post-processing to dislay correctly (for URLs)
  • A separator in between two spaces is required on block elements to separate elements (see Column example)
  • Some elements requires custom javascripts (ie toggle button) in order to display and format them properly. You can write in HTML and Javascripts the additional code alongside your Markdown-UI docs to display them properly.
> Pointing Menu:
> [Home](#root "active")
> [Messages](#messages)
> [Friends](#friends)
> > Right Menu:
> > [Logout](#logout)

__Button|Add Friend__

Cheat Sheet

Button
# Short-Hand
__Button|Button Text__
# Block Syntax
> Button:
> Button Text
Container
> Container:
>
Icon
_Icon <Name>_
Segment
> Segment:
>
Menu
> Menu:
> [Menu Item]()
List
# Unordered List
* List 1
* List 2
# Ordered List
1. List 1
1. List 2
Label
> Label:
> _Mail Icon_ 23
Item
[Item](#URL_ID "class")
Message
# Short-Hand
__Message|Header:Message Header,Text:Message Text__
# Block Syntax
> Message:
> __Header|Message Header__
> Message Text
Header
# H1, ## H2, ### H3, #### H4 ...
# DIV tag header
__Header|A Div Header__
Column / Grid / Row / Segment / Container
> Grid:
>
> <!-- -->
>
> > Column:
> > Column 1
>
> <!-- -->
>
> > Column:
> > Column 2