https://github.com/kakrostropovich/contentus
Simple JS-library (without dependencies) to help fast testing elements during the development of web interfaces.
https://github.com/kakrostropovich/contentus
css frontend helper html js-library plugin
Last synced: 9 months ago
JSON representation
Simple JS-library (without dependencies) to help fast testing elements during the development of web interfaces.
- Host: GitHub
- URL: https://github.com/kakrostropovich/contentus
- Owner: kakRostropovich
- License: mit
- Created: 2017-01-13T17:05:13.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-13T09:38:56.000Z (over 8 years ago)
- Last Synced: 2025-10-22T10:02:12.844Z (9 months ago)
- Topics: css, frontend, helper, html, js-library, plugin
- Language: JavaScript
- Size: 639 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Contentus.js
Simple JS-library (without dependencies) to help fast testing elements during the development of web interfaces.
## Description (English):
**Contentus.js** is a simple tool that can help designers and frontend developers to accustom themselves to test the robustness of interfaces for different content during layout.
#### Install:
Load package from npm:
```
$ npm install contentus
```
In the html attach the file library:
```
```
Then run contentus:
```
contentus.create({
fastClass: 'myClass', # 'ct' by default
contents: [
'Small text',
'Middle text...',
'<p>And you can add any html. <img src="cat.jpeg" alt="Cat"/><p>',
]
});
```
You can connect the library without any parameters then it will use texts by default.
#### How to use:
1. In a text editor, create an HTML element and add a temporary class `ct` (or specified in the parameter fastClass when connecting libraries).
2. After a page refresh in the browser the element will be highlighted with bright frame and ready for testing.
3. left/right Arrows change the options of filling the element with that original content will not be lost (will be part of the list).
4. If necessary, select another item for testing, Alt (Option) and clicking on the desired item.
---
## Описание (на русском):
**Contentus.js** (или для своих "Контентус") - простой инструмент, который может помочь верстальщикам и frontend-разработчикам приучить себя проверять устойчивость интерфейсов на разном контенте еще во время верстки.
#### Как подключить:
Загрузите пакет из npm:
```
$ npm install contentus
```
Подключите скрипт контентуса в html:
```
```
После этого запустите контентуса с нужными вам параметрами:
```
contentus.create({
fastClass: 'myClass', // 'ct' по умолчанию
contents: [
'Короткий текст для заголовка',
'Текст подлиннее для абзаца...',
'<p>А еще можно добавлять любую html-разметку. <img src="cat.jpeg" alt="Cat"/><p>'
]
});
```
Можно подключить библиотеку без параметров, тогда будут использоваться тексты по-умолчанию.
#### Как использовать:
1. В текстовом редакторе сверстайте нужный элемент и добавьте к нему временный класс `ct` (или указанный вами в параметре `fastClass` при подключении библиотеки).
2. После обновления страницы в браузере этот элемент будет выделен яркой рамкой и готов к быстрому тестированию.
3. Стрелками влево/вправо переключайте варианты наполнения элемента, при этот изначальное содержимое не будет потеряно (станет частью списка).
4. При необходимости выберите другой элемент для тестирования, зажав клавишу Alt (Option) и кликнув по нужному элементу.