0-readme edit

row-components  edit

How the rows are set up and used

Row components

Components provide default spacing, colors, fonts, and layout for rows. Several also have options available for different looks. Options are listed in each file.

Of special note: margins are set only on the tops of elements. This so that spacing remains consistent when elements are optional and sometimes not included in the output.

Current layout components
  • .wm-row basic structure of a row
  • .wm-cards layout for multiple cards
  • .wm-split layout for divided row
Current element components
  • .wm-card a single card in a row
  • .wm-description-text text including publication date, title caption, etc.
  • .wm-row-buttons row buttons, which are slightly different from regular buttons
  • .wm-statnum a number with prepends and appends for statistics
Row classes

Rows get classes that match the component classes if there is the possibility the row will want to override the component's styles.
.IconRow__text-section will override .wm-card__text-section

Copy
Edit
<!-- components/0-readme/row-components.php --> <div class="wm-ad-docs"> <h5>Row components</h5> <p>Components provide default spacing, colors, fonts, and layout for rows. Several also have options available for different looks. Options are listed in each file.</p> <p><em>Of special note</em>: <strong>margins are set only on the tops of elements</strong>. This so that spacing remains consistent when elements are optional and sometimes not included in the output.</p> <h6>Current layout components</h6> <ul> <li><code>.wm-row</code> basic structure of a row</li> <li><code>.wm-cards</code> layout for multiple cards</li> <li><code>.wm-split</code> layout for divided row</li> </ul> <h6>Current element components</h6> <ul> <li><code>.wm-card</code> a single card in a row</li> <li><code>.wm-description-text</code> text including publication date, title caption, etc.</li> <li><code>.wm-row-buttons</code> row buttons, which are slightly different from regular buttons</li> <li><code>.wm-statnum</code> a number with prepends and appends for statistics</li> </ul> <h6>Row classes</h6> <p>Rows get classes that match the component classes if there is the possibility the row will want to override the component's styles.<BR> <code>.IconRow__text-section</code> will override <code>.wm-card__text-section</code> </p> </div>
Copy
Copy
Edit
/* scss/0-readme/_row-components.scss */