DLx Styles Library v0.19.0
Version 0.19.0 of the DLx styles library has just been released! Check out the release on npm or GitHub, or view the user documentation.
What is the DLx Styles Library?
The DLx styles library is a collection of CSS variables and classes for styling linguistic elements in web pages, such as interlinear glosses or phonetic transcriptions.
For example, the DLx styles library has an .igl (interlinear gloss) CSS class that you can apply to your HTML which will format your interlinear examples to look like this:
The HTML for the Chitimacha example looks like this:
The DLx styles library provides examples of what each CSS class looks like, along with HTML examples showing you how to structure your HTML to get the CSS to work properly.
Using the DLx Styles Library
To use the DLx styles in your own project, you can either install the styles library from npm, download the library from the GitHub releases page, or download the individual files you need directly from GitHub.
To apply a class like .igl, first make sure you’ve copied the interlinear.css file (or interlinear.less if you’re using LESS) into your project. That file is located in the components/interlinear folder in the DLx styles library. Then link the stylesheet to your HTML, like so:
<link rel=stylesheet type=text/css href=igl.css>Finally, make sure the HTML of your interlinear example is formatted following the example HTML in the DLx styles library, and has the .igl class applied to it. That’s it! You’re ready to bring linguistics to the web!
I want to contribute!
Great! The Digital Linguistics project is 100% open source! Anyone is welcome to contribute whether through reporting bugs, requesting features, or writing code. Check out the DLx organization or the DLx styles project on GitHub.
I have other questions
Ask away! Feel free to open an issue on GitHub with your question.
