DLx Pattern Library

DLx Pattern Library

Source: 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: 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=abbreviation 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: article/article.less, line 3

5.2 Article

A linguistics paper or article.

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.

  1. siksink his heːčtiʔi

    • siksi‑nk

      eagle‑??

    • his

      resp

    • heːčt‑iʔi

      call‑nf;sg

    an eagle met him

    Swadesh 1939b: A1b.1

  2. ʔišk kuː keta=nki ʔap niːkʼš hiki

    • ʔiš‑k

      1sg??

    • kuʔ

      water

    • keta=nki

      side=loc

    • ʔap

      ven

    • ni‑ːkʼ‑š

      to_water‑ptcpperf

    • hi‑ki

      aux(neut)‑1sg

    I have come to the water’s side.

    Swadesh 1939b: A1b.3

<article class=ling-article>

  <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>

    <ol class=examples>

      <li class=igl>

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

        <ul class=words>

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

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

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

        </ul>

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

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

      </li>

      <li class=igl>

        <p class=txn>ʔiš<em>k</em> kuː keta=nki ʔap niːkʼš hiki</p>

        <ul class=words>

          <li class=word>
            <p class=word-txn>ʔiš‑<em>k</em></p>
            <p class=word-gl><abbr title='first person' class=gl>1</abbr><abbr title=singular class=gl>sg</abbr>‑<abbr title=unknown class=gl>??</abbr></p>
          </li>

          <li class=word>
            <p class=word-txn>kuʔ</p>
            <p class=word-gl>water</p>
          </li>

          <li class=word>
            <p class=word-txn>keta=nki</p>
            <p class=word-gl>side=<abbr title=locative class=gl>loc</abbr></p>
          </li>

          <li class=word>
            <p class=word-txn>ʔap</p>
            <p class=word-gl><abbr title=venitive class=gl>ven</abbr></p>
          </li>

          <li class=word>
            <p class=word-txn>ni‑ːkʼ‑š</p>
            <p class=word-gl>to_water‑<abbr title=participle class=gl>ptcp</abbr>‑<abbr title=perfect class=gl>perf</abbr></p>
          </li>

          <li class=word>
            <p class=word-txn>hi‑ki</p>
            <p class=word-gl><abbr title=auxiliary class=gl>aux</abbr>(<abbr title=neutral class=gl>neut</abbr>)‑<abbr title='first person' class=gl>1</abbr><abbr title=singular class=gl>sg</abbr></p>
          </li>

        </ul>

        <p class=tln>I have come to the water’s side.</p>

        <p class=source>Swadesh 1939b: A1b.3</p>

      </li>

    </ol>

  </section>

</article>

Source: blockquote/blockquote.less, line 1

5.3 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 style="margin-left: 1.5em;">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Examples

Default styling

.blue

Blue button

.purple

Purple button

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

Source: card/card.less, line 1

5.6 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: cite/cite.less, line 1

5.7 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: definition/definition.less, line 1

5.8 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=definition>Digital Linguistics</dfn> (<abbr class=abbreviation 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

siksink his heːčtiʔi

  • siksi‑nk

    eagle‑??

  • his

    resp

  • heːčt‑iʔi

    call‑nf;sg

an eagle met him

Swadesh 1939b: A1b.1

<div class=igl>

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

  <ul class=words>

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

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

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

  </ul>

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

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

</div>

Example

  1. Item
  2. Item
  3. Item
<ol class=numbered style="margin-left: 1.5em;">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Source: orthographic/orthographic.less, line 3

5.13 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=orthographic>orthographic representation</span> of some text.</p>

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: phonemic/phonemic.less, line 3

5.15 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=phonemic>fənimɪk</span> representation of some data.</p>

Source: phonetic/phonetic.less, line 3

5.16 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=phonetic>fəˈnɛtik̚</span> representation of some data.</p>

Source: unicode/unicode.less, line 1

5.18 Unicode

Used when a Unicode font is needed. More semantic styles such as .phonetic or .phonemic should be preferred over this one when possible.

Example

This shows an example of some text in a Unicode font.

<p>This shows an example of <span class=unicode>some text in a Unicode font</span>.</p>

Example

Make sure to back up your work!

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