Pelican plugins » Components

Most of m.css CSS com­po­nents are ex­posed to Pel­i­can via cus­tom reST di­rec­tives. Un­like with pure CSS, the di­rec­tives are not pre­fixed with m- to save some typ­ing — which is the most im­por­tant thing when au­thor­ing con­tent.

How to use

Down­load the m/com­po­nents.py file, put it in­clud­ing the m/ di­rec­to­ry in­to one of your PLUGIN_PATHS and add m.components pack­age to your PLUGINS in pelicanconf.py. This plug­in as­sumes pres­ence of m.html­san­i­ty.

PLUGINS += ['m.htmlsanity', 'm.components']

Tran­si­tions

Use .. transition:: di­rec­tive to cre­ate a tran­si­tion:

Aenean tellus turpis, suscipit quis iaculis ut, suscipit nec magna. Vestibulum
finibus sit amet neque nec volutpat. Suspendisse sit amet nisl in orci posuere
mattis.

.. transition:: ~ ~ ~

Praesent eu metus sed felis faucibus placerat ut eu quam. Aliquam convallis
accumsan ante sit amet iaculis. Phasellus rhoncus hendrerit leo vitae lacinia.
Maecenas iaculis dui ex, eu interdum lacus ornare sit amet.

Ae­nean tel­lus turpis, sus­cip­it quis ia­c­ulis ut, sus­cip­it nec magna. Vestibu­lum finibus sit amet neque nec vo­lut­pat. Sus­pendisse sit amet nisl in or­ci po­suere mat­tis.

~ ~ ~

Prae­sent eu me­tus sed fe­lis fau­cibus plac­er­at ut eu quam. Ali­quam con­va­l­lis ac­cum­san ante sit amet ia­c­ulis. Phasel­lus rhon­cus hen­drerit leo vi­tae lacinia. Mae­ce­nas ia­c­ulis dui ex, eu in­ter­dum la­cus ornare sit amet.

Blocks, notes, frame

Use .. block-default::, .. block-primary:: etc. di­rec­tives to cre­ate blocks; use .. note-default::, .. note-primary:: etc. or .. frame:: di­rec­tives to cre­ate notes and frames. Blocks re­quire ti­tle to be present, notes and frames have it op­tion­al. In­ter­nal­ly, these el­e­ments are rep­re­sent­ed as a top­ic di­rec­tive. Use the :class: op­tion to spec­i­fy ad­di­tion­al CSS class­es.

.. block-danger:: Danger block

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a
    erat eu suscipit. `Link. <#>`_

.. note-success:: Success note

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a
    erat eu suscipit. `Link. <#>`_

.. frame:: Frame

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a
    erat eu suscipit. `Link. <#>`_

Code fig­ure

Use .. code-figure:: to de­note a code fig­ure. Then put a lit­er­al code block de­not­ed by :: or a .. code:: di­rec­tive as the first el­e­ment in­side. Use the :class: op­tion to spec­i­fy ad­di­tion­al CSS class­es.

.. code-figure::

    ::

        Some
            sample
        code

    And a resulting output.
Some
    sample
code

And a re­sult­ing out­put.

Use .. console-figure:: to de­note code fig­ure styled for a con­sole list­ing.

Text

Use .. text-default::, .. text-primary:: etc. di­rec­tives to col­or a block of text. In­ter­nal­ly, these el­e­ments are rep­re­sent­ed as a con­tain­er di­rec­tive. Use the :class: op­tion to spec­i­fy ad­di­tion­al CSS class­es.

.. text-info::
    :class: m-text-center

    Info text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
    ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed
    vehicula. `Link. <#>`_
In­fo text. Lorem ip­sum do­lor sit amet, con­secte­tur adip­isc­ing elit. Vi­va­mus ul­tri­ces a er­at eu sus­cip­it. Ali­quam phare­tra im­perdi­et tor­tor sed ve­hic­u­la. Link.

There are no in­ter­pret­ed text roles pro­vid­ed for in­line col­ored text, but you can de­fine a cus­tom one and add the CSS class­es to it, po­ten­tial­ly de­riv­ing it from ei­ther the :emphasis: or :strong: role to com­bine col­or with em­pha­sis or strong text:

.. role:: text-dim
    :class: m-text m-dim

.. role:: text-warning-strong(strong)
    :class: m-text m-warning

Aenean id elit posuere, consectetur magna congue, sagittis est.
:text-dim:`Dim inline text.` Pellentesque est neque, aliquet nec consectetur
in, mattis ac diam. :text-warning-strong:`Warning strong text.`

Ae­nean id elit po­suere, con­secte­tur magna congue, sagit­tis est. Dim in­line text. Pel­len­tesque est neque, ali­quet nec con­secte­tur in, mat­tis ac di­am. Warn­ing strong text.

Ta­bles

Mark your reST ta­ble with ..class:: m-table to give it styling.

.. class:: m-table

= ============= ================
# Heading       Second heading
= ============= ================
1 Cell          Second cell
2 2nd row cell  2nd row 2nd cell
= ============= ================
# Head­ing Sec­ond head­ing
1 Cell Sec­ond cell
2 2nd row cell 2nd row 2nd cell

Oth­er m.css fea­tures

You can use .. container:: di­rec­tive to add a wrap­ping <div> around most el­e­ments. Pa­ram­e­ters of the di­rec­tive are CSS class­es. For ex­am­ple, ar­rang­ing con­tent in three-col­umn grid can be done like this:

.. container:: m-row

    .. container:: m-col-m-4

        Left column content.

    .. container:: m-col-m-4

        Middle column content.

    .. container:: m-col-m-4

        Right column content.
Left col­umn con­tent.
Mid­dle col­umn con­tent.
Right col­umn con­tent.

For in­line com­po­nents, de­rive a cus­tom role with ad­di­tion­al CSS class­es. For ex­am­ple:

.. role:: label-success
    :class: m-label m-success
.. role:: label-danger
    :class: m-label m-danger

-   Design direction and project goals :label-success:`done`
-   Automated testing :label-danger:`missing`
  • De­sign di­rec­tion and project goals done
  • Au­to­mat­ed test­ing miss­ing