Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paulradzkov/txt.less
Small atomic library for text styles and alignment
https://github.com/paulradzkov/txt.less
Last synced: about 1 month ago
JSON representation
Small atomic library for text styles and alignment
- Host: GitHub
- URL: https://github.com/paulradzkov/txt.less
- Owner: paulradzkov
- License: mit
- Created: 2017-07-09T20:42:42.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T17:02:01.000Z (about 2 years ago)
- Last Synced: 2024-10-13T11:12:49.805Z (3 months ago)
- Language: CSS
- Homepage: https://codepen.io/paulradzkov/pen/aYmdZz?editors=1100
- Size: 208 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# txt.less — responsive alignment classnames
[](http://badge.fury.io/js/txt.less)
[](http://badge.fury.io/bo/txt.less)
Responsive classnames generator for text styles depending on media breakpoints.
## Installation
**Compiled from CDN**
[`https://unpkg.com/[email protected]/txt.css`](https://unpkg.com/[email protected]/txt.css)
[`https://unpkg.com/[email protected]/txt.min.css`](https://unpkg.com/[email protected]/txt.min.css)
[`https://unpkg.com/[email protected]/txt.min.css.map`](https://unpkg.com/[email protected]/txt.min.css.map)
**NPM**
`npm install txt.less --save-dev`
**Bower**
`bower install txt.less --save`
## How it works
### `.txt-left:*`, `.txt-right:*`, `.txt-center:*`, `.txt-justify:*`
Alignment classes for selected breakpoint and on larger screens. Example as rendered in CSS:
```css
@media (min-width: 576px) {
.txt-left\:sm {
text-align: left;
}
}
```
| text-align | **xs** | **sm** | **md** | **lg** | **xl** |
| ----------------- | ------- | --------- | --------- | ---------- | -------- |
| | 0—575px | 576—767px | 768—991px | 992—1199px | 1200—∞px |
| `.txt-left` | left | left | left | left | left |
| `.txt-left:xs` | left | left | left | left | left |
| `.txt-left:sm` | | left | left | left | left |
| `.txt-left:md` | | | left | left | left |
| `.txt-left:lg` | | | | left | left |
| `.txt-left:xl` | | | | | left |
### `.txt-nowrap`, `.txt-ellipsis`
Those two doesn't have responsive suffixes and just renders with no media queries.
```css
.txt-nowrap {
white-space: nowrap;
}
.txt-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
## Usage in HTML
Link compiled `txt.css` from CDN and apply classes to any HTML element.
## Usage in LESS
Install library with `npm install txt.less --save-dev` and include its main file inside your project less file:
```less
@import (less) "./node_modules/txt.less/txt.less";
```
That is enough to run library with default parameters.
### Default parameters
Parameters stored in mixin:
```less
.txt-settings() {
// media breakpoints
@breakpoints:
576px,
768px,
992px,
1200px;
// names for breakpoint suffixes
@suffixes: xs, sm, md, lg, xl;
// IMPORTANT: suffixes count should be bigger than breakpoints count by 1
// suffixes-count = breakpoints-count + 1
}
```
### Redefining parameters
To change any (or every) parameter add setting mixin after import inside your .less file:
```less
@import (less) "./node_modules/txt.less/txt.less";
.txt-settings() {
// media breakpoints
@breakpoints:
768px,
1024px,
1440px;
// names for breakpoint suffixes
@suffixes: small, medium, large, huge;
// IMPORTANT: suffixes count should be bigger than breakpoints count by 1
// suffixes-count = breakpoints-count + 1
}
```
In that example was redefined breakpoints and suffix names.