Morass CSS
Documentations
The documentations of all properties and components of Morass.
Summary :
  • Properties :
  • mr-light Class - Added 0.9.8
  • mr-dark Class - Added 0.9.8
  • mr-overflow-block Class & balise - Added 0.9.8
  • mr-overflow-x-block Class & balise - Added 0.9.8
  • mr-overflow-y-block Class & balise - Added 0.9.8
  • mr-page Class & balise - Added 0.9.8
  • mr-weight-light Class & balise - Added 0.9.8
  • mr-weight-bold Class & balise - Added 0.9.8
  • mr-header Class & balise - Added 0.9.8
  • mr-sub-header Class & balise - Added 0.9.8
  • mr-pre-header Class & balise - Added 0.9.8
  • mr-great-text Class & balise - Added 0.9.8
  • mr-text Class & balise - Added 0.9.8
  • mr-p Class & balise - Added 0.9.8
  • mr-lambda Balise - Added 0.9.8
  • mr-cur-pointer Class & balise - Added 0.9.8
  • mr-cur-normal Class & balise - Added 0.9.8
  • mr-cur-text Class & balise - Added 0.9.8
  • mr-cur-loading Class & balise - Added 0.9.8
  • mr-text-select Class & balise - Added 0.9.8
  • mr-text-select-none Class & balise - Added 0.9.9
  • mr-hr Class - Added 0.9.8
  • mr-hr-h Class - Added 0.9.8
  • mr-hr-v Class - Added 0.9.8
  • mr-hr-light Class - Added 0.9.8
  • mr-hr-dark Class - Added 0.9.8
  • mr-hr-auto Class - Added 0.9.8
  • mr-tripbox Class - Added 0.9.8
  • mr-tripbox-light Class - Added 0.9.8
  • mr-tripbox-dark Class - Added 0.9.8
  • mr-tripbox-auto Class - Added 0.9.8
  • mr-tripbox-highlight Class - Added 0.9.9
  • mr-gray-text Class & balise - Added 0.9.8
  • mr-disabled-text Class & balise - Added 0.9.8
  • mr-text-align-left Class & balise - Added 0.9.8
  • mr-text-align-center Class & balise - Added 0.9.8
  • mr-text-align-right Class & balise - Added 0.9.8
  • mr-float-left Class & balise - Added 0.9.8
  • mr-float-center Class & balise - Added 0.9.8
  • mr-float-right Class & balise - Added 0.9.8
  • mr-move-marge Class & balise - Added 0.9.8
  • mr-move-marge-l Class & balise - Added 0.9.8
  • mr-move-marge-r Class & balise - Added 0.9.8
  • mr-marge Class & balise - Added 0.9.8
  • mr-marge-medium Class & balise - Added 0.9.8
  • mr-marge-big Class & balise - Added 0.9.8
  • mr-marge-l Class & balise - Added 0.9.8
  • mr-marge-l-medium Class & balise - Added 0.9.8
  • mr-marge-l-big Class & balise - Added 0.9.8
  • mr-marge-r Class & balise - Added 0.9.8
  • mr-marge-r-medium Class & balise - Added 0.9.8
  • mr-marge-r-big Class & balise - Added 0.9.8
  • mr-top-marge Class & balise - Added 0.9.8
  • mr-bottom-marge Class & balise - Added 0.9.8
  • mr-marge-auto Class & balise - Added 0.9.8
  • mr-marge Class & balise - Added 0.9.9
  • mr-grid-v Class & balise - Added 0.9.8
  • mr-grid-h Class & balise - Added 0.9.8
  • mr-grid-item Class & balise - Added 0.9.8
  • mr-button Class - Added 0.9.8
  • mr-button-light Class - Added 0.9.8
  • mr-button-dark Class - Added 0.9.8
  • mr-button-auto Class - Added 0.9.8
  • mr-div-centered Class - Added 0.9.8
  • mr-w-size-all Class - Added 0.9.8
  • mr-w-size-full Class - Added 0.9.9
  • mr-w-size-large Class - Added 0.9.8
  • mr-w-size-medium Class - Added 0.9.8
  • mr-w-size-little Class - Added 0.9.8
  • mr-w-size-bit Class - Added 0.9.8
  • mr-display-flex Class & balise - Added 0.9.8
  • mr-display-grid Class & balise - Added 0.9.8
  • mr-display-block Class & balise - Added 0.9.8
  • mr-display-initial Class & balise - Added 0.9.9
  • mr-auto-height Class & balise - Added 0.9.8
  • mr-link Class - Added 0.9.8
  • mr-code Class - Added 0.9.8
  • mr-code-snippet Class - Added 0.9.8
  • mr-code-box Class - Added 0.9.8
  • mr-insight Class & balise - Added 0.9.8
  • mr-insight-to-hide Class & balise - Added 0.9.8
  • mr-table Class & balise - Added 0.9.9
  • mr-table-light Class & balise - Added 0.9.9
  • mr-table-dark Class & balise - Added 0.9.9
  • mr-table-auto Class & balise - Added 0.9.9
  • mr-table-tr Class & balise - Added 0.9.9
  • mr-table-td Class & balise - Added 0.9.9
  • mr-table-th Class & balise - Added 0.9.9
  • mr-color-auto Class & balise - Added 0.9.9
  • mr-not-decoration Class & balise - Added 0.9.9
  • mr-padding Class & balise - Added 0.9.9
  • mr-checkbox Class - Added 1.0.0
  • mr-entry Class - Added 1.0.0
  • mr-entry-light Class - Added 1.0.0
  • mr-entry-dark Class - Added 1.0.0
  • mr-entry-auto Class - Added 1.0.0
  • mr-entry-highlight Class - Added 1.0.0
  • mr-backlight-default Class - Added 1.0.0
  • mr-backlight-white Class - Added 1.0.0
  • mr-backlight-cyan Class - Added 1.0.0
  • mr-backlight-beige Class - Added 1.0.0
  • mr-image Class - Added 1.0.0
  • Components :
  • Base page light Added 0.9.8
  • Base page dark Added 0.9.8
  • Navbar Added 0.9.8
  • Code snippet Added 0.9.8
  • Cards Added 0.9.8
  • Table Added 0.9.9
  • Grid Added 0.9.8
  • Insight Added 0.9.8
    • Properties :
    mr-light
    To body, set the body at light theme.
    mr-dark
    To body, set the body at dark theme.
    mr-overflow-block
    Block (hide) the overflow.
    mr-overflow-x-block
    Block (hide) the overflow x.
    mr-overflow-y-block
    Block (hide) the overflow y.
    mr-page
    A div with the mr-page class contains the content of page. One div is necessary.
    mr-weight-light
    Set the font weight to the lighter.
    mr-weight-bold
    Set the font weight to the bolder.
    mr-header
    Header text type.
    mr-sub-header
    Sub header text type.
    mr-pre-header
    Pre header text type.
    mr-great-text
    Great text type.
    mr-text
    Text type.
    mr-p
    Paragraph text type.
    mr-lambda
    This balise is used to apply classes without balise effect.
    mr-cur-pointer
    Set the cursor at pointer.
    mr-cur-normal
    Set the cursor at default.
    mr-cur-text
    Set the cursor at text.
    mr-cur-loading
    Set the cursor at loading.
    mr-text-select
    Enable text selection who is by default disabled.
    mr-text-select-none
    Disable text selection who is by default disabled.
    mr-hr
    Horizontal separator.
    mr-hr-h
    Horizontal separator.
    mr-hr-v
    Vertical separator.
    mr-hr-light
    Set the separator color for the light theme.
    mr-hr-dark
    Set the separator color for the dark theme.
    mr-hr-auto
    Set the separator color for the actual theme.
    mr-tripbox
    A box with border and without back, for minimalist design.
    mr-tripbox-light
    Set the tripbox color for the light theme.
    mr-tripbox-dark
    Set the tripbox color for the dark theme.
    mr-tripbox-auto
    Set the tripbox color for the actual theme.
    mr-tripbox-highlight
    Highlight the tripbox when it's hovered.
    mr-gray-text
    Set the color of text to gray.
    mr-disabled-text
    Set the color of text to gray.
    mr-text-align-left
    Align the text to the left.
    mr-text-align-center
    Align the text to the center.
    mr-text-align-right
    Align the text to the right.
    mr-float-left
    Set the float to the left.
    mr-float-center
    Set the float to the center.
    mr-float-right
    Set the float to the right.
    mr-move-marge
    Move to the left margin when it's hovered.
    mr-move-marge-l
    Move to the left margin when it's hovered.
    mr-move-marge-r
    Move to the right margin when it's hovered.
    mr-marge
    Set a left margin to it.
    mr-marge-medium
    Set a medium left margin to it.
    mr-marge-big
    Set a big left margin to it.
    mr-marge-l
    Set a left margin to it.
    mr-marge-l-medium
    Set a medium left margin to it.
    mr-marge-l-big
    Set a big left margin to it.
    mr-marge-r
    Set a right margin to it.
    mr-marge-r-medium
    Set a medium right margin to it.
    mr-marge-r-big
    Set a big right margin to it.
    mr-top-marge
    Set a top margin to it.
    mr-bottom-marge
    Set a bottom margin to it.
    mr-marge-auto
    Set a auto margin to it.
    mr-marge
    Set a margin to it.
    mr-table
    For vertical grid.
    mr-grid-h
    For horizontal grid.
    mr-grid-item
    For grid item.
    mr-button
    For button.
    mr-button-light
    Set button color for the light theme.
    mr-button-dark
    Set button color for the dark theme.
    mr-button-auto
    Set button color for the actual theme.
    mr-div-centered
    To center a div.
    mr-w-size-all
    Set it to a full width.
    mr-w-size-full
    Set it to a full width.
    mr-w-size-large
    Set it to a large width.
    mr-w-size-medium
    Set it to a medium width.
    mr-w-size-little
    Set it to a little width.
    mr-w-size-bit
    Set it to a bit width.
    mr-display-flex
    Set the display to flex.
    mr-display-grid
    Set the display to grid.
    mr-display-block
    Set the display to block.
    mr-display-initial
    Set the display to initial.
    mr-auto-height
    Set the height to auto.
    mr-code
    A code.
    mr-code-snippet
    A code snippet.
    mr-code-box
    A code box.
    mr-insight
    A insight.
    mr-insight-to-hide
    Hidden by default, when the insight is hovered, it's showed.
    mr-table
    For table.
    mr-table-light
    Set the table color for the light theme.
    mr-table-dark
    Set the table color for the dark theme.
    mr-table-auto
    Set the table color for the actual theme.
    mr-table-tr
    For table line.
    mr-table-td
    For table column.
    mr-table-th
    For table title column.
    mr-color-auto
    Set the text color to the actual theme.
    mr-not-decoration
    Set the text decoration to none.
    mr-padding
    Set a padding.
    mr-checkbox
    A input checkbox for forms.
    mr-entry
    A entry (input or textarea) for forms.
    mr-entry-light
    Set entry to light theme.
    mr-entry-dark
    Set entry to dark theme.
    mr-entry-auto
    Set entry to actual theme.
    mr-highlight
    Highlight when hovered.
    mr-backlight-default
    Set the background to default color.
    mr-backlight-white
    Set the background to white color.
    mr-backlight-cyan
    Set the background to light cyan color.
    mr-backlight-beige
    Set the background to light beige color.
    mr-image
    Support for images.
    Components :
    Base page light
    This is the default code for all website using Morass CSS and use light theme :
    <body class="mr-light mr-overflow-x-block">
        <div class="mr-page">
            <!-- Code here -- >
        </div>
    </body>
    Base page dark
    This is the default code for all website using Morass CSS and use dark theme :
    <body class="mr-dark mr-overflow-x-block">
        <div class="mr-page">
            <!-- Code here -- >
        </div>
    </body>
    Code snippet
    Use mr-code and mr-code-snippet.
    <mr-code class="mr-code-snippet">My code</mr-code>
    Cards
    For make cards, you can use grids and tripbox, here is a example :
    <div class="mr-grid-h mr-w-size-large mr-div-centered">
     <div class="mr-tripbox mr-tripbox-auto mr-grid-item">
      <mr-pre-header>Princing</mr-spreub-header>
      <mr-p class="mr-display-block">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, minus! Nihil rerum nostrum dolor maiores. Aliquam, minus! Nihil rerum nostrum dolor maiores omnis aliquid.
      </mr-p>
      <button class="mr-button mr-button-auto mr-top-marge mr-float-right">View more</button>
     </div>
     <div class="mr-tripbox mr-tripbox-auto mr-grid-item">
      <mr-pre-header>Service</mr-spreub-header>
      <mr-p class="mr-display-block">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, minus! Nihil rerum nostrum dolor maiores omnis aliquid.
      </mr-p>
     </div>
     <div class="mr-tripbox mr-tripbox-auto mr-grid-item">
      <mr-pre-header>Popularity</mr-spreub-header>
      <mr-p class="mr-display-block">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, minus! Nihil rerum nostrum dolor maiores omnis aliquid, voluptates officiis expedita harum, itaque.
      </mr-p>
     </div>
    </div>
    Table
    Here is a example of table :
    <table class="mr-table mr-table-auto">
     <tr class="mr-table-tr">
      <th class="mr-table-th">Title</th>
      <th class="mr-table-th">Title</th>
      <th class="mr-table-th">Title</th>
      <th class="mr-table-th">Title</th>
      <th class="mr-table-th">Title</th>
      <th class="mr-table-th">Title</th>
     </tr>
     <tr class="mr-table-tr">
      <td class="mr-table-td">Item</td>
      <td class="mr-table-td">Item</td>
      <td class="mr-table-td">Item</td>
      <td class="mr-table-td">Item</td>
      <td class="mr-table-td">Item</td>
      <td class="mr-table-td">Item</td>
     </tr>
     <tr class="mr-table-tr">
      <td class="mr-table-td">Item</td>
      <td class="mr-table-td">Item</td>
      <td class="mr-table-td">Item</td>
      <td class="mr-table-td">Item</td>
      <td class="mr-table-td">Item</td>
      <td class="mr-table-td">Item</td>
     </tr>
    </table>
    Grid
    Example of grid (h for horizontal) :
    <div class="mr-grid-h mr-grid-auto">
     <div class="mr-grid-item">Item</div>
     <div class="mr-grid-item">Item</div>
     <div class="mr-grid-item">Item</div>
     <div class="mr-grid-item">Item</div>
     <div class="mr-grid-item">Item</div>
    </div>
    Insight
    Example of insight :
    <div class="mr-insight mr-tripbox mr-tripbox-auto">
     Showed text, can be use like a title<br>
     <mr-insight-to-hide>
      Text to hide
     </mr-insight-to-hide>
    </div>