Basic rules.

Mong9 editor basically provides more than 100 sample blocks (Blocks). We will make and provide more blocks in the future.
If you make more and more of these blocks, the Stylesheet(CSS) will continue to grow and the loading will slow down.
.m9-grid-n, .m9-float-n support only 6 steps, CSSis getting too long, step 6 is the best we've determined.
So, even with many blocks, we've kept the CSS from getting complex.

Classes are created using CSS properties and values.

Create by connecting attributes and values with a hyphen (-).
Example: text-align:center => .text-align-center
In Mobile landscape mode, add m- at the beginning. => .m-text-align-center
In Mobile portrait mode, add e- at the beginning. => .e-text-align-center

Add m9- in front of the CSS created by Mong9Editor, and assign a number after each type.

For example: .me-strong-1{font-weight:bold;color:red}
In Mobile landscape mode, add 'm-' at the beginning. => .m-m9-strong-1
In Mobile portrait mode, add 'e-' at the beginning. => .e-m9-strong-1

Mong9 Editor uses four CSS files.

~/source/css/mong9-base.css => Contains non-responsive CSS
~/source/css/mong9.css => Stores PC-only classes
~/source/css/mong9-m.css => Stores mobile landscape mode m- classes
~/source/css/mong9-e.css => Stores mobile portrait mode e- classes

Class Naming Guide

If you have specific CSS properties and values, you can create classes.
Use classes for things like .vertical-align-top or .display-table, where it's clear what they mean and they won't confuse anyone.
But if the style depends on something specific, like a color #eee or a font size 14em, it's best not to make classes like .color-gray or .font-size-14.
If you really want to, you can create custom classes to avoid problems with other tools.
However, Mong9 Editor already has some special classes to help you. These special classes start with m9- and make it easy to style things, like m9-f-large which represents font-size:1.16em.

For example, if you want to represent font-weight:900 as a class, use font-weight-900.
If you want to represent line-height:140 as a class, use line-height-140.
If you want to represent float:left as a class, use float-left.

Responsive Design

The Mont9 editor has predefined classes for easy responsive handling. To achieve responsiveness for mobile environments, simply add a prefix m- or e- to all classes in Mont9 editor.

Mobile Landscape (Below 768px) Responsive

By adding the prefix m- to all classes, Responsive processing is possible.

Mobile Portrait (Below 576px) Responsive

By adding the prefix e- to all classes, Responsive processing is possible.

For example, if you want to change from position:absolute on PC to position:relative on mobile landscape, and to position:static on mobile portrait, you can use position-absolute, m-position-relative, and e-position-static.

Usage Example

position

PC-Class

.position-relative
.position-absolute
.position-static
.position-fixed

CSS Code

/* positon */
.position-absolute{position:absolute}
.position-relative{position:relative}
.position-static{position:static}
.position-fixed{position:fixed}

Mobile Landscape - Class

.m-position-relative
.m-position-absolute
.m-position-static
.m-position-fixed

CSS Code

/* m-position */
@media screen and (max-width:768px){
.m-position-absolute{position:absolute}
.m-position-relative{position:relative}
.m-position-static{position:static}
.m-position-fixed{position:fixed}
}

Mobile portrait - Class

.e-position-relative
.e-position-absolute
.e-position-static
.e-position-fixed

CSS Code

/* m-position */
@media screen and (max-width:567px){
.e-position-absolute{position:absolute}
.e-position-relative{position:relative}
.e-position-static{position:static}
.e-position-fixed{position:fixed}
}

display

PC-Class

.display-block
.display-inline-block
.display-inline
.display-none

CSS Code

/* display */
.display-block{display:block}
.display-inline-block{display:inline-block;*display:inline;*zoom:1}
.inline-block{display:inline-block;*display:inline;*zoom:1}
.display-inline{display:inline}
.display-none{display:none}

Mobile Landscape - Class

.m-display-block
.m-display-inline-block
.m-display-inline
.m-display-none

CSS Code

/* m-display */
@media screen and (max-width:768px){
.m-display-block{display:block !important}
.m-display-inline-block{display:inline-block;*display:inline;*zoom:1}
.m-inline-block{display:inline-block;*display:inline;*zoom:1}
.m-display-inline{display:inline}
.m-display-none{display:none !important}
}

Mobile portrait - Class

.e-display-block
.e-display-inline-block
.e-display-inline
.e-display-none

CSS Code

/* e-display */
@media screen and (max-width:567px){
.e-display-block{display:block !important}
.e-display-inline-block{display:inline-block;*display:inline;*zoom:1}
.e-inline-block{display:inline-block;*display:inline;*zoom:1}
.e-display-inline{display:inline}
.e-display-none{display:none}
}

display-table

PC-Class

.display-table
.display-table-row
.display-table-cell

CSS Code

/* display-table */
.display-table{display:table;width:100%}
.display-table-row{display:table-row}
.display-table-cell{display:table-cell}

Mobile Landscape - Class

.m-display-table
.m-display-table-row
.m-display-table-cell

CSS Code

/* m-display-table */
@media screen and (max-width:768px){
.m-display-table{display:table;width:100%}
.m-display-table-row{display:table-row}
.m-display-table-cell{display:table-cell}
}

Mobile portrait - Class

.e-display-table
.e-display-table-row
.e-display-table-cell

CSS Code

/* e-display-table */
@media screen and (max-width:567px){
.e-display-table{display:table;width:100%}
.e-display-table-row{display:table-row}
.e-display-table-cell{display:table-cell}
}

flaot

PC-Class

.float-left
.float-right
.float-none

CSS Code

/* float */
.float-left{float:left}
.float-right{float:right}
.float-none{float:none;clear:both}

Mobile Landscape - Class

.m-float-left
.m-float-right
.m-float-none

CSS Code

/* m-float */
@media screen and (max-width:768px){
.m-float-left{float:left}
.m-float-right{float:right}
.m-float-none{float:none;clear:both}
}

Mobile portrait - Class

.e-float-left
.e-float-right
.e-float-none

CSS Code

/* e-float */
@media screen and (max-width:567px){
.e-float-left{float:left}
.e-float-right{float:right}
.e-float-none{float:none;clear:both}
}

vertical-align

PC-Class

.vertical-align-top
.vertical-align-middle
.vertical-align-bottom

CSS Code

/* vertical-align */
.vertical-align-top{vertical-align:top}
.vertical-align-middle{vertical-align:middle}
.vertical-align-bottom{vertical-align:bottom}

Mobile Landscape - Class

.m-vertical-align-top
.m-vertical-align-middle
.m-vertical-align-bottom

CSS Code

/* m-vertical-align */
@media screen and (max-width:768px){
.m-vertical-align-top{vertical-align:top}
.m-vertical-align-middle{vertical-align:middle}
.m-vertical-align-bottom{vertical-align:bottom}
}

Mobile portrait - Class

.e-vertical-align-top
.e-vertical-align-middle
.e-vertical-align-bottom

CSS Code

/* e-vertical-align */
@media screen and (max-width:567px){
.e-vertical-align-top{vertical-align:top}
.e-vertical-align-middle{vertical-align:middle}
.e-vertical-align-bottom{vertical-align:bottom}
}

overflow

PC-Class

.visibility-hidden
.overflow-hidden

CSS Code

/* overflow */
.visibility-hidden{visibility:hidden}
.overflow-hidden{overflow:hidden}

Mobile Landscape - Class

.m-visibility-hidden
.m-overflow-hidden

CSS Code

/* m-overflow */
@media screen and (max-width:768px){
.m-visibility-hidden{visibility:hidden}
.m-overflow-hidden{overflow:hidden}
}

Mobile portrait - Class

.e-visibility-hidden
.e-overflow-hidden

CSS Code

/* e-overflow */
@media screen and (max-width:567px){
.e-visibility-hidden{visibility:hidden}
.e-overflow-hidden{overflow:hidden}
}