DLx Pattern Library

DLx Pattern Library

Source: components/components.less, line 1

5 Components

Discrete, self-contained pieces of UI. These styles are not applied automatically, but rather need to be applied using the class with the same name as the element (e.g. apply the .button class to all <button> elements.)

Source: components/abbreviation/abbreviation.less, line 1

5.1 Abbreviation

The <abbr> element is used for inline abbreviations.

Example

Digital Linguistics (DLx) is the science of digital data management for linguistics, including the digital storage, representation, manipulation, and dissemination of linguistic data.

<p><dfn class=definition>Digital Linguistics</dfn> (<abbr class=abbr title='Digital Linguistics'>DLx</abbr>) is the science of digital data management for linguistics, including the digital storage, representation, manipulation, and dissemination of linguistic data.</p>

Source: components/blockquote/blockquote.less, line 3

5.2 Block Quote

For block quotes within a text.

Example

Unique identifiers, and metadata describing the data, and its disposition, should persist — even beyond the lifespan of the data they describe.
<blockquote class=blockquote cite=http://site.uit.no/linguisticsdatacitation/austinprinciples/>
  Unique identifiers, and metadata describing the data, and its disposition, should persist — even beyond the lifespan of the data they describe.
</blockquote>

Example

  • Item
  • Item
  • Item
<ul class=bulleted>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Source: components/button/button.less, line 3

5.4 Button

A button

Examples

Default styling

.blue

Blue button

.purple

Purple button

.red

Red button

<button type=button class='button {{modifier_class}}'>Click Me!</button>

Source: components/card/card.less, line 1

5.5 Card

A card view.

<section class=card style="width: 20em;">
  <a href=/about class=content>

    <svg class=icon xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
      width="24" height="24"
      viewBox="0 0 24 24"
      style=" fill:#000000;">    <path d="M 12 2 C 10.343 2 9 3.343 9 5 C 9 6.657 10.343 8 12 8 C 13.657 8 15 6.657 15 5 C 15 3.343 13.657 2 12 2 z M 9 10 A 1.0001 1.0001 0 1 0 9 12 L 10 12 L 10 20 L 9 20 A 1.0001 1.0001 0 1 0 9 22 L 15 22 A 1.0001 1.0001 0 1 0 15 20 L 14 20 L 14 11 C 14 10.448 13.552 10 13 10 L 11 10 L 9 10 z"></path>
    </svg>

    <h2>About</h2>

    <p class=description>Learn about the science of Digital Linguistics, its goals, and its principles.</p>

  </a>
</section>

Source: components/cite/cite.less, line 1

5.6 Citation

The <cite> element is used for titles of publications, etc.

Example

In his review of Endangered languages and new technologies, Hieber (2015) mentions certain concepts in Digital Linguistics.

<p>
  In his review of <cite class=cite>Endangered languages and new technologies</cite>, Hieber (2015) mentions certain concepts in Digital Linguistics.
</p>

Source: components/definition/definition.less, line 1

5.7 Definition

The <dfn> element is used for inline definitions

Example

Digital Linguistics (DLx) is the science of digital data management for linguistics, including the digital storage, representation, manipulation, and dissemination of linguistic data.

<p><dfn class=dfn>Digital Linguistics</dfn> (<abbr class=abbr title='Digital Linguistics'>DLx</abbr>) is the science of digital data management for linguistics, including the digital storage, representation, manipulation, and dissemination of linguistic data.</p>

Example

Digital Linguistics: An introduction

Daniel W. Hieber

University of California, Santa Barbara

Introduction

This paper introduces the field of Digital Linguistics. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<article class=ling-document>

  <header class=header>

    <h1 class=title>Digital Linguistics: An introduction</h1>

    <div class=author>
      <p>Daniel W. Hieber</p>
      <p>University of California, Santa Barbara</p>
    </div>

  </header>

  <section class=section>

    <h2 class=section-header>Introduction</h2>

    <p>This paper introduces the field of Digital Linguistics. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  </section>

</article>

Source: components/document/document.less, line 13

5.8.1 Captions

Captions for figures and tables.

Source: components/document/document.less, line 22

5.8.2 Document Header

The header of the document (e.g. chapter or article title and author information)

Source: components/example/example.less, line 1

5.9 Example

Each example should be given the .ex class. To number examples, wrap them in <ol class=examples> and make each example a <li class=ex>. See the Examples section.

Source: components/example/example.less, line 20

5.9.1 Example Header

Examples may have headers containing information about the example (such as the language of the example).

Source: components/examples/examples.less, line 1

5.10 Examples

A set of one or more examples in a document. Each set of examples should be an ordered list (<ol>), and each item within that list should have the class .ex (<li class="ex">). If the example is also an interlinear gloss, the .igl class must be added as well (<li class="ex igl">). You may also need to reset the examples counter at the beginning of the document (counter-reset: examples;; note that the .ling-document class does this for you automatically).

Example

    1. pāpaehcen he, she, it (an.) falls (AI)

    2. pāpaehnaen it (inan.) falls (II)

    1. na͞ewa͞ew s/he sees him, her, it (an.) (TA)

    2. na͞emwah s/he sees it (inan.) (TI)

The following examples should continue numbering from the previous examples:

  1. kōhkawaew (AI) it (animate; for example, a wagon or canoe) tips over

    Stem: kōhkawae‑ [initial kōhkā‑ tip over + ‑āwa͞e AI final]

    Secondary final: ‑makat II verb

    New word: kōhkawaemakat (II) it tips over

  2. cēkataham (TI) he or she sweeps it clear, cleans it with a broom

    Stem: cēkatah‑ [initial cēk‑ near, next to (?) + ‑atah by stick]

    Secondary final: ‑ka͞e AI verb; indefinite action

    New word: cēkatahekaew (AI1) he or she sweeps

  3. wāqnenam (TI) he or she throws light on it, lights it up

    Stem: wāqnen‑ [initial wāqN‑ light + ‑aen by hand]

    Secondary final: ‑kan N; instrument, product, place, etc.

    New word: wāqnenekan (N) lamp, candle

  4. sūniyan (N) money

    Stem: sūniyan‑ [initial sōni‑ silver + ‑ān N final (?)]

    Secondary final: ‑ikamekw N; house, building

    New word: sūniyanikamek (N) bank

<ol class=examples>

  <li class=ex>
    <ol class=subexamples>
      <li><p><span class=txn>pāpaehcen</span> <span class=tln>he, she, it (an.) falls</span> (AI)</p></li>
      <li><p><span class=txn>pāpaehnaen</span> <span clas=translation>it (inan.) falls</span> (II)</p></li>
    </ol>
  </li>

  <li class=ex>
    <ol class=subexamples>
      <li><p><span class=txn>na͞ewa͞ew</span> <span class=tln>s/he sees him, her, it (an.)</span> (TA)</p></li>
      <li><p><span class=txn>na͞emwah</span> <span class=tln>s/he sees it (inan.)</span> (TI)</p></li>
    </ol>
  </li>

</ol>

<p>
  The following examples should continue numbering from the previous examples:
</p>

<ol class=examples>

  <li class=ex>
    <p><span class=txn>kōhkawaew</span> (AI) <span class=tln>it (animate; for example, a wagon or canoe) tips over</span></p>
    <p><strong>Stem:</strong> <span class=txn>kōhkawae‑</span> [initial <span class=txn>kōhkā‑</span> <span class=tln>tip over</span> + <span class=txn>‑āwa͞e</span> <span class=tln>AI final</span>]</p>
    <p><strong>Secondary final:</strong> <span class=txn>‑makat</span> <span class=tln>II verb</span></p>
    <p><strong>New word:</strong> <span class=txn>kōhkawaemakat</span> (II) <span class=tln>it tips over</span></p>
  </li>

  <li class=ex>
    <p><span class=txn>cēkataham</span> (TI) <span class=tln>he or she sweeps it clear, cleans it with a broom</span></p>
    <p><strong>Stem:</strong> <span class=txn>cēkatah‑</span> [initial <span class=txn>cēk‑</span> <span class=tln>near, next to</span> (?) + <span class=txn>‑atah</span> <span class=tln>by stick</span>]</p>
    <p><strong>Secondary final:</strong> <span class=txn>‑ka͞e</span> <span class=tln>AI verb; indefinite action</span></p>
    <p><strong>New word:</strong> <span class=txn>cēkatahekaew</span> (AI1) <span class=tln>he or she sweeps</span></p>
  </li>

  <li class=ex>
    <p><span class=txn>wāqnenam</span> (TI) <span class=tln>he or she throws light on it, lights it up</span></p>
    <p><strong>Stem:</strong> <span class=txn>wāqnen‑</span> [initial <span class=txn>wāqN‑</span> <span class=tln>light</span> + <span class=txn>‑aen</span> <span class=tln>by hand</span>]</p>
    <p><strong>Secondary final:</strong> <span class=txn>‑kan</span> <span class=tln>N; instrument, product, place, etc.</span></p>
    <p><strong>New word:</strong> <span class=txn>wāqnenekan</span> (N) <span class=tln>lamp, candle</span></p>
  </li>

  <li class=ex>
    <p><span class=txn>sūniyan</span> (N) <span class=tln>money</span></p>
    <p><strong>Stem:</strong> <span class=txn>sūniyan‑</span> [initial <span class=txn>sōni‑</span> <span class=tln>silver</span> + <span class=txn>‑ān</span> <span class=tln>N final</span> (?)]</p>
    <p><strong>Secondary final:</strong> <span class=txn>‑ikamekw</span> <span class=tln>N; house, building</span></p>
    <p><strong>New word:</strong> <span class=txn>sūniyanikamek</span> (N) <span class=tln>bank</span></p>
  </li>

</ol>

Source: components/examples/examples.less, line 10

5.10.1 Example Indent

How far each example should be indented from the left edge.

Source: components/examples/examples.less, line 30

5.10.2 Subexamples

Examples may have subexamples consisting of an embedded ordered list.

Source: components/interlinear/interlinear.less, line 4

5.12 Interlinear Gloss

An interlinear glossed example or utterance. In addition to transcription (<p class=txn>) and translation (<p class=tln>) lines, you can choose to add analysis lines grouped by words (<ol class=words>) or morphemes (<ol class=morphemes>).

Example

Chitimacha (isolate)

siksink his heːčtiʔi

  1. siksi‑nk

    eagle‑??

  2. his

    resp

  3. heːčt‑iʔi

    call‑nf;sg

an eagle met him

Swadesh 1939b: A1b.1

Menominee (Algonquian)

pemētaehkipew

  1. paemet‑

    crosswise

    initial

  2. ‑aehkw‑

    face

    medial

  3. ‑ape

    sit

    final

S/he sits sideways.

<div class=igl>

  <p class=ex-header>Chitimacha (isolate)</p>

  <p class=txn>siksi<em>nk</em> his heːčtiʔi</p>

  <ol class=words>

    <li class=word>
      <p class=word-m>siksi‑<em>nk</em></p>
      <p class=word-gl>eagle‑<abbr title=unknown>??</abbr></p>
    </li>

    <li class=word>
      <p class=word-m>his</p>
      <p class=word-gl><abbr title=responsive>resp</abbr></p>
    </li>

    <li class=word>
      <p class=word-m>heːčt‑iʔi</p>
      <p class=word-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></p>
    </li>

  </ol>

  <p class=tln>an eagle met him</p>

  <p class=ex-source>Swadesh 1939b: A1b.1</p>

</div>

<div class=igl>

  <p class=ex-header>Menominee (Algonquian)</p>

  <p class=txn>pemētaehkipew</p>

  <ol class=morphemes>

    <li class=morpheme>
      <p class=m-txn>paemet‑</p>
      <p class=m-gl>crosswise</p>
      <p class=m-gl><abbr title=initial>initial</abbr></p>
    </li>

    <li class=morpheme>
      <p class=m-txn>‑aehkw‑</p>
      <p class=m-gl>face</p>
      <p class=m-gl><abbr title=medial>medial</abbr></p>
    </li>

    <li class=morpheme>
      <p class=m-txn>‑ape</p>
      <p class=m-gl>sit</p>
      <p class=m-gl><abbr title=final>final</abbr></p>
    </li>

  </ol>

  <p class=tln>S/he sits sideways.</p>

</div>

Source: components/interlinear/interlinear.less, line 62

5.12.1 Example Emphasis

You can emphasize any portion of an interlinear example with the <em> tag.

Source: components/interlinear/interlinear.less, line 51

5.12.2 Grammatical Gloss

The <abbr> tag is used for grammatical glosses, in small caps.

Source: components/interlinear/interlinear.less, line 20

5.12.3 --igl-horizontal-spacing

The amount of space to place between words / morphemes in the analysis lines.

Source: components/interlinear/interlinear.less, line 13

5.12.4 --igl-indent

The amount to indent the words / morpheme breakdowns. The transcription and translation lines (the first and last lines) will be left unindented.

Source: components/interlinear/interlinear.less, line 27

5.12.5 --igl-vertical-spacing

The amount of space to place above and below the words / morphemes in the analysis lines.

Source: components/message/message.less, line 1

5.14 Message

A message component. This class applies styles to all message components, regardless of type. These styles are inherited by warning messages and blockquotes, for example.

Source: components/message/message.less, line 43

5.14.6 --message-padding

Padding to use in message boxes (block quotes, warnings, etc.)

Example

  1. Item
  2. Item
  3. Item
<ol class=numbered>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Source: components/orthographic/orthographic.less, line 3

5.16 Orthographic

This class should be used when citing an orthographic representation of some data, e.g., when writing about writing systems.

Example

This is an example of a sentence with an orthographic representation of some text.

<p>This is an example of a sentence with an <span class=ortho>orthographic representation</span> of some text.</p>

Source: components/paragraph/paragraph.less, line 1

5.17 Paragraph

A basic paragraph.

Examples

Default styling

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.hanging

A hanging paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p class='paragraph {{modifier_class}}'>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Source: components/phonemic/phonemic.less, line 3

5.18 Phonemic

Used for phonemic representations of data.

Example

This is an example of a fənimɪk representation of some data.

<p>This is an example of a <span class=phon>fənimɪk</span> representation of some data.</p>

Source: components/phonetic/phonetic.less, line 3

5.19 Phonetic

Used for phonetic representations of data.

Example

This is an example of a fəˈnɛtik̚ representation of some data.

<p>This is an example of a <span class=fon>fəˈnɛtik̚</span> representation of some data.</p>

Source: components/transcription/transcription.less, line 1

5.21 Transcription

A transcription of any type, in Unicode font. More semantic styles such as .phonetic or .phonemic should be preferred over this one when possible.

Example

This shows an example of a transcription in a Unicode font.

<p>This shows an example of a <span class=txn>transcription in a Unicode font</span>.</p>

Source: components/transcription/transcription.less, line 10

5.21.1 --transcription-padding

Padding to use on either side of the brackets around transcriptions (//, [], and <>)

Source: components/translation/translation.less, line 1

5.22 Translation

Used to add single quotation marks around a translation.

Example

This shows an example of a translation in the same font as the surrounding text.

<p>This shows an example of a <span class=tln>translation</span> in the same font as the surrounding text.</p>

Example

Make sure to back up your work!

<p class=warning>Make sure to back up your work!</p>