css-corn
git | github | issues | download | demo source | demo page | npm
Ru
Css-corn — Утилита для быстрой вставки css стилей непосредственно в документ через тег <style>
Установка:
npm:
npm i -s @silksofthesoul/css-corngit:
git clone https://github.com/Silksofthesoul/css-corn.git
cd css-corn
npm install && npm run build:jsПодключение через тег script:
Вы можете подключить библиотеку скачав скрипт самостоятельно, и подключив его к проекту с помощью тега <script>
<script type="text/javascript" src="/css-corn/index.js"></script>...и использовать так:
let cssCorn = new $CssCorn();Подключение через тег import-require:
Вы можете подключить библиотеку установив пакет через npm и использовать конструкцию import/require
import CssCorn from '@silksofthesoul/css-corn';или:
const CssCorn = require('@silksofthesoul/css-corn');...и использовать так:
let cssCorn = new CssCorn();Как использовать:
Подключите библиотеку. Например в теге 😃 <head> 😉
...
<script type="text/javascript" src="path/to/css-corn/index.js"></script>
</head>
<body>
...Создайте объект используя шаблон класса 🦄 CssCorn 🌽
<script>
// Создайте объект
const css = new $CssCorn({// или new CssCorn -- если вы импортируете модуль
id: 'my-id', // id тега <style> | Необязательный параметр
willRender: true // Параметр отвечает, за перманентный рендер вносимых стилей | Не обязательный параметр, по умолчанию – false
});
</script>Теперь вы можете ➕ добавлять, ➖ удалять и 📝переименовывать стили
<script>
import {CssCorn as MyAwesomeCssUnicorn} from '@silksofthesoul/css-corn';
const css1 = new MyAwesomeCssUnicorn();
// По шагу на строку
css1.add('body','opacity: 0; font-family: Arial, sans-serif;');
css1.add('body h2','font-size: 2em').add('body h1', 'color: red;');
css1.render();
// chaining style
css1
.del('body','opacity') // удалить свойство opacity из body
.del('body h1') // удалить правило body h1
.render()
.add('.magic', 'border: 2px solid red;')
.rename('.magic', '.magic * p .magic > .magic + p .magic')
.render();
// вариант использования. Но возможно -- не лучшая практика
new CssCorn({id:'Test'}).add('.test', 'color: green').render();
// Еще один пример, когда описанные стили, будут сразу же применены
let css2 = new CssCorn({id:'wow', willRender})
css2
.add('.msg': 'color: red')
.add('.msg': 'font-weight: bold')
.add('.msg span': 'background: blue; font-weight: bold')
.del('body');
</script>En
Css-corn - A utility for quickly inserting css styles directly into the document via the <style> tag
Install:
npm:
npm i @silksofthesoul/css-corngit:
git clone https://github.com/Silksofthesoul/css-corn.git
cd css-corn
npm install && npm run build:jsscript:
You can connect the library by downloading the script yourself, and connecting it to the project using the <script> tag
<script type="text/javascript" src="/css-corn/index.js"></script>...and use it:
let cssCorn = new $CssCorn();import-require:
You can connect the library by installing the package via npm and use the import / require construct
import CssCorn from '@silksofthesoul/css-corn';or:
const CssCorn = require('@silksofthesoul/css-corn');...and use it:
let cssCorn = new $CssCorn();How to use:
Connect the library. For example, in the tag 😃 <head> 😉
...
<script type="text/javascript" src="path/to/css-corn/index.js"></script>
</head>
<body>
...Create an object using the class template 🦄 CssCorn 🌽
<script>
// Create an object
const css = new CssCorn({ // or 'new CssCorn' if you import/require a module
id: 'my-id', // id of <style> tag | Optional parameter
willRender: true // The parameter is responsible for the permanent rendering of insertion styles | Optional parameter, false by default
});
</script>Now you can ➕ add, ➖ delete and 📝 rename styles
<script>
import {CssCorn as MyAwesomeCssUnicorn} from '@silksofthesoul/css-corn';
const css1 = new MyAwesomeCssUnicorn();
// Step By Line
css1.add('body','opacity: 0; font-family: Arial, sans-serif;');
css1.add('body h2','font-size: 2em').add('body h1', 'color: red;');
css1.render();
// chaining style
css1
.del('body','opacity') // remove the opacity property from body
.del('body h1') // remove the rule body h1
.render()
.add('.magic', 'border: 2px solid red;')
.rename('.magic', '.magic * p .magic > .magic + p .magic')
.render();
// use case. But maybe not the best practice
new CssCorn({id:'Test'}).add('.test', 'color: green').render();
// Another example where the described styles will be applied immediately
let css2 = new CssCorn({id:'wow', willRender})
css2
.add('.msg': 'color: red')
.add('.msg': 'font-weight: bold')
.add('.msg span': 'background: blue; font-weight: bold')
.del('body');
</script>