Giter Club home page Giter Club logo

haba-kudzaev / archive.kalium19 Goto Github PK

View Code? Open in Web Editor NEW
2.0 0.0 0.0 1.52 MB

πŸ“¦ Набор ΡƒΡ‚ΠΈΠ»ΠΈΡ‚, миксинов, Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ Π½Π° языкС прСпроцСссора @sass для ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π² ускорСнии ΠΈ ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½ΠΈΠΈ написания CSS-стилСй.

Home Page: https://github.com/91muilak

License: MIT License

SCSS 100.00%
kalium19 91muilak rx1310 sass sass-framework sass-mixins sass-library sass-files scss scss-framework

archive.kalium19's Introduction

Новости ΠžΠ±ΡΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅

Logo Kalium19

πŸ“¦ Набор ΡƒΡ‚ΠΈΠ»ΠΈΡ‚, миксинов, Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ Π½Π° языкС прСпроцСссора SASS для ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π² ускорСнии ΠΈ ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½ΠΈΠΈ написания CSS-стилСй.

GitHub Repo stars GitHub watchers GitHub Forks GitHub contributors

ПослСдний ΠΊΠΎΠΌΠΌΠΈΡ‚ ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ ΠΊΠΎΠΌΠΌΠΈΡ‚ΠΎΠ² Π² Π³ΠΎΠ΄ ПослСдний Ρ€Π΅Π»ΠΈΠ· Π”Π°Ρ‚Π° послСднСго Ρ€Π΅Π»ΠΈΠ·Π° ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ ЯП Π’ΠΎΠΏ ЯП Π Π°Π·ΠΌΠ΅Ρ€ рСпозитория Π Π°Π·ΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ… issue ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ Π·Π°ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ… issues ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ… PR ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ Π·Π°ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ… PR visitors

πŸ“₯ Установка

Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ установку Kalium19 ΠΌΠΎΠΆΠ½ΠΎ склонировав вСсь Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ с GitHub ΠΈΠ»ΠΈ ΠΆΠ΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· ΠΏΠ°ΠΊΠ΅Ρ‚Π½Ρ‹ΠΉ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ npm.

πŸ”΄ npm

Для установки Kalium19 Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ:

npm i @rx1310/kalium19

ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² ΠΈΠΌΠΏΠΎΡ€Ρ‚:

@use 'node_modules/@rx1310/kalium19' as k19;

:octocat: Git

Для клонирования ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ установлСнный git. Если ΠΎΠ½ установлСн, Ρ‚ΠΎ просто Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ Π² Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Π»Π΅:

git clone https://github.com/91muilak/kalium19

ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² ΠΈΠΌΠΏΠΎΡ€Ρ‚:

@use 'kalium19' as k19;

πŸ—‚ Git Submodules

Для клонирования Π² качСствС субмодуля Ρ‚Π°ΠΊΠΆΠ΅ Π½ΡƒΠΆΠ΅Π½ установлСнный git. Если ΠΎΠ½ установлСн, Ρ‚ΠΎ просто Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ Π² Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Π»Π΅:

git submodule add https://github.com/91muilak/kalium19

ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² ΠΈΠΌΠΏΠΎΡ€Ρ‚:

@import 'kalium19' as k19;

πŸ“¦ Π‘Π±ΠΎΡ€ΠΊΠ°

Для сборки ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ ΠΏΠ°ΠΊΠ΅Ρ‚Π½Ρ‹ΠΉ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ npm, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ устанавливаСтся вмСстС с NodeJS. Если npm ΡƒΠΆΠ΅ установлСн, Ρ‚ΠΎ ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π² Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Π»Π΅ ΠΏΠ°ΠΏΠΊΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ:

npm install

Команда установит sass ВСрсия SASS Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ SASS Π² CSS. Для компиляции Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ npm run sass:compile. ПослС этого появится ΠΏΠ°ΠΏΠΊΠ° css с Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌΠΈ CSS-Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ.

Π”Ρ€ΡƒΠ³ΠΈΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹:

  • npm run sass:watch - Π²ΠΎΡ‚Ρ‡ΠΈΠ½Π³ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Ρ„Π°ΠΉΠ»Π°Ρ… ΠΈ мгновСнная компиляция;
  • npm run sass:watch-compressed - Ρ‚ΠΎ ΠΆΠ΅ Ρ‡Ρ‚ΠΎ ΠΈ npm run sass:watch, Π½ΠΎ компилируСтся ΡƒΠΆΠ΅ ΠΌΠΈΠ½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ CSS;

Π’ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π»ΡŽΠ±Ρ‹ΠΌ Π΄Ρ€ΡƒΠ³ΠΈΠΌ способом ΠΈΠ»ΠΈ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚ΠΎΠΉ для компиляции SASS.

πŸ‘₯ ΠšΠΎΠΌΡŒΡŽΠ½ΠΈΡ‚ΠΈ

Π― Π±ΡƒΠ΄Ρƒ Ρ€Π°Π΄ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΡ‚ вас Ρ„ΠΈΠ΄Π±Π΅ΠΊ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΡƒΡŽ-Π»ΠΈΠ±ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒ для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. ИдСи πŸ’‘, ΠΊΠΎΠ΄ πŸ‘©β€πŸ’», совСты πŸ‘Œ ΠΈ всё Ρ‡Ρ‚ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ - я Π±ΡƒΠ΄Ρƒ Ρ€Π°Π΄ 😊.

Telegram Дискуссии Discord

πŸ“œ ЛицСнзия ЛицСнзия

ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ распространяСтся ΠΏΠΎ свободной Π»ΠΈΡ†Π΅Π½Π·ΠΈΠΈ MIT.

MIT License

Copyright (c) 2021 The Kalium19 Project Authors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова

archive.kalium19's People

archive.kalium19's Issues

Π”ΠΎΡ€Π°Π±ΠΎΡ‚ΠΊΠ° README для Colors

НСобходимо Π΄ΠΎΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, Π° Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠ΅Ρ€Π΅ΠΏΠΈΡΠ°Ρ‚ΡŒ README.md Π² ΠΏΠ°ΠΏΠΊΠ΅ /@colors/README.md для соотвСтствия Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π½ΠΎΡ€ΠΌΠ΅ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅.

Π§Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ:

  • ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ "Git Submodules"
  • Π΄ΠΎΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ Ρ‡Π΅Ρ€Π΅Π· map Ρ†Π²Π΅Ρ‚ΠΎΠ²
  • ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ лишнюю ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ

Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ $border-radius ΠΏΡƒΠ±Π»ΠΈΡ‡Π½Ρ‹ΠΌ

Π’ миксинС border-radius Π΅ΡΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ бСрСтся ΠΈΠ· ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ $border-radius (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡. Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π²Π½ΠΎ "0").

Для Ρ‡Π΅Π³ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ ΠΏΡƒΠ±Π»ΠΈΡ‡Π½ΠΎΠΉ?

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΡ€ΠΈ использовании Kalium19 Ρ‡Π΅Ρ€Π΅Π· @use:

@use './node_modules/@rx1310/kalium19' as k19 with (
  $border-radius: 8px // ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ значСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
);

Π£Π±Ρ€Π°Ρ‚ΡŒ Π±Π΅ΠΉΠ΄ΠΆΠΈ Release ΠΈΠ· README

НСобходимо ΡƒΠ±Ρ€Π°Ρ‚ΡŒ Π½Π΅Ρ€Π°Π±ΠΎΡ‡ΠΈΠ΅ Π±Π΅ΠΉΠ΄ΠΆΠΈ, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠ΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΌ Ρ€Π΅Π»ΠΈΠ·Π΅ Π² Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ.

Π Π΅Π»ΠΈΠ·Ρ‹ Π±Ρ‹Π»ΠΈ ΡƒΠ±Ρ€Π°Π½Ρ‹ Π² Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ. Π’Π΅Π³ΠΈ, скорСС всСго Π±ΡƒΠ΄ΡƒΡ‚.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Ρ‰Ρ‘ прСфиксы ΠΊ миксину `opacity`

Π”Π°, я понимаю, Ρ‡Ρ‚ΠΎ сСйчас практичСски ΠΈ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ старыС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ установки свойства opacity, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π° IE8 ΠΈ Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ 5-7, Π½ΠΎ ΠΊΠ°ΠΊ Π΄ΠΎΠΏ. опция, Ρ‚ΠΎ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ‹ ΠΈ Π½Π΅Ρ‚?!

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ установки 50% opacity Π±Π»ΠΎΠΊΡƒ:

.block {

    /* IE 8 */
+   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /* IE 5-7 */
    filter: alpha(opacity=50);

    /* Netscape */
    -moz-opacity: .5;

    /* Safari 1.x */
+   -khtml-opacity: .5;

    /* Modern browsers */
    opacity: .5;

}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.