Plugins » Components

Most of m.css CSS com­pon­ents are ex­posed to Pel­ic­an via cus­tom reST dir­ect­ives. Un­like with pure CSS, the dir­ect­ives are not pre­fixed with m- to save some typ­ing — which is the most im­port­ant thing when au­thor­ing con­tent.

How to use

Pel­ic­an

Down­load the m/com­pon­ents.py file, put it in­clud­ing the m/ dir­ect­ory in­to one of your PLUGIN_PATHS and add m.components pack­age to your PLUGINS in pelicanconf.py. This plu­gin as­sumes pres­ence of m.htmls­an­ity.

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

Py­thon doc theme

Simply list the plu­gin in your PLUGINS. The m.htmls­an­ity plu­gin is avail­able al­ways, no need to men­tion it ex­pli­citly:

PLUGINS += ['m.components']

Doxy­gen theme

Un­for­tu­nately, due to a lack of ex­tens­ib­il­ity of the Doxy­gen markup lan­guage, it’s not pos­sible to provide the com­pon­ents through easy-to-use com­mands. All you have is the abil­ity to ap­ply CSS classes us­ing @m_class, @m_span and @m_div. See the Doxy­gen theme-spe­cif­ic com­mands for more in­form­a­tion.

Trans­itions

Use .. transition:: dir­ect­ive to cre­ate a trans­ition:

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.

Aenean tel­lus turp­is, sus­cip­it quis iaculis ut, sus­cip­it nec magna. Ves­ti­bu­lum finibus sit amet neque nec vo­lut­pat. Sus­pen­disse sit amet nisl in orci posuere mat­tis.

~ ~ ~

Praesent eu metus sed fel­is faucibus pla­cer­at ut eu quam. Ali­quam con­val­lis ac­cum­san ante sit amet iaculis. Phasel­lus rhon­cus hendrer­it leo vitae la­cin­ia. Mae­cen­as iaculis dui ex, eu in­ter­dum la­cus or­n­are sit amet.

Blocks, notes, frame

Use .. block-default::, .. block-primary:: etc. dir­ect­ives to cre­ate blocks; use .. note-default::, .. note-primary:: etc. or .. frame:: dir­ect­ives to cre­ate notes and frames. Blocks re­quire title to be present, notes and frames have it op­tion­al. In­tern­ally, these ele­ments are rep­res­en­ted as a top­ic dir­ect­ive. Use the :class: op­tion to spe­cify ad­di­tion­al CSS classes.

.. 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, math and graph fig­ure

Use .. code-figure:: to de­note a code fig­ure. Then put a lit­er­al code block de­noted by :: or a .. code:: dir­ect­ive as the first ele­ment in­side. Use the :class: op­tion to spe­cify ad­di­tion­al CSS classes. The op­tion­al dir­ect­ive para­met­er can be used for a fig­ure cap­tion.

.. code-figure::

    ::

        Some
            sample
        code

    And a resulting output.
Some
    sample
code

And a res­ult­ing out­put.

Use .. console-figure:: to de­note code fig­ure styled for a con­sole list­ing. Sim­il­arly, .. math-figure:: de­notes a math fig­ure and .. graph-figure:: de­notes a graph fig­ure.

Text

Use .. text-default::, .. text-primary:: etc. dir­ect­ives to col­or a block of text. In­tern­ally, these ele­ments are rep­res­en­ted as a con­tain­er dir­ect­ive. Use the :class: op­tion to spe­cify ad­di­tion­al CSS classes.

.. 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. <#>`_
Info text. Lor­em ipsum dol­or sit amet, con­sect­etur adip­is­cing elit. Vivamus ul­trices a erat eu sus­cip­it. Ali­quam phare­tra im­perdiet tortor sed vehicula. Link.

There are no in­ter­preted text roles provided for in­line colored text, but you can define a cus­tom one and add the CSS classes to it, po­ten­tially de­riv­ing it from either the :emphasis: or :strong: role to com­bine col­or with em­phas­is 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.`

Aenean id elit posuere, con­sect­etur magna congue, sagit­tis est. Dim in­line text. Pel­lent­esque est neque, ali­quet nec con­sect­etur in, mat­tis ac diam. Warn­ing strong text.

Tables

Mark your reST table with ..class:: m-table to give it styl­ing.

.. class:: m-table

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

La­bels

Use :label-default: etc. or :label-flat-default: etc. to cre­ate in­line text la­bels.

-   Design direction and project goals :label-success:`done`
-   Automated testing :label-danger:`missing`
    :label-flat-warning:`in progress`
  • Design dir­ec­tion and pro­ject goals done
  • Auto­mated test­ing miss­ing in pro­gress

Oth­er m.css fea­tures

You can use .. container:: dir­ect­ive to add a wrap­ping <div> around most ele­ments. Para­met­ers of the dir­ect­ive are CSS classes. For ex­ample, ar­ran­ging con­tent in three-column 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 column con­tent.
Middle column con­tent.
Right column con­tent.

For in­line com­pon­ents not men­tioned above, de­rive a cus­tom role with ad­di­tion­al CSS classes. For ex­ample:

.. role:: text-em-strong
    :class: m-text m-em m-strong

You *should* be **very** aware of the :text-em-strong:`potential danger`.

You should be very aware of the po­ten­tial danger.