A collection of patterns for styling linguistic data on the web
npm install @digitallinguistics/stylesWelcome to the Digital Linguistics (DLx) pattern library! This website demonstrates how to style linguistic data for presentation on the web using HTML and CSS. This project contains CSS styles and example HTML for various kinds of linguistic components—interlinear glossed examples, transcriptions, grammatical glosses, etc.
[View the GitHub repository for this library.][GitHub]
To use the DLx styles in your project, start by including the CSS file(s) for the component(s) that you want to use in a tag. For example, if you wanted to use the styling for an interlinear gloss, you would include the interlinear.css file in your HTML tag like so:
``html`
Next, make sure your HTML is formatted correctly so that the DLx styles will work. Each component in the pattern library has example markup showing how the HTML should be structured. For example, here is some valid HTML that uses the .interlinear class.
` Chitimacha (isolate) siksink his heːčtiʔi an eagle met him Swadesh 1939b: A1b.1html`
siksi‑nk
eagle‑??
his
resp
heːčt‑iʔi
call‑nf;sg
That's all there is to it! Each component has its own standalone CSS file with no dependencies, so you do not need to use the entire set of DLx styles unless you want to. You can use all the DLx styles at once by including the dlx.css file in your project instead of files for individual components. This will automatically apply styling for many components, and make the rest of the DLx CSS classes available for use in your HTML.
* DLx styles are available either as standalone CSS files or [LESS files][LESS] files. LESS files must be compiled to CSS before you can use them, whereas CSS files can be used in your HTML project as is. See the [LESS website][LESS] for details on compiling LESS to CSS.
* If you want transcriptions and other linguistic data to display in a different font that supports IPA characters, you can also include typography.css (or typography.less) in your project. Alternatively, you can assign your own values for --font-unicode-sans and --font-unicode-serif. The typography file is already included in the dlx.css / dlx.less` bundle.
[GitHub]: https://github.com/digitallinguistics/styles/
[LESS]: http://lesscss.org/