@silksofthesoul/css-corn

v1.0.4

Published

7 months ago

Css utility to quickly insert css styles

Downloads

0High
0Medium
0Low

silksofthesoul

css styles

css-corn

Ru

Css-corn — Утилита для быстрой вставки css стилей непосредственно в документ через тег <style>

Установка:

npm:

  npm i -s @silksofthesoul/css-corn

git:

  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-corn

git:

  git clone https://github.com/Silksofthesoul/css-corn.git
  cd css-corn
  npm install && npm run build:js

script:

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>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme