Π Π°Π·Π½ΠΎΠ΅

Ui Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ: Π˜Π΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ UI Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ / Π₯Π°Π±Ρ€

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π’Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ быстро ΠΈ красиво: 15 популярных CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ²

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ красивых стилСй ΡƒΠ±ΠΈΠ²Π°Π΅Ρ‚ ΡƒΠΉΠΌΡƒ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ Ρ‚Ρƒ ΠΆΠ΅ Π·Π°Π΄Π°Ρ‡Ρƒ Π½Π° Π»Π΅Ρ‚Ρƒ. Π’Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ самых насущных ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ – Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, интСрфСйсы, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ.

ΠšΠ»Π°ΡΡΠΈΡ‡Π΅ΡΠΊΠΈΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ – Π½Π°Π±ΠΎΡ€ Π±Π°Π·ΠΎΠ²Ρ‹Ρ… стилСй для вёрстки Π²Π΅Π±-страницы:

  • сСтка;
  • ΠΈΠΊΠΎΠ½ΠΊΠΈ;
  • Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹;
  • элСмСнты Ρ„ΠΎΡ€ΠΌ ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ;
  • Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ°;
  • интСрфСйсныС ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Ρ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°;
  • Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ классы оформлСния элСмСнтов: отступы, Ρ†Π²Π΅Ρ‚Π° ΠΈ Ρ‚. Π΄.

МоТно Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π½Π°Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ, Π½Π΅ тратя врСмя Π½Π° ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ шаблонного ΠΊΠΎΠ΄Π° ΠΈΠ»ΠΈ написаниС с чистого листа. CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ – Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚ систСмы стилСй.

Π—Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ΅Π½ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ?

Π§Π΅ΠΌ слоТнСС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Ρ‚Π΅ΠΌ большС оснований Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌ инструмСнтом. Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… случаях:

  • НуТно быстро ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сайт. ΠšΠ°ΡΡ‚ΠΎΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΡ€ΠΎΡ‰Π΅, Ρ‡Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ с нуля.
  • Если Π²Ρ‹ ΠΏΠ»ΠΎΡ…ΠΎ Π·Π½Π°Π΅Ρ‚Π΅ CSS. Π‘Π΅Ρ€ΠΈΡ‚Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ классы ΠΈ Π½Π°ΡΠ»Π°ΠΆΠ΄Π°ΠΉΡ‚Π΅ΡΡŒ стандартным, Π½ΠΎ элСгантным ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½Ρ‹ΠΌ интСрфСйсом.
  • Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½-Π³ΠΈΠΏΠΎΡ‚Π΅Π·Ρƒ. Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ идСю Π² Π΄Π΅Π»Π΅.

Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ

Bootstrap

ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½Π΅ΠΉΡˆΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Π’ 2018 Π³ΠΎΠ΄Ρƒ Π²Ρ‹ΡˆΠ΅Π» Bootstrap 4. Π’ Π½Ρ‘ΠΌ Π΅Ρ‰Ρ‘ большС ΡƒΠ΄ΠΎΠ±Π½Ρ‹Ρ… ΡƒΡ‚ΠΈΠ»ΠΈΡ‚ ΠΈ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ². ЧСтвСртая вСрсия написана Π½Π° SASS, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ всС прСимущСства прСпроцСссоров.

Bootstrap – самый популярный CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ

Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Bootstrap:

  • ΠŸΡ€ΠΎΡ€Π°Π±ΠΎΡ‚Π°Π½Π½Π°Ρ адаптивная сСтка, основанная Π½Π° Flex-ΠΌΠΎΠ΄Π΅Π»ΠΈ, ΠΏΡ€ΠΎΡˆΠ»Π° испытаниС Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ Π½Π° всСх Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ…. Π Π΅ΡˆΠ°Π΅Ρ‚ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π·Π°Π΄Π°Ρ‡ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.
  • На Bootstrap созданы тысячи шаблонов, Ρ‚Π΅ΠΌ ΠΈ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². МоТно ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ сайт, Π½Π΅ написав Π½ΠΈ строчки CSS-ΠΊΠΎΠ΄Π°.
  • ΠŸΡ€ΠΎΡΡ‚ΠΎΡ‚Π° обучСния. ΠžΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹Π΅ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ, подробная докумСнтация с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ. Масса пособий для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² с Ρ€Π°Π·Π½ΠΎΠΉ ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒΡŽ погруТСния Π² Ρ‚Π΅ΠΌΡƒ.
  • Π“ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ JavaScript для Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². АккордСоны ΠΈ карусСли ΡƒΠΆΠ΅ написаны Π·Π° вас.
  • ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€Ρ‹ SASS ΠΈ LESS.

Foundation

Foundation – вСроятно, Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎ распространСнности CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ. Π£Ρ‚ΠΎΠ½Ρ‡Π΅Π½Π½Ρ‹ΠΉ ΠΈ Π³ΠΈΠ±ΠΊΠΈΠΉ инструмСнт ΠΏΠΎΠ΄ΠΎΠΉΠ΄Ρ‘Ρ‚ для ΠΎΡ‡Π΅Π½ΡŒ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ². Им ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Facebook, eBay, Mozilla, Adobe, HP, Cisco ΠΈ Disney.

Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Ρ‚Π°ΠΊΠΆΠ΅ построСн Π½Π° прСпроцСссорС SASS ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ JavaScript-ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΡƒΡŽ. ΠšΡ€ΠΈΠ²Π°Ρ обучСния ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Bootstrap Π±ΠΎΠ»Π΅Π΅ крутая, Π½ΠΎ Π΅ΡΡ‚ΡŒ ΠΈ прСимущСства.

Foundation – идСальноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²

Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Foundation:

  • Адаптивная систСма сСток. Π’ создании ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π΅ уступаСт Bootstrap.
  • ΠœΠΎΡ‰Π½Ρ‹ΠΉ email-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ. Responsive-Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π²Π΅Π±-прилоТСниях, Π½ΠΎ ΠΈ Π² ΠΏΠΈΡΡŒΠΌΠ°Ρ…. Никаких Π³Ρ€ΠΎΠΌΠΎΠ·Π΄ΠΊΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ‡Π΅ΠΊ – ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Foundation for emails.
  • ВСхничСская ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°. Компания-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-Ρ‚Ρ€Π΅Π½ΠΈΠ½Π³ΠΈ ΠΈ ΠΊΠΎΠ½ΡΡƒΠ»ΡŒΡ‚Π°Ρ†ΠΈΠΈ ΠΏΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρƒ. Π£Π²Ρ‹, Π½Π΅ бСсплатно πŸ™
  • ΠŸΡ€ΠΎΡΡ‚Π°Ρ кастомизация. Foundation Π³ΠΈΠ±ΠΎΠΊ. Π’Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ интСрфСйс ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.
  • JavaScript-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹.
  • Π›Π΅Π³ΠΊΠΎΠ΅ созданиС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ.
  • Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ.
  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°.
  • ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€ SASS.

Pure

Π­Ρ‚ΠΎΡ‚ лСгковСсный (3.8 Кб) CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ создан Yahoo Π² 2014 Π³ΠΎΠ΄Ρƒ. Π—Π° Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ приходится ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ. Pure Π½Π΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π±ΠΎΠ³Π°Ρ‚ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² – ΠΎΠ½ сконцСнтрирован Π½Π° Π»Π΅ΠΉΠ°ΡƒΡ‚Π°Ρ… ΠΈ мСню. И ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π½ΠΈ ΠΊΠ°ΠΏΠ»ΠΈ JavaScript.

Pure.css – Π»Π΅Π³ΠΊΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ²

Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Pure.css:

  • ΠšΡ€ΠΎΡˆΠ΅Ρ‡Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€.
  • Чистый CSS – для встраивания Π½ΡƒΠΆΠ΅Π½ лишь ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ».
  • МСню Π½Π° любой вкус – Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅, Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅, Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅.
  • Удобная Ρ€Π°Π±ΠΎΡ‚Π° с элСмСнтами Ρ„ΠΎΡ€ΠΌ.

Bulma

Π‘Π΅Ρ€ΡŒΠ΅Π·Π½Ρ‹ΠΉ ΠΈΠ³Ρ€ΠΎΠΊ Π½Π° CSS Ρ€Ρ‹Π½ΠΊΠ΅ – Bulma. Гармоничная смСсь качСств: малСнький, ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ, ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ. Написан Π½Π° SASS, сСтка Π½Π° флСксах, mobile-first ΠΏΠΎΠ΄Ρ…ΠΎΠ΄, чистый CSS – JavaScript Π½Π΅ прилагаСтся.

Bulma – Π³Π°Ρ€ΠΌΠΎΠ½ΠΈΡ‡Π½Ρ‹ΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ

Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Bulma:

  • Π›ΠΎΠ³ΠΈΡ‡Π½Ρ‹Π΅ ΠΈ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‰ΠΈΠ΅ΡΡ ΠΈΠΌΠ΅Π½Π° классов.
  • Чистый CSS – вСсь Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅.
  • Π‘ΠΎΠ»ΡŒΡˆΠΎΠ΅ ΠΈ Π΄Ρ€ΡƒΠΆΠ΅Π»ΡŽΠ±Π½ΠΎΠ΅ сообщСство, Π»Π΅Π³ΠΊΠΎ Π½Π°ΠΉΡ‚ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ Π½Π° всС вопросы.
  • ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ. Π˜Π΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ².
  • ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€ SASS.

Semantic UI

Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΊΠ°ΠΊ слСдуСт ΠΈΠ· названия, Ρ‚Ρ€Π΅ΠΏΠ΅Ρ‚Π½ΠΎ относится ΠΊ сСмантикС интСрфСйсов. Π’ Semantic UI 3000 настраиваСмых ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… ΠΈ 50 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² для создания сайтов.

Semantic UI – Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для создания интСрфСйсов, понятных ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ

Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Semantic UI:

  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ с React, Angular, Meteor, Ember ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-инструмСнтами. Semantic UI Π»Π΅Π³ΠΊΠΎ ввСсти Π² ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Π½Π΅ пСрСписывая Π΅Π³ΠΎ Π·Π°Π½ΠΎΠ²ΠΎ.
  • «ЧСловСкопонятный» HTML, ΡƒΠΏΠΎΡ€ Π½Π° сСмантику Π²Π΅Π±Π°, Π»Π΅Π³ΠΊΠΎ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹Π΅ ΠΈΠΌΠ΅Π½Π° классов.
  • ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Β«ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈΒ». Π”Π°ΠΆΠ΅ нСкастомизированный Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ выглядит прСвосходно.
  • Π¨ΠΈΡ€ΠΎΠΊΠΈΠΉ простор для настройки.
  • Π˜Π½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный JavaScript.

UI Kit

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π΄ΠΎΠ±Ρ€ΠΎΡ‚Π½Ρ‹ΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ с классичСским Π½Π°Π±ΠΎΡ€ΠΎΠΌ полСзностСй ΠΈ удобств. НСбольшой Ρ€Π°Π·ΠΌΠ΅Ρ€, встроСнныС интСрфСйсныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° прСпроцСссоров, отзывчивая сСтка ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ кастомизации – всё это UI Kit.

UI Kit – чистый ΠΊΠΎΠ΄ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ

Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ UI Kit:

  • Минимализм. Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ поощряСт созданиС чистого ΠΊΠΎΠ΄Π° ΠΈ ясных интСрфСйсов.
  • ΠžΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ с шаблонами использования, ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌΠΈ ΠΈ возмоТностями кастомизации.
  • ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€Ρ‹ LESS ΠΈ SASS.

Materialize CSS

Π”Π΅Ρ‚ΠΈΡ‰Π΅ Google появилось Π½Π° свСт Π² 2014 ΠΈ Π΄ΠΎ сих ΠΏΠΎΡ€ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Π»ΠΈΠ΄ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠ΅ мСста Π² Π³ΠΎΠ½ΠΊΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ². Materialize CSS ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π½Π°Π±ΠΎΡ€ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… ΠΊ использованию ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π² стилС Material Design.

Materialize CSS – соврСмСнный Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, основанный Π½Π° Material Design

Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Materialize CSS:

  • Material Design. Π­Ρ‚ΠΎ ΠΏΠΎ ΠΏΡ€Π°Π²Ρƒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых популярных языков Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² ΠΌΠΈΡ€Π΅.
  • Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ сСтку Bootstrap. МоТно Π½Π΅ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ Π² Π½ΠΎΠ²Ρ‹Ρ… концСпциях.
  • ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… мСню.
  • ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€ SASS.

Milligram

Один ΠΈΠ· самых ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π½Ρ‹Ρ… CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ². Π’ сТатом Π²ΠΈΠ΄Π΅ Milligram вСсит всСго 2Кб. Но ΠΌΠ°Π», Π΄Π° ΡƒΠ΄Π°Π» – Π² вашСм распоряТСнии ΠΏΠΎΠ»Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ инструмСнтов Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°.

Milligram – ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π½Ρ‹ΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ.

Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Milligram:

  • МалСнький Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π°.
  • ΠšΠ»Π°ΡΡΠ½Ρ‹Π΅ Ρ‚Π΅ΠΌΡ‹.

Skeleton

ВсСго 400 строк ΠΊΠΎΠ΄Π° – Π° Π½Π° Π²Ρ‹Ρ…ΠΎΠ΄Π΅ ΠΌΡ‹ ΠΈΠΌΠ΅Π΅ΠΌ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ. Skeleton – это Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π»Π΅ΠΉΠ°ΡƒΡ‚Ρ‹, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ. Π—Π΄Π΅ΡΡŒ вСсь стандартный Π½Π°Π±ΠΎΡ€: Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ°, Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Ρ„ΠΎΡ€ΠΌΡ‹, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Ρ‚. Π΄. МоТно Π±Ρ€Π°Ρ‚ΡŒ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ Π²Π΅Π±-сайт.

Skeleton – ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Skeleton:

  • Волько самая нСобходимая Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.
  • ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ.

Tailwind CSS

НизкоуровнСвый CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ всС возмоТности кастомизации. Tailwind CSS ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для нСстандартных Π΄ΠΈΠ·Π°ΠΉΠ½-Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ. Если Π²Ρ‹ ΠΈΠΌΠ΅Π΅Ρ‚Π΅ прСдставлСниС ΠΎ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ Π°Ρ‚ΠΎΠΌΠ°Ρ€Π½ΠΎΠ³ΠΎ CSS, это ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ. Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ написан Π½Π° PostCSS ΠΈ конфигурируСтся Π½Π° JS.

Tailwind CSS – Π½ΠΈΠ·ΠΊΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ с мноТСством ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Π°Ρ€Π½Ρ‹Ρ… классов

Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Tailwind CSS:

  • ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²ΠΎ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Π°Ρ€Π½Ρ‹Ρ… классов. ΠŸΡ€ΠΎΡΡ‚Π°Ρ кастомизация элСмСнтов.
  • Набор Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΎΠΏΡ†ΠΈΠΉ.

Spectre

Spectre – классичСский ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π½Ρ‹ΠΉ CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ с элСгантным Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½Ρ‹ΠΌ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ.

Spectre – элСгантный CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ

Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Spectre:

  • Чистый CSS, Π±Π΅Π· JavaScript-ΠΊΠΎΠ΄Π°.
  • ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€ SASS.

Base

Base – ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΉ ΠΈ Π»Π΅Π³ΠΊΠΈΠΉ, Π½ΠΎ довольно ΠΌΠΎΡ‰Π½Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΌ Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚ΠΎΠΌ для Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

Base – Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΉ CSS-Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚ для вашСго сайта

Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Base:

  • Основан Π½Π° послСднСй вСрсии Normalize.css.
  • Π Π°Π·Π±ΠΈΡ‚ Π½Π° нСзависимыС Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π° ΠΌΠΎΠ΄ΡƒΠ»ΠΈ.

Picnic CSS

НСбольшая Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° статичСских ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Picnic Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя сСтку, Ρ„ΠΎΡ€ΠΌΡ‹, Ρ‚Π°Π±Ρ‹, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты ΠΈ Ρ‚. ΠΏ.

Picnic – Π»Π΅Π³ΠΊΠΈΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ с симпатичным Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ

Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Picnic CSS:

  1. Π‘ΠΈΠΌΠΏΠ°Ρ‚ΠΈΡ‡Π½Ρ‹ΠΉ Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.
  2. НастраиваСмыС ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅.
  3. ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€ Sass.

Mustard UI

Π˜Ρ‰Π΅Ρ‚Π΅ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ²? Π’Ρ‹ Π΅Π³ΠΎ нашли. ΠžΠΏΠ΅Π½ΡΠΎΡ€ΡΠ½Ρ‹ΠΉ Π»Π΅Π³ΠΊΠΈΠΉ Mustard создан ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

Mustard UI – CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ²

Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Mustard UI:

  1. ΠžΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ. МоТно Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΡƒΠΆΠ½Ρ‹.
  2. ΠžΡ‚Π»ΠΈΡ‡Π½Π°Ρ докумСнтация.
  3. МалСнький Ρ€Π°Π·ΠΌΠ΅Ρ€.

Dead Simple Grid

ΠžΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½Ρ‹ΠΉ Ρ‡Π΅ΠΌΠΏΠΈΠΎΠ½ Π² Π½ΠΎΠΌΠΈΠ½Π°Ρ†ΠΈΠΈ Π‘Π°ΠΌΡ‹ΠΉ ΠΊΡ€ΠΎΡ…ΠΎΡ‚Π½Ρ‹ΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ. Dead Simple Grid – это, ΠΏΠΎ Π±ΠΎΠ»ΡŒΡˆΠΎΠΌΡƒ счСту, ΠΈ Π½Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ вовсС. ВСсит всСго 250 Π±Π°ΠΉΡ‚(!) ΠΈ состоит лишь ΠΈΠ· Π΄Π²ΡƒΡ… классов. ВсС, Ρ‡Ρ‚ΠΎ ΡƒΠΌΠ΅Π΅Ρ‚ Dead Simple Grid, – ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сСтки, Π½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ это Π²Π°ΠΌ ΠΈ трСбуСтся.

Dead Simple Grid – убийствСнно простой инструмСнт для построСния сСток

Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Dead Simple Grid:

  • ЭлСмСнтарная структура. Вряд Π»ΠΈ Π²Π°ΠΌ Π²ΠΎΠΎΠ±Ρ‰Π΅ потрСбуСтся докумСнтация.
  • АдаптивныС ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ фиксированныС отступы.
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° бСсконСчной влоТСнности.

Бонус

Π’ качСствС Π½Π°Π³Ρ€Π°Π΄Ρ‹ Π·Π° ΠΏΡ€ΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ Π΅Ρ‰Π΅ 3 интСрСсных CSS Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΠΏΡ€ΠΈΠ³ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ:

  • Animate.css. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ с ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹ΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ эффСктов.
  • NES.css. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹Ρ… Π² 8-Π±ΠΈΡ‚Π½ΠΎΠΌ стилС.
  • Simple Grid. ΠšΠ»Π°ΡΡΠΈΡ‡Π΅ΡΠΊΠ°Ρ 12-колоночная сСтка для быстрого построСния ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ².

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹Π±ΠΎΡ€?

CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ ΠΌΠ½ΠΎΠ³ΠΎ Π³ΠΎΡ‚ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, ΡƒΠΆΠ΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Π½ΠΎΠ³ΠΎ Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΈ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ…, Ρ‡Π΅ΠΌ Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ экономят врСмя. ΠŸΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π½Π΅ вопросом Β«ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· этих инструмСнтов Π»ΡƒΡ‡ΡˆΠ΅?Β», Π° Β«ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ… Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΌΠΎΠ΅Π³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°?Β».

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ Π·Π½Π°Ρ‡Π°Ρ‰ΠΈΠ΅ Ρ„Π°ΠΊΡ‚ΠΎΡ€Ρ‹:

  • Π Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»ΠΎΠ² Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° ΠΈΠ»ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ.
  • НСобходимый Π½Π°Π±ΠΎΡ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².
  • НаличиС ΠΈΠ»ΠΈ отсутствиС JavaScript-сопровоТдСния.
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° прСпроцСссоров.
  • ΠšΠΎΠ½Ρ†Π΅ΠΏΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄.

Π Π°Π·ΠΎΠ±Ρ€Π°Π²ΡˆΠΈΡΡŒ Π² своих потрСбностях, Π²Ρ‹ Π±Π΅Π· Ρ‚Ρ€ΡƒΠ΄Π° ΠΏΠΎΠ΄Π±Π΅Ρ€Ρ‘Ρ‚Π΅ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄Π°ΠΆΠ΅ ΠΈΠ· нашСго списка.

Π‘ ΠΊΠ°ΠΊΠΈΠΌΠΈ CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅? ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ впСчатлСниями!

23 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π½Ρ‹Ρ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² React для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Π”ΠΆΠΎΠ½Π°Ρ‚Π°Π½Π° Бэринга Β«23 Best React UI Component FrameworksΒ».

Богласно опроса Π½Π° Stack Overflow ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ React выросла ΠΏΠΎΡ‡Ρ‚ΠΈ Π½Π° 150% с 2017 Π΄ΠΎ 2018 Π³ΠΎΠ΄Π°. На самом Π΄Π΅Π»Π΅ Π½ΠΈΡ‡Π΅Π³ΠΎ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ. Π‘Ρ€Π΅Π΄ΠΈ ΠΏΡ€ΠΎΡ‡Π΅Π³ΠΎ, это стало Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ благодаря Π΅Π³ΠΎ растущСй экосистСмС, основанной Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ….

ΠšΡ‚ΠΎ-Ρ‚ΠΎ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ – Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ собствСнных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Π’ любом случаС, ΠΏΠ΅Ρ€Π΅Π΄ Π²Π°ΠΌΠΈ ΠΏΠΎΠ»Π½Ρ‹ΠΉ список Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π½Ρ‹Ρ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ бонус Π² ΠΊΠΎΠ½Ρ†Π΅ списка.

Π‘ΠΎΠ²Π΅Ρ‚: Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Bit для ΠΎΡ‚Π±ΠΎΡ€Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈΠ· любой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΈΠ»ΠΈ прилоТСния ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… доступными для использования ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π² любом Π΄Ρ€ΡƒΠ³ΠΎΠΌ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.

1. Material-UI

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React, Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΡŽΡ‰ΠΈΠ΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Google. Π­Ρ‚ΠΎ ΠΎΠ΄Π½Π° ΠΈΠ· самых популярных ΠΈ ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… React UI Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ Π½Π° GitHub, Π½Π°Π±Ρ€Π°Π²ΡˆΠ°Ρ 35 тыс. Π·Π²Π΅Π·Π΄ (!).

2. React Bootstrap

Bootstrap 3 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, построСнныС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ React. ИмСя 13 тыс. Π·Π²Π΅Π·Π΄, эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° всС Π΅Ρ‰Π΅ популярна ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Π°, Π΄Π°ΠΆΠ΅ нСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ bootstrap 4.

3. Grommet

ΠŸΡ€Π΅ΠΊΡ€Π°ΡΠ½Ρ‹Π΅ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, сфокусированныС Π½Π° основном ΠΎΠΏΡ‹Ρ‚Π΅. Набрав большС 3 тысяч Π·Π²Π΅Π·Π΄, эти ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎ ΠΏΡ€Π°Π²Ρƒ Π³ΠΎΡ€Π΄ΠΈΡ‚ΡŒΡΡ своим простым, Π½ΠΎ красивым Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

4. Ant Design React

ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½Ρ‹Π΅ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ руководствам ΠΈ спСцификациям Ant Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Написаны Π½Π° typescript ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ интСнсивный Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс.

5. Blueprint

ΠžΡΠ½ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π½Π° React Π½Π°Π±ΠΎΡ€ инструмСнтов UI для Π²Π΅Π±Π°. Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π½Π°Π±Ρ€Π°Π» большС 9 тысяч Π·Π²Π΅Π·Π΄; Π΅Π³ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ 100 участников. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ написаны Π½Π° TS ΠΈ стилизованы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Sass для быстрой Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

6. Reactstrap

Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° прСдоставляСт простыС React bootstrap 4 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Она ΠΈΠΌΠ΅Π΅Ρ‚ большС 4 тыс. Π·Π²Π΅Π·Π΄ ΠΈ ΠΎΠΊΠΎΠ»ΠΎ 100 участников. Π­Ρ‚ΠΎ вСсьма популярный Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊΠΎΠ² bootstrap.

7. React Toolbox

React Toolbox это Π½Π°Π±ΠΎΡ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React, Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΡŽΡ‰ΠΈΡ… ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Google. Он построСн Π½Π° основС Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… самых ΠΌΠΎΠ΄Π½Ρ‹Ρ… ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ CSS (написаны Π½Π° SASS), Webpack ΠΈ ES6. React Toolbox ΠΎΡ‡Π΅Π½ΡŒ популярСн: Ρƒ Π½Π΅Π³ΠΎ ΠΎΠΊΠΎΠ»ΠΎ 8 тысяч Π·Π²Π΅Π·Π΄.

8. React Desktop

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° UI-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², нацСлСнная Π½Π° пСрСнос Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ дСсктопного ΠΎΠΏΡ‹Ρ‚Π° Π² Π²Π΅Π±. Π•Π΅ ΠΎΡ‚Π»ΠΈΡ‡Π°Π΅Ρ‚ мноТСство ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² macOS Sierra ΠΈ Windows 10.

9. Semantic UI React

Semantic UI React это ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½Π°Ρ интСграция React для Semantic UI. ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈΠΌΠ΅Π΅Ρ‚ 6,5 тыс. Π·Π²Π΅Π·Π΄ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Netflix, Amazon ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ солидными организациями.

10. Onsen UI React

Π‘ΠΎΠ»ΡŒΡˆΠ΅ 100 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ созданных для ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ плоского Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Onsen UI ΠΈ React для построСния Π³ΠΈΠ±Ρ€ΠΈΠ΄Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

11. Rebass

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΈ систСма проСктирования React UI ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², построСнная с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стилизованных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ стилизованной систСмы. Она Π½Π°Π±Ρ€Π°Π»Π° ΠΏΠΎΡ‡Ρ‚ΠΈ 4 тысячи Π·Π²Π΅Π·Π΄ ΠΈ являСтся ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ для ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊΠΎΠ² стилизованных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

12. Elemental UI

Π­ΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ UI-инструмСнтов для React.js сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. 4 тысячи Π·Π²Π΅Π·Π΄ Π½Π° GitHub. Π’ настоящСС врСмя разрабатываСтся Π°Π²Ρ‚ΠΎΡ€Π°ΠΌΠΈ Keystone.js Π² Thinkmill.

13. Belle

Набор ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React, ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΈ дСсктопных вСрсий, с ΡˆΠΈΡ€ΠΎΠΊΠΎ настраиваСмыми стилями, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ настроСны ΠΊΠ°ΠΊ Π½Π° Π±Π°Π·ΠΎΠ²ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅, Ρ‚Π°ΠΊ ΠΈ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

14. Prime React

Π₯отя Ρƒ этого ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΏΠΎΠΊΠ° Π΅Ρ‰Π΅ мСньшС 400 Π·Π²Π΅Π·Π΄, Π½Π°ΠΌ ΠΎΠ½ нравится, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ прСдоставляСт Π±ΠΎΠ³Π°Ρ‚Ρ‹ΠΉ ΠΈ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€ ΠΈΠ· Π±ΠΎΠ»Π΅Π΅ 60 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса со мноТСством Ρ‚Π΅ΠΌ.

15. Atlaskit

ΠžΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ React UI ΠΎΡ‚ Atlasssian являСтся тСхничСской Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ руководства ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ Atlassian (Atlassian Design Guidelines – ADG). ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ находится Π² собствСнном ΠΏΠ°ΠΊΠ΅Ρ‚Π΅.

16. Fabric

Набор React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², написанных Π½Π° Typescript, для создания ΠΎΠΏΡ‹Ρ‚Π° Office ΠΈ Office 365. Π‘ΠΎ своими 2,5 тыс. Π·Π²Π΅Π·Π΄ ΠΎΠ½ заслуТиваСт вашСго внимания (быстрый старт).

17. Carbon Components

React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ систСмС проСктирования Carbon ΠΎΡ‚ IBM. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… ΠΎΠ½Π»Π°ΠΉΠ½ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CodeSandBox.

18. Khan React Components

React UI ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Khan academy, Π²Ρ‹ΠΏΡƒΡ‰Π΅Π½Π½Ρ‹Π΅ для сообщСства ΠΈ Π½Π°Π±Ρ€Π°Π²ΡˆΠΈΠ΅ ΠΏΠΎΡ‡Ρ‚ΠΈ тысячу Π·Π²Π΅Π·Π΄ Π½Π° GitHub.

19. Gestalt by Pinterest

Данная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° являСтся Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Π½Π½Ρ‹ΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² React UI ΠΎΡ‚ студии Π΄ΠΈΠ·Π°ΠΉΠ½Π° Pinterest. Π­Ρ‚ΠΈ Π±Π»ΠΎΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌΠΈ Pinterest для синхронизации ΠΈ ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ стандартов качСства.

20. Material Components Web

Разработанная ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€ΠΎΠ² ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² Google, эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Π·Π°ΠΌΠ΅Π½ΠΈΠ»Π° react-mdl ΠΈ ΡƒΠΆΠ΅ Π½Π°Π±Ρ€Π°Π»Π° большС 8 тыс. Π·Π²Π΅Π·Π΄. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π½Π° Π½Π΅Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.

21. React MD

прСкрасный ΠΈ Π½Π°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹ΠΉ Π½Π°Π±ΠΎΡ€ для создания Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Google ΠΈ настраиваСмыми Ρ‚Π΅ΠΌΠ°ΠΌΠΈ ΠΈ стилями (Sass).

22. React Foundation

ВстраиваСмыС части ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Foundation, Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ Π² Π²ΠΈΠ΄Π΅ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². ΠžΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ простотой ΠΈ большим ΠΎΡ…Π²Π°Ρ‚ΠΎΠΌ.

23. React Virtualized

Π‘Π»ΠΈΠ·ΠΊΠΈΠΉ ΠΊ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²Ρƒ Π½Π°Π±ΠΎΡ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React для Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΎΠ±ΡŠΠ΅ΠΌΠ½Ρ‹Ρ… Π½Π°Π±ΠΎΡ€ΠΎΠ² Π΄Π°Π½Π½Ρ‹Ρ…. ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ Π½Π°Π±Ρ€Π°Π» ΠΏΠΎΡ‡Ρ‚ΠΈ 10 тысяч Π·Π²Π΅Π·Π΄, Ρ‡Ρ‚ΠΎ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ ΠΎ Π΅Π³ΠΎ популярности ΠΈ полСзности.

+5 – Π² качСствС бонуса

К соТалСнию, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΈΠ· Π½ΠΈΡ… Π½Π΅ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ. Но всС Ρ€Π°Π²Π½ΠΎ стоит Π½Π° Π½ΠΈΡ… Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ.

* React UWP

UWP-Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΡ‚ Microsoft с использованиСм React.

* Amaze UI React

React-рСализация популярного китайского кросс-ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° Amaze-UI.

* UXCore

React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ для ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… сСрвСрных ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π΄Π°Π½Π½Ρ‹Ρ….

* Zent

ΠŸΡ€Π΅ΠΊΡ€Π°ΡΠ½Π°Ρ нСзамСтная китайская React UI Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°.

* Halogen

Одни Π·Π°Π³Ρ€ΡƒΠ·Ρ‡ΠΈΠΊΠΈ ΠΈ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ списки.

НС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ?

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Ρ†Π΅Π»Ρ‹Ρ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΡΠ³ΠΎΡ‰Π°Ρ‚ΡŒ ΠΈ ΡƒΡΠ»ΠΎΠΆΠ½ΡΡ‚ΡŒ внСсСниС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π½Π° Π»Π΅Ρ‚Ρƒ. ΠžΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π² Awesome React ΠΈ Awesome React components, Π° Ρ‚Π°ΠΊΠΆΠ΅ здСсь.

НадССмся, Π²Π°ΠΌ понравился наш список!

Бписок Π»ΡƒΡ‡ΡˆΠΈΡ… CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² для Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ

ΠœΠ΅Ρ‡Ρ‚Π°Π΅Ρ‚Π΅ быстро ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ? УпроститС сСбС Π·Π°Π΄Π°Ρ‡Ρƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этих CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ². И Π½Π΅ придётся бСспокоится ΠΎ стилях.

Π—Π°Ρ‡Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ ΠΏΡ€ΠΈ написании ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ CSS-ΠΊΠΎΠ΄Π°? ВрСмя – ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ рСсурс, поэтому Ρ‚Ρ€Π°Ρ‚ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π½Π° созданиС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Π£Π»ΡƒΡ‡ΡˆΠΈΡ‚Π΅ Π»ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ эстСтику, ΠΊΠΎΠ³Π΄Π° создадитС CSS с нуля? ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ! Но ΠΊΠΎΠ³Π΄Π° Π½Π΅Ρ‚ творчСских способностСй Π² области Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈ ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹ с CSS, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, эффСктивнСС ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ эту Ρ€Π°Π±ΠΎΡ‚Ρƒ профСссионалу.

Или ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΡ‚ΠΎΠΉ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для создания клиСнтского интСрфСйса. Π’ΠΎΡ‚ ΠΏΠΎΠ»Π½Ρ‹ΠΉ список самых Π·Π½Π°ΠΌΠ΅Π½ΠΈΡ‚Ρ‹Ρ… ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ².

Ant Design

НазначСниС: Β«Ant Design ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ созданиС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² для всСх участников ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π’Π΅ΠΌ самым ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ²Β». – Π²Π΅Π±-страница Ant Design.

Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ, сдСланная с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ant Design

Ant Design, язык Π΄ΠΈΠ·Π°ΠΉΠ½Π° для Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΡƒΠ΅Ρ‚ ΠΊΠΎΠΌΠ°Π½Π΄Π° Ant UED. Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΠΈ стрСмятся ΠΊ ΡƒΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ спСцификаций UI для Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², сниТСнию Π·Π°Ρ‚Ρ€Π°Ρ‚ Π½Π° различия Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈ Π²Ρ‹ΡΠ²ΠΎΠ±ΠΎΠΆΠ΄Π΅Π½ΠΈΡŽ рСсурсов, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π·Π°Ρ‚Ρ€Π°Ρ‡ΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… Π½Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ внСшнюю Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ.

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ

  • Π―Π·Ρ‹ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… классов для Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.
  • Набор высококачСствСнных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ.
  • Написан Π½Π° TypeScript с Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΌΠΈ Ρ‚ΠΈΠΏΠ°ΠΌΠΈ.
  • ΠŸΠΎΠ»Π½Ρ‹ΠΉ ΠΏΠ°ΠΊΠ΅Ρ‚ рСсурсов ΠΈ инструмСнтов для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° срСды

  • Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΈ Internet Explorer 9+ (с polyfills).
  • Π Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π½Π° сторонС сСрвСра.
  • Electron.

Foundation

НазначСниС: Β«Foundation – сСмСйство ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹Ρ… Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ². УскоряСт ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΎΡ‚ прототипирования ΠΊ производству. Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ сайты ΠΈΠ»ΠΈ прилоТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° любом устройствС, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Foundation. Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Π΅ΠΌΡƒΡŽ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΡƒΡŽ сСтку, Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Sass примСсСй, часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ JavaScript ΠΈ ΠΏΠΎΠ»Π½ΡƒΡŽ Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈΒ». – с Π²Π΅Π±-страницы Foundation.

Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ, сдСланная с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Foundation Выпуски Foundation

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ

  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π²Π΅Π±-Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ.
  • Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ для простоты.
  • Π“ΠΈΠ±ΠΊΠΈΠΉ Sass.
  • Π‘Ρ‚Π°Ρ€Ρ‚ΠΎΠ²Ρ‹Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ ZURB.

Bulma

НазначСниС: Bulma – CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ. По этой ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ Π½Π° Π²Ρ‹Ρ…ΠΎΠ΄Π΅ СдинствСнный Ρ„Π°ΠΉΠ» CSS: bulma.css.

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Bulma

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ прСдставлСнный Π²Ρ‹ΡˆΠ΅ Ρ„Π°ΠΉΠ» ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ ΠΈΠ»ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ исходныС Ρ„Π°ΠΉΠ»Ρ‹ Sass для настройки ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ….

JavaScript здСсь Π½Π΅ прилагаСтся. Π›ΡŽΠ΄ΠΈ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, стрСмятся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ JS (ΠΈ ΡƒΠΆΠ΅ написали Ρ‚Π°ΠΊΡƒΡŽ). Bulma Π½Π΅ зависит ΠΎΡ‚ срСды: это слой стиля ΠΏΠΎΠ²Π΅Ρ€Ρ… Π»ΠΎΠ³ΠΈΠΊΠΈ.

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ

  • Благодаря использованию послСдних Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ CSS3, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Flexbox, ΠΈ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ использования CSS ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… ΠΈ CSS Grid, Bulma – ΡƒΠ»ΡŒΡ‚Ρ€Π°ΡΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Π°Ρ тСхнология Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.
  • ΠŸΡ€ΠΎΡΡ‚Π°Ρ систСма сСтки: Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сСтку Bulma, Π½ΡƒΠΆΠ΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ .columns, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΎΠ±ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ элСмСнтов .column, сколько Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.
  • Π›Ρ‘Π³ΠΊΠΈΠΉ Π² ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠΈ синтаксис: с ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΠΌΠΈ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΌΠΈ ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ классов (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, .button ΠΈΠ»ΠΈ .title) ΠΈ понятными ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°ΠΌΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, .is-primary ΠΈΠ»ΠΈ .is-large) Π»Π΅Π³ΠΊΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с Bulma Π·Π° считаныС ΠΌΠΈΠ½ΡƒΡ‚Ρ‹.
  • 100+ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… CSS Ρ…Π΅Π»ΠΏΠ΅Ρ€ΠΎΠ².
  • МногоС Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

Spectre.css

Богласно Π²Π΅Π±-сайту, Spectre.css – Β«Π»Ρ‘Π³ΠΊΠΈΠΉ, ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ ΠΈ соврСмСнный CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для ускорСнной ΠΈ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΠΎΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. Spectre прСдоставляСт Π±Π°Π·ΠΎΠ²Ρ‹Π΅ стили для ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ оформлСния ΠΈ элСмСнтов, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΡƒΡŽ систСму ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π½Π° основС Flexbox, Π° Ρ‚Π°ΠΊΠΆΠ΅ чистыС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Ρ‹ CSSΒ».

spectre.css

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ

  • Π›Ρ‘Π³ΠΊΠΈΠΉ (~ 10 ΠšΠ‘ Π² сТатом Π²ΠΈΠ΄Π΅).
  • ЭстСтичСски приятныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈ цвСтовая ΠΏΠ°Π»ΠΈΡ‚Ρ€Π°.
  • Π˜Π½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный синтаксис.
  • Π“ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ: JS Π½Π΅ трСбуСтся.

Tailwind CSS

НазначСниС: Β«Tailwind CSS – Ρ‚ΠΎΠ½ΠΊΠΎ настраиваСмый Π½ΠΈΠ·ΠΊΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдоставляСт всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ для создания пСрсонализированного Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π±Π΅Π· лишнСй Π±ΠΎΡ€ΡŒΠ±Ρ‹ с ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΡ… встроСнных стилСй». – с Π²Π΅Π±-страницы Tailwind CSS.

Π‘Π½ΠΈΠΌΠΎΠΊ экрана домашнСй страницы Tailwind CSS

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ

  • ΠžΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ.
  • Π Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ.
  • НастраиваСмый.

Shoelace

НазначСниС: Β«Shoelace.css – лёгкая, прогрСссивная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° CSS, созданная с использованиСм синтаксиса Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ CSS. ΠŸΡ€ΠΎΡΡ‚Π°Ρ Π² использовании ΠΈ настраиваСмая. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Bootstrap эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° покаТСтся Π·Π½Π°ΠΊΠΎΠΌΠΎΠΉ, Π½ΠΎ ΠΎΡΠ²Π΅ΠΆΠ°ΡŽΡ‰Π΅ΠΉ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Shoelace практичСски с Π»ΡŽΠ±Ρ‹ΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ. ВСрсия CDN ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², Π½ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ всСми прСимущСствами, придётся ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ Shoelace ΠΈΠ· исходного ΠΊΠΎΠ΄Π°Β». – с Π²Π΅Π±-страницы Shoelace.

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Shoelace

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ

  • ЛСгковСсная ~ 69 ΠšΠ‘.
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ CSS ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ CSS.
  • ΠŸΡ€ΠΎΡΡ‚Π° Π² использовании ΠΈ настраиваСмая.

Semantic UI

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Semantic UI

НазначСниС: Β«Semantic UI рассматриваСт слова ΠΈ классы ΠΊΠ°ΠΊ взаимозамСняСмыС понятия. ΠšΠ»Π°ΡΡΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ синтаксис ΠΈΠ· СстСствСнных языков: ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅-ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅, порядок слов ΠΈ ΠΌΠ½ΠΎΠΆΠ΅ΡΡ‚Π²Π΅Π½Π½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ ΡΠ²ΡΠ·Π°Ρ‚ΡŒ понятия. ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ Ρ‚Π΅ ΠΆΠ΅ прСимущСства, Ρ‡Ρ‚ΠΎ ΠΈ BEM ΠΈΠ»ΠΈ SMACSS, Π½ΠΎ Π±Π΅Π· ΡƒΡ‚ΠΎΠΌΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈΒ». – с Π²Π΅Π±-страницы Semantic UI.

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ

  • ΠšΡ€Π°Ρ‚ΠΊΠΈΠΉ HTML со взаимозамСняСмыми словами ΠΈ классами.
<div>
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
  • Упрощённая ΠΎΡ‚Π»Π°Π΄ΠΊΠ°.

ΠžΡ‚Π»Π°Π΄ΠΊΠ° CSS с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Semantic UI

  • ВСматичСскоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅.

Skeleton

НазначСниС: Β«Skeleton стилизуСт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Π°ΡΡ‚ΡŒ стандартных элСмСнтов HTML ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя сСтку, Π½ΠΎ этого часто прСдостаточно для Π½Π°Ρ‡Π°Π»Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Skeleton, Ссли приступаСтС ΠΊ ΠΌΠ΅Π½ΡŒΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ ΠΈΠ»ΠΈ просто чувствуСтС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹ всС полСзности Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ²Β». – с Π²Π΅Π±-страницы Skeleton.

Π‘ΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ с сайта Skeleton

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ

  • Π›Ρ‘Π³ΠΊΠΈΠΉ ΠΊΠ°ΠΊ ΠΏΡ‘Ρ€Ρ‹ΡˆΠΊΠΎ ~ 400 строк.
  • Π‘ΠΎΠ·Π΄Π°Π½ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.
  • Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹Π΅ стили – отправная Ρ‚ΠΎΡ‡ΠΊΠ°, Π° Π½Π΅ основа ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.
  • Быстрый запуск, Π±Π΅Π· нСобходимости компиляции ΠΈΠ»ΠΈ установки.

Π’Ρ‹ ΠΏΠΎΠ»ΡŽΠ±ΠΈΡ‚Π΅ Skeleton Π·Π° ускорСниС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈ Π»Ρ‘Π³ΠΊΠΎΡΡ‚ΡŒ настройки.

Tachyons

НазначСниС: Β«Tachyons – систСма Π΄ΠΈΠ·Π°ΠΉΠ½Π° для Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ CSS ΠΈ людСй. Быстро создавайтС ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс Π±Π΅Π· написания CSSΒ». – со страницы GitHub Tachyons.

Tachyons

«БистСмы проСктирования Π»ΠΎΠΌΠ°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ (Π»ΠΈΠ±ΠΎ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ, Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°), ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ вводятся Π½ΠΎΠ²Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈΠ»ΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Π’Π°ΠΊΠΈΠ΅ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΠΈΠ½ΠΎΠ³Π΄Π° – Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅: часто – ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π½Π΅Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ, ΠΊΠΎΠ³Π΄Π° этот ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈΠ»ΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ (ΠΈ создаётся) снова. Π”Π°ΠΆΠ΅ ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π·Π°Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ, Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ этой ΠΏΡ€ΠΎΡ†Π΅Π΄ΡƒΡ€Ρ‹ часто ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ дСсятки ΠΈΠ»ΠΈ сотни экзСмпляров для описания всСх состояний Π»ΠΈΠ±ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ². Π’Π°ΠΊΠΈΠ΅ систСмы, ΠΊΠ°ΠΊ Tachyons ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅, ΠΈΠ½Π°Ρ‡Π΅ подходят ΠΊ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅: вмСсто этого Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ ΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ *свойства* ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². (ΠŸΡ€ΠΈΡΡ‚Π½ΠΎ Π΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎΠ± этом ΠΊΠ°ΠΊ ΠΎ «субатомном» Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.)

Π—Π°Ρ‚Π΅ΠΌ Π²Ρ‹ создаётС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΡƒΡ‚Ρ‘ΠΌ составлСния субатомных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² (свойств). ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈ Π΅Π³ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹, Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ ΠΏΠΎΠ»Π½Ρ‹ΠΉ список субатомных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Β«ΠΈΠ½Π³Ρ€Π΅Π΄ΠΈΠ΅Π½Ρ‚Π°Β». Π­Ρ‚ΠΈ субатомныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ΡΡ тысячами способов для создания сотСн ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Бвойства этих ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² многочислСнны, Π½ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½Π°Π±ΠΎΡ€ΠΎΠΌ допустимых Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ (наши субатомныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹)Β». – Π”Π°Π½ΠΈΡΠ»ΡŒ ИдСн, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Facebook.

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ

  • CSS-Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.
  • 490 доступных Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΉ.
  • ΠœΠ½ΠΎΠ³ΠΎΡ‡ΠΈΡΠ»Π΅Π½Π½Ρ‹Π΅ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Ρ‹ ΠΎΡ‚Π»Π°Π΄ΠΊΠΈ для ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ слоТности ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ.
  • Π›Ρ‘Π³ΠΊΠΈΠΉ (~ 14 ΠšΠ‘).
  • Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ.
  • ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΎΠ±Ρ‹ΠΊΠ½ΠΎΠ²Π΅Π½Π½Ρ‹ΠΌ HTML, React, Ember, Angular, Rails ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ.
  • Адаптивная систСма сСтки с бСсконСчной Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡ‚ΡŒΡŽ.
  • Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ PostCSS.

Material Design

НазначСниС: Β«Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ ΠΈ спроСктированный Google, Material Design – Π΄ΠΈΠ·Π°ΠΉΠ½-систСма, которая сочСтаСт классичСскиС ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ эффСктивного Π΄ΠΈΠ·Π°ΠΉΠ½Π° вмСстС с инновациями ΠΈ тСхнологиями. ЦСль Google состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ систСму Π΄ΠΈΠ·Π°ΠΉΠ½Π°, которая прСдоставляСт Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ взаимодСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ со всСми ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°ΠΌΠΈ Π½Π° любой ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Β». – с Π²Π΅Π±-страницы Material Design.

Π‘Π½ΠΈΠΌΠΎΠΊ экрана домашнСй страницы Material Design

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ

  • Π¨ΠΈΡ€ΠΎΠΊΠΎ поддСрТиваСтся.
  • Π‘Ρ‚Π°Ρ€Ρ‚ΠΎΠ²Ρ‹Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹.
  • Бторонняя ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°.

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ этот список CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ²? Π”Π°ΠΉΡ‚Π΅ Π·Π½Π°Ρ‚ΡŒ!

ΠΊΠ°ΠΊ ΠΈ Π·Π°Ρ‡Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ / Π‘Π»ΠΎΠ³ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ EPAM / Π₯Π°Π±Ρ€

Π”Π°Π²Π½Ρ‹ΠΌ-Π΄Π°Π²Π½ΠΎ, Π² Π΄Π°Π»Π΅ΠΊΠΎΠΉ-Π΄Π°Π»Π΅ΠΊΠΎΠΉ Π³Π°Π»Π°ΠΊΡ‚ΠΈΠΊΠ΅ ΠΆΠΈΠ»ΠΈ тСстировщики. Они тСстировали всС, Ρ‡Ρ‚ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ, ΠΈ Π½Π° это ΡƒΡ…ΠΎΠ΄ΠΈΠ»ΠΎ Π½Π΅ΠΌΠ°Π»ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. ΠŸΡ€ΠΈΡˆΠ»Π° эра Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ тСстирования, Π° вмСстС с Π½Π΅ΠΉ β€” Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ. МногиС Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ тСстировщиков эффСктивнСС ΠΈ ΠΏΡ€ΠΎΡ‰Π΅ ΡƒΠΆΠ΅ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. Но Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ JDI Ρ‚Π°ΠΊ Π½Π΅ Π΄ΡƒΠΌΠ°Π»ΠΈ.

Π—Π°Ρ‡Π΅ΠΌ создали JDI, ΠΊΠΎΠ³Π΄Π° ΠΈ Ρ‚Π°ΠΊ Π΅ΡΡ‚ΡŒ нСсколько Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² для тСстирования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов? Π§Π΅ΠΌ ΠΎΠ½ отличаСтся ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΈ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ?

Π˜Π½ΠΆΠ΅Π½Π΅Ρ€Ρ‹ ΠΏΠΎ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌΡƒ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ Π•Π ΠΠœ, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ JDI β€” Π ΠΎΠΌΠ°Π½ ИовлСв ΠΈ АлСксСй Π“ΠΈΡ€ΠΈΠ½ β€” ΠΎΡ‚Π²Π΅Ρ‚ΠΈΠ»ΠΈ Π½Π° вопросы ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌ Π·Π°Π΄Π°ΡŽΡ‚ Ρ‡Π°Ρ‰Π΅ всСго.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ JDI?

JDI β€” это Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для UI-тСстирования. НазваниС Ρ€Π°ΡΡˆΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚ΡΡ ΠΊΠ°ΠΊ Just do it: главная идСя JDI β€” Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅Π³ΠΎ Π±Ρ‹Π»ΠΎ Π»Π΅Π³ΠΊΠΎ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ тСсты. Π­Ρ‚ΠΎ опСнсорсный Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ с GitHub ΠΈΠ»ΠΈ с сайта JDI. JDI ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Java ΠΈ C#. БСйчас ΠΌΡ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ Π½Π°Π΄ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ Python.

Π—Π°Ρ‡Π΅ΠΌ создали JDI?

Π’ Π•Π ΠΠœ постоянно приходят Π½ΠΎΠ²Ρ‹Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹, ΠΈ тСстировщикам Π½ΡƒΠΆΠ½ΠΎ Π³ΠΎΡ‚ΠΎΠ²ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ позволяСт быстро ΠΏΠΈΡΠ°Ρ‚ΡŒ тСсты, Π»ΠΎΠ³ΠΈΡ€ΡƒΠ΅Ρ‚ всС дСйствия Π½Π° понятном ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ языкС ΠΈ создаСт наглядныС ΠΎΡ‚Ρ‡Π΅Ρ‚Ρ‹. Π˜ΠΌΠ΅ΡŽΡ‰ΠΈΡ…ΡΡ инструмСнтов для тСстирования UI Π½Π°ΠΌ Π±Ρ‹Π»ΠΎ нСдостаточно для эффСктивной Ρ€Π°Π±ΠΎΡ‚Ρ‹. Π’ Selenium Π»ΠΎΠ³ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½ΠΈΠ·ΠΊΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅, ΠΈ Π½Π΅Ρ‚ Ρ‚ΠΈΠΏΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… элСмСнтов. Π’ HTML Elements ΠΎΡ‚ «ЯндСкса» ΠΎΠ½ΠΈ Π΅ΡΡ‚ΡŒ, Π½ΠΎ этот Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Π·Π°Ρ‚ΠΎΡ‡Π΅Π½ ΠΏΠΎΠ΄ вСрстку HTML-страниц. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ½ Π΄Π°Π²Π½ΠΎ Π½Π΅ обновлялся. ΠœΡ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅Π΅, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π° Ρ€Ρ‹Π½ΠΊΠ΅, Π² ΠΎΠ΄ΠΈΠ½ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ. JDI Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Π½Π°Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ пригодятся Π²Π΅Π·Π΄Π΅, Π³Π΄Π΅ Π½ΡƒΠΆΠ½ΠΎ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ UI. Π’ Ρ‚ΠΎΠΌ числС, Ссли Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах ΠΈ дСсктоп-прилоТСниях.

Но вСдь Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² ΠΌΠ½ΠΎΠ³ΠΎ. Π§Π΅ΠΌ JDI отличаСтся ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ…?

Нас часто ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅: JDI ΠΈΠ»ΠΈ Selenide, JDI ΠΈΠ»ΠΈ Cucumber? Π‘Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ: ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Ρƒ. Selenium ΠΈΠ»ΠΈ Selenide – это, скорСС, Π΄Ρ€Π°ΠΉΠ²Π΅Ρ€Ρ‹ для JDI, ΠΎΠ½ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ с Π½ΠΈΠΌ ΡΠΎΡ‡Π΅Ρ‚Π°ΡŽΡ‚ΡΡ, Π° Π½Π΅ ΠΊΠΎΠ½ΠΊΡƒΡ€ΠΈΡ€ΡƒΡŽΡ‚. Но ΠΎΠ½ΠΈ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ с Ρ‚ΠΈΠΏΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ элСмСнтами β€” Ρ‚Π΅ΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΌ абстракции, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΅ΡΡ‚ΡŒ Π² JDI. Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ Π²Ρ€ΠΎΠ΄Π΅ Cucumber, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΡŽΡ‚ BDD, находятся, Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚, Π²Ρ‹ΡˆΠ΅ JDI ΠΏΠΎ этой шкалС ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ слой абстракции. ΠœΡ‹, кстати, совСтуСм вмСстС с JDI ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ слои BDD ΠΈ CI.

JDI – это такая прослойка, которая позволяСт ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Page Objects ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Ρ‚ΠΈΠΏΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ элСмСнтами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²ΠΈΠ΄Π½Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ: ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ, Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ, Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ, Π΄Ρ€ΠΎΠΏΠ΄Π°ΡƒΠ½Π°ΠΌΠΈ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Когда Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ Ρ‚ΠΈΠΏΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… элСмСнтах, имССтся Π² Π²ΠΈΠ΄Ρƒ прСдставлСниС ΠΎΠ± элСмСнтС. НапримСр, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΈ Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° ΡƒΠΌΠ΅Ρ‚ΡŒ, Π²Π½Π΅ зависимости ΠΎΡ‚ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ UI. Кнопка ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π² Π²Π΅Π±Π΅ ΠΈΠ»ΠΈ Π² мобильном ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, вСрстка ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Π½ΠΎΠΉ, это ΡƒΠΆΠ΅ вопрос ΠΈΠΌΠΏΠ»Π΅ΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ. Π“Π»Π°Π²Π½ΠΎΠ΅ – Π΅ΡΡ‚ΡŒ идСя ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅: Π΅Π΅ нСльзя ΡΠΏΡƒΡ‚Π°Ρ‚ΡŒ с Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ ΠΈΠ»ΠΈ Π΄Ρ€ΠΎΠΏΠ΄Π°ΡƒΠ½ΠΎΠΌ.

ΠŸΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с JDI Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Π½ΠΈΠ·ΠΊΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Π΅ дСйствия Π²Ρ€ΠΎΠ΄Π΅ поиска Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅, заполнСния Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈΠ»ΠΈ Π²Ρ‹Π±ΠΎΡ€Π° Ρ‡Π΅Π³ΠΎ-Ρ‚ΠΎ Π² мСню: это ΡƒΠΆΠ΅ Π·Π°Π»ΠΎΠΆΠ΅Π½ΠΎ Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ΅. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ JDI Π΄Π΅Π»Π°ΡŽΡ‚ Ρ€ΠΎΠ²Π½ΠΎ Ρ‚ΠΎ, Ρ‡Π΅Π³ΠΎ ΠΎΡ‚ Π½ΠΈΡ… ΠΎΠΆΠΈΠ΄Π°ΡŽΡ‚: Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ, Π½ΠΎ тСкст Π½Π° Π½Π΅ΠΉ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ нСльзя.

ΠŸΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с JDI Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅ дСйствия, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ связаны с ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ бизнСсом, Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠΎΠΌ. НапримСр, Β«ΠΊΡƒΠΏΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Β». Π’ΠΈΠΏΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты Π½Π΅ Π·Π½Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Β«ΠΊΡƒΠΏΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Β», ΠΈ это Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Π½Π° UI-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°Ρ….

Как ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ элСмСнты? ΠŸΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π°Π½Π½ΠΎΡ‚Π°Ρ†ΠΈΠΈ FindBy, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π² Selenium, ΠΈΠ»ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JFindBy, Ρ‡Ρ‚ΠΎ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ возмоТности: ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΊΠ°Ρ‚ΡŒ ΠΏΠΎ тСксту, ΠΏΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ (value), ΠΏΠΎ Ρ‚ΠΈΠΏΡƒ (type). МоТно ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ элСмСнты ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ конструкторов ΠΈΠ»ΠΈ интСрфСйсов. ПослСдний способ Π΄Π°Π΅Ρ‚ ряд прСимущСств. НапримСр, ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΠΌΠΏΠ»Π΅ΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ вмСсто мобильной ΠΊΠ½ΠΎΠΏΠΊΡƒ для Π²Π΅Π±Π°, ΠΈ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ для Π²Π΅Π±Π° тСсты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ писали для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств. ВСстировщику Π½Π΅ придСтся ΠΌΠ΅Π½ΡΡ‚ΡŒ Page Objects ΠΈ тСстовый сцСнарий, Ссли Π½Π΅ помСнялась Π»ΠΎΠ³ΠΈΠΊΠ°. Π­Ρ‚ΠΎ Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ JDI ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² – ΠΎΠ½ Π½Π΅ привязан ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ вСрсткС. Π­Ρ‚ΠΎ Ρ‚ΠΎ, Ρ‡Π΅Π³ΠΎ Π½Π°ΠΌ Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π»ΠΎ Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ΅ HTML Elements ΠΎΡ‚ «ЯндСкса». Π’Π°ΠΌ Ρ‚ΠΎΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‚ΠΈΠΏΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты, Π½ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π° вСрстку HTML-страниц.

Π Π°Π±ΠΎΡ‚Π° с простыми Ρ‚ΠΈΠΏΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ элСмСнтами – ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ, тСкстом – позволяСт ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ тСсты Π±ΠΎΠ»Π΅Π΅ наглядными. А Ρ€Π°Π±ΠΎΡ‚Π° со слоТными элСмСнтами – Π΄Ρ€ΠΎΠΏΠ΄Π°ΡƒΠ½Π°ΠΌΠΈ, Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ, Ρ‡Π΅ΠΊ-листами – Π΄Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ количСство ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ тСстировщику. НСобходимая информация ΠΎΠ± элСмСнтС (Π»ΠΎΠΊΠ°Ρ‚ΠΎΡ€Ρ‹, ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹) располоТСна Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС, ΠΈ Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄ ΠΏΡ€ΠΎΡ‰Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π² JDI ΡƒΠΆΠ΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π»ΠΎΠ³ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ настроСна интСграция с Ρ€Π΅ΠΏΠΎΡ€Ρ‚ΠΈΠ½Π³ΠΎΠ²Ρ‹ΠΌΠΈ систСмами, Ρ‡Ρ‚ΠΎ Π΅Ρ‰Π΅ большС ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Ρ‚Π°ΠΊΠΈΡ… тСстов.

Как Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с JDI?

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ, JDI Π½ΡƒΠΆΠ½ΠΎ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ с GitHub ΠΈΠ»ΠΈ с сайта. Π’Ρ‹ скачиваСтС Π°Ρ€Ρ…ΠΈΠ², Π³Π΄Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ ΡƒΠΆΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ настроСн: Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π΄ΡƒΠΌΠ°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π΄Ρ€Π°ΠΉΠ²Π΅Ρ€, Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π»ΠΎΠ³ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ Ρ€Π΅ΠΏΠΎΡ€Ρ‚ΠΈΠ½Π³. Если Π²Ρ‹ сами Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ JDI ΠΊΠ°ΠΊ dependency ΠΊ Π½Π΅ΠΌΡƒ.

Π’ качСствС Π΄Π²ΠΈΠΆΠΊΠ° JDI ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Selenium. Но Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π΄Π²ΠΈΠΆΠΎΠΊ (Π΄Π°ΠΆΠ΅ свой собствСнный), это Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ.

Π‘Π»ΠΎΠΆΠ½ΠΎ Π»ΠΈ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с JDI?

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΏΠΈΡΠ°Ρ‚ΡŒ тСсты Π½Π° JDI, достаточно ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ наши ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΅ΡΡ‚ΡŒ Π½Π° GitHub. МоТно ΠΏΡ€ΠΈΠΉΡ‚ΠΈ Π½Π° курсы ΠΏΠΎ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·Π°Ρ†ΠΈΠΈ тСстирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π•Π ΠΠœ ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ Π² ΠŸΠ΅Ρ‚Π΅Ρ€Π±ΡƒΡ€Π³Π΅. На Π½ΠΈΡ… ΠΌΡ‹ ΡƒΡ‡ΠΈΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Ρ‚ΠΎΠΌ числС с JDI, Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ ΠΎΡΠ²Π°ΠΈΠ²Π°ΡŽΡ‚ Π΄Π°ΠΆΠ΅ студСнты.

Иногда тСстировщики хотят Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π² JDI, Π½Π΅ подозрСвая, Ρ‡Ρ‚ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠ½ устроСн слоТнСС, Ρ‡Π΅ΠΌ снаруТи. Π Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π²ΠΎ «внутрСнностях» Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° смогут Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ уровня Senior.

ΠŸΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π»ΠΈ тСстировщики JDI?

JDI использовали ΡƒΠΆΠ΅ Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ Π² 50 ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… Π² Π•Π ΠΠœ, ΠΈ Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… дСсятках ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π²Π½Π΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ.

Как Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ JDI?

Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ находится Π² ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠΌ доступС ΠΎΠΊΠΎΠ»ΠΎ пяти Π»Π΅Ρ‚, всС это врСмя Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ устраняли Π½Π΅Π΄ΠΎΡ‡Π΅Ρ‚Ρ‹ ΠΈ добавляли Π½ΠΎΠ²Ρ‹Π΅ возмоТности. БСйчас Ρƒ JDI Π΅ΡΡ‚ΡŒ ΠΎΠΊΠΎΠ»ΠΎ Π΄Π²ΡƒΡ… дСсятков Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠΎΠ½Ρ‚Ρ€ΠΈΠ±ΡŒΡŽΡ‚ΠΎΡ€ΠΎΠ².

25 июля Π² ΠŸΠ΅Ρ‚Π΅Ρ€Π±ΡƒΡ€Π³Π΅ ΠΊΠΎΠΌΠΈΡ‚Ρ‚Π΅Ρ€Ρ‹ JDI встрСтятся с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ расскаТут, ΠΊΠ°ΠΊ внСдряли JDI, с ΠΊΠ°ΠΊΠΈΠΌΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°Π»ΠΈΡΡŒ ΠΈ ΠΊΠ°ΠΊ ΠΈΡ… Ρ€Π΅ΡˆΠ°Π»ΠΈ.

Если Π²Π°ΠΌ интСрСсно ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ, Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ здСсь ΠΈ слСдитС Π·Π° новостями Π² Π³Ρ€ΡƒΠΏΠΏΠ΅ JDI Π’ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅.

На Selenium Camp Π ΠΎΠΌΠ°Π½ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ рассказал, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ JDI. Π’ΠΎΡ‚ Π²ΠΈΠ΄Π΅ΠΎ Π΅Π³ΠΎ выступлСния:

21 бСсплатный CSS3-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ

Π‘Π°ΠΌΠ° ΠΏΠΎ сСбС история CSS3 ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Π°. Π­Ρ‚ΠΎ ΠΎΠ΄Π½Π° ΠΈΠ· Ρ‚Π΅Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π°ΡŽΡ‚ Π½Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ структуры Π‘Π΅Ρ‚ΠΈ. ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π±Ρ‹Π»ΠΈ Π²Π²Π΅Π΄Π΅Π½Ρ‹ Ρ‚Π°ΠΊΠΈΠ΅ Π²Π΅Ρ‰ΠΈ, ΠΊΠ°ΠΊ ΠΌΠ΅Π΄ΠΈΠ°-запросы. Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»Π³ΠΎ сущСствуСт Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½, CSS framework ΠΈ ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ Π±Ρ‹Π»ΠΎ достигнуто Π·Π° Ρ‚Π°ΠΊΠΎΠ΅ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠ΅ врСмя.

БообщСства, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ CodePen, ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΈ просто ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ энтузиастам Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ всС возмоТности CSS3. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ дСнь сотни Π½ΠΎΠ²Ρ‹Ρ… ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ‚ΠΎΠ² Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ Π½Π° CodePen, ΠΈ участники сообщСства ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² собствСнных ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ….

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, Π±Π΅Π· Π΄Π°Π»ΡŒΠ½Π΅ΠΉΡˆΠΈΡ… прСдисловий, Π½Π°Ρ‡Π½Π΅ΠΌ наш ΠΎΠ±Π·ΠΎΡ€ Π»ΡƒΡ‡ΡˆΠΈΡ… CSS3-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ², доступных Π½Π° сСгодняшний дСнь.

Material Design β€” это способ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ сообщСству, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ красивых ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, Π½Π΅ затрачивая ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Π° примСняя Π½Π°ΡƒΡ‡Π½ΠΎ обоснованныС ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ Π² простой ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Material Design ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Ρ‚Π°Π΅Ρ‚ всС Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ с Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΊΠ°ΠΊ Google сдСлал спСцификации общСдоступными. Π‘ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° Π΅Π³ΠΎ появлСния ΡƒΠΆΠ΅ успСл ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ свСт Ρ†Π΅Π»Ρ‹ΠΉ ряд Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² ΠΈ руководств, Ρ†Π΅Π»ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… являСтся ΠΏΠΎΠΌΠΎΡ‰ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ / Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Π² использовании Material Design Π² своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ….

Material Framework β€” это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½Π΅ΠΌΠ½ΠΎΠ³ΠΈΡ… Material Design CSS framework, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅. Он являСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· самых простых Π² использовании. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS, поэтому Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ CSS ΠΈ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ синтаксис ΠΈ ΠΊΠ°ΠΊ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты Material Design.

Leaf β€” это Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΈ минималистичный Material Design Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ разрабатываСтся Кимом ΠšΠΎΡ€Ρ‚Π΅ β€” ΠΌΠΎΠ»ΠΎΠ΄Ρ‹ΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ ΠΈΠ· Π¨Π²Π΅Ρ†ΠΈΠΈ. Leaf Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ CSS ΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ способы ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ элСмСнтов Material Design. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Ρ€Π°Π·Π΄Π΅Π» Β«ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹Β» Π² мСню Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΎ возмоТностях Leaf большС.

Materialize являСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Ρ‚Π΅Ρ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ прСвосходят своих ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚ΠΎΠ² ΠΏΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ возмоТностям. Materialize ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ» Π±ΠΎΠ»Π΅Π΅ 15000 Π·Π²Π΅Π·Π΄ Π½Π° GitHub, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ самым популярным CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ Π½Π° основС Material Design. Команда ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° сосрСдоточила свои усилия Π½Π° Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ элСмСнтов: CSS, JavaScript, Β«ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅Β» ΠΈ Β«ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹Β». КаТдая катСгория состоит ΠΈΠ· Ρ†Π΅Π»ΠΎΠ³ΠΎ ряда ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² с описаниСм Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Material Design Π² ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… ситуациях.

Π˜Ρ… страница Π²ΠΈΡ‚Ρ€ΠΈΠ½Ρ‹ являСтся ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²ΠΎΠΏΠ»ΠΎΡ‚ΠΈΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° Π² Тизнь. Она Ρ‚Π°ΠΊΠΆΠ΅ содСрТит нСсколько Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π»ΡΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

ΠšΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΉ Material Design CSS framework, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ΅ руководство ΠΏΠΎ стилям ΠΈΠ· ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ спСцификации Material Design ΠΈ сочСтаСт Π΅Π³ΠΎ с популярной Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ ReactJS.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ вСсь ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π» Essence, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ быстрыС ΠΈ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹Π΅ интСрфСйсы ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΈ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π‘Ρ‚ΠΈΠ»ΠΈ ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Essence Π·Π°Π΄Π°ΡŽΡ‚ΡΡ ΠΎΡ‡Π΅Π½ΡŒ простым синтаксисом, Ρ‡Ρ‚ΠΎ позволяСт Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ ΡƒΠΆΠ΅ послС Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΡ… ΡƒΡ€ΠΎΠΊΠΎΠ².

Bootstrap 3 (тСкущая вСрсия, ΠΏΠΎΠΊΠ° Bootstrap 4 готовится ΠΊ Π²Ρ‹Ρ…ΠΎΠ΄Ρƒ) являСтся самым популярным Π² ΠΌΠΈΡ€Π΅ front-end Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ для создания сайтов, ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Π΅Π± ΠΈ мобильного Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π₯отя Bootstrap Π½Π΅ являСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS framework, CSS3 β€” это ΠΎΠ΄Π½Π° ΠΈΠ· основных частСй процСсса Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π½Π° Bootstrap. ΠŸΡ€ΠΈ этом Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ позволяСт ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ соврСмСнныС элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ CSS3. CSS ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Bootstrap ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ для построСния сСток, Ρ„ΠΎΡ€ΠΌ, ΠΊΠ½ΠΎΠΏΠΎΠΊ, управлСния изобраТСниями, Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ подсказок ΠΈ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

Semantic Π² послСдниС нСсколько Π»Π΅Ρ‚ стал довольно популярСн, ΠΈ сСгодня ΠΌΠΎΠΆΠ½ΠΎ часто Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ примСняСтся Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ ΠΈ инструмСнтами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ использованиС сторонних руководств ΠΏΠΎ стилям. ΠžΡΠ½ΠΎΠ²Π½Ρ‹ΠΌ прСимущСством Semantic являСтся Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΠ΅ элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ созданы с Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ: Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π·Π°Π³Ρ€ΡƒΠ·Ρ‡ΠΈΠΊΠΈ, Ρ„ΠΎΡ€ΠΌΡ‹, Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ, Ρ„ΠΎΡ€ΠΌΡ‹ ΠΎΡ‚Π·Ρ‹Π²ΠΎΠ² ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π², слоТныС ΠΌΠΎΠ΄ΡƒΠ»ΠΈ (начиная ΠΎΡ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΎΠΊΠΎΠ½ ΠΈ Π΄ΠΎ контСкстных мСню).

На сСгодняшний дСнь Foundation являСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· самых популярных front-end Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² Π½Π° ΠΏΠ»Π°Π½Π΅Ρ‚Π΅. Π­Ρ‚ΠΎΡ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ прСдоставляСт дизайнСрскиС Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π² распоряТСниС Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Ρ…ΠΎΡ‡Π΅Ρ‚ быстро ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сайт, шаблон элСктронного письма ΠΈΠ»ΠΈ Π²Π΅Π±/мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π΅Π· нСобходимости Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π½Π° ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Ρ‚Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… Π½Π°Π²Ρ‹ΠΊΠΎΠ². Foundation прост Π² освоСнии, ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΅Π³ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ справочной Π»ΠΈΡ‚Π΅Ρ€Π°Ρ‚ΡƒΡ€Ρ‹ практичСски ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ всСго Π·Π° нСсколько нСдСль Π² ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²Π΅ ΠΎΠ²Π»Π°Π΄Π΅Ρ‚ΡŒ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ.

Cascade ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ сСмантичСскиС ΠΈ нСсСмантичСскиС сСточныС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, Π±Π°Π·ΠΎΠ²Ρ‹Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹, Ρ‚Π°Π±Π»ΠΈΡ‡Π½Ρ‹Π΅ конструкции, элСмСнты Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΡƒ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. Π£Π½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ позволяСт Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²Ρ‹ΡΠΎΠΊΠΎΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π²Π΅Π±-страницы ΠΏΠΎΠ΄ старыС ΠΈ Π½ΠΎΠ²Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π±Π΅Π· нСобходимости Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ‚ΡŒΡΡ ΠΎ совмСстимости.

МногиС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ нашли этот minimal CSS framework ΠΊΡ€Π°ΠΉΠ½Π΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ благодаря Π΅Π³ΠΎ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΌΡƒ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Ρƒ ΠΊ использованию ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π² Ρ€Π°ΠΌΠΊΠ°Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ². Cascade позволяСт Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ для Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², Ρ‡Ρ‚ΠΎ Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ позволяСт ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ. Π’ этом ΠΎΠ½ ΠΏΠΎΡ…ΠΎΠΆ Π½Π° Bootstrap, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Cascade прСдоставляСт Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС контроля Π½Π°Π΄ ΠΏΠΎΡ‚ΠΎΠΊΠ°ΠΌΠΈ.

Π­Ρ‚ΠΎ минималистичный ΠΈ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΉ CSS3-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, построСнный Π½Π° Π±Π°Π·Π΅ SASS. Он собираСт Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² Π½Π΅Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ, Π½ΠΎ ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ. ВсС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΡ‹. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ CSS.

ΠœΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡ‚ΠΈΡ‡Π½Ρ‹ΠΉ CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ слуТит основой для создания чистого плоского Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ЀактичСски Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ задаСтся всСго 250 строками ΠΊΠΎΠ΄Π°, ΠΈ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΆΠ°Ρ‚ΡŒ Π² Π°Ρ€Ρ…ΠΈΠ² Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 6 Кб. Π­Ρ‚ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π²Ρ‹Π΅ шаги Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈ нуТдаСтся Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ΅, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠΆΠ½ΠΎ просто ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

Π­Ρ‚ΠΎ CSS framework, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π² качСствС основы для построСния синтаксиса ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Stylus. ΠŸΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΈ совмСстимый со всСми соврСмСнными устройствами ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ.

Π€Π°ΠΉΠ»Ρ‹ CSS ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°Π½ΡΡ‚ΡŒ довольно ΠΌΠ½ΠΎΠ³ΠΎ мСста, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Π½Π°Ρ‡ΠΈΠ½Π°Π΅ΠΌ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ стили ΠΈ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ. Но Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ², ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Π½Π° сСгодняшний дСнь Π½Π° Ρ€Ρ‹Π½ΠΊΠ΅, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹Π΅ ΠΈ минималистичныС. Sculpt являСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Ρ‚Π°ΠΊΠΈΡ… ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹Ρ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ², Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ основной ΡƒΠΏΠΎΡ€ сдСлан Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. Sculpt Π±Ρ‹Π» Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для обслуТивания Ρ‡Π΅Ρ€Π΅Π· настройку ΠΌΠ΅Π΄ΠΈΠ°-запросов ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ экрана.

Π—Π°Π΄Π°Ρ‡Π° Sculpt β€” ΠΏΠΎΠΌΠΎΡ‡ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ запросы ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ простого Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт быстро ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ сайт. Π”Π°ΠΆΠ΅ Ρ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΡΠ΅Ρ‰Π°ΡŽΡ‚ ваш сайт Ρ‡Π΅Ρ€Π΅Π· ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ.

БСмантичСски чистый ΠΊΠΎΠ΄ являСтся Π²ΠΈΠ·ΠΈΡ‚Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ Sculpt. Он Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй, ΠΏΠΎΡΡ‚Ρ€ΠΎΠ΅Π½Π½ΡƒΡŽ Π½Π° 25 пиксСльной Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ. ВсС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, Π°Π±Π·Π°Ρ†Ρ‹ ΠΈ списки ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ Π½Π° Π΅Π΅ основС.

Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для быстрой Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ сайтов, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΉ для ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ соврСмСнных Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ CSS3 LESS. Π‘Π°ΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Π½ΠΎΡ€ΠΌΠ°Π»ΠΈΠ·ΡƒΠ΅Ρ‚ HTML, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Turret приятной ΠΈ доступной. ΠžΡΠ½ΠΎΠ²Π½Ρ‹ΠΌΠΈ особСнностями Turret ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½, основанный Π½Π° ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°Ρ… минималистичного Π΄ΠΈΠ·Π°ΠΉΠ½Π°, HTML5. А Ρ‚Π°ΠΊΠΆΠ΅ общая сСмантичСская Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°, которая ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π±Π΅Π· особых слоТностСй ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ HTML5 Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.

Π­Ρ‚ΠΎ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΉ CSS grid framework, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдоставляСт доступ ΠΊ Π±ΠΎΠ»ΡŒΡˆΠΎΠΌΡƒ количСству Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. Concise построСн Π½Π° основС ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠ² ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎ-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ CSS с сохранСниСм сСмантики. Π­Ρ‚ΠΎ обСспСчиваСт простоту изучСния Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°, Π° Ρ‚Π°ΠΊΠΆΠ΅ высокий ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ гибкости. Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ характСризуСтся простотой срСды Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, которая Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ добавлСния стилСй. Π’Π°ΠΊΠΆΠ΅ доступны Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ Π² качСствС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² для Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ². ΠŸΡ€ΠΈ написании ΠΊΠΎΠ΄Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ SASS.

ПослС Π²Ρ‹Ρ…ΠΎΠ΄Π° обновлСния всС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ ядра. ΠŸΡ€ΠΈ этом Ρ€Π°Π½Π΅Π΅ созданныС стили ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π½Π΅Ρ‚Ρ€ΠΎΠ½ΡƒΡ‚Ρ‹ΠΌΠΈ. Π’Π°ΠΊΠΆΠ΅ этот Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ являСтся вСсьма ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ благодаря ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Π΅, которая ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.

CSS3-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ для создания Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… сайтов. ВсС начинаСтся с простой Π² использовании ΠΈ настройкС систСмы сСток, которая слуТит основой для создаваСмого Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

ВстроСнная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ обСспСчит соотвСтствиС ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ части Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π’Π°ΠΊΠΆΠ΅ доступСн Π½Π°Π±ΠΎΡ€ скриптов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ для настройки ΠΌΠ°ΠΊΠ΅Ρ‚Π°. И Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ‚ΡŒΡΡ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ сайт станСт слишком Ρ€Π°Π·Π΄ΡƒΡ‚Ρ‹ΠΌ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ особоС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π°Π²Ρ‚ΠΎΡ€Ρ‹ ΡƒΠ΄Π΅Π»ΠΈΠ»ΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ простотС.

CSS Π² Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ стСпСни ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ Π½Π° построСниС Π²Π΅Π±-интСрфСйсов. UIKit β€” это ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹ΠΉ front-end CSS framework, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€ΠΈΠ·Π²Π°Π½ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ Π² быстром создании простых Π²Π΅Π±-интСрфСйсов, красивых ΠΈ Π³ΠΈΠ±ΠΊΠΈΡ… Π² настройкС. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² UIKit соотвСтствуСт соврСмСнному ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Ρƒ ΠΊ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΈ использованию популярных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². UIKit ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ 30 ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Ρ… ΠΈ Π²Ρ‹Π΄Π²ΠΈΠΆΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Ρ‹ Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Ρ‹ Π½Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ сСкции Π² соотвСтствии с Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΠΎΠΌ.

Π’Π°ΠΊΠΆΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ содСрТит Π΄Π²Π΅ прСдустановлСнныС Ρ‚Π΅ΠΌΡ‹ – «ГрадиСнтная» ΠΈ «Плоская». ОбС ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ свСсти Π² ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½ΡƒΡŽ систСму всС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ UIKit. Π­Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΠΎΠ»ΠΈΠ³ΠΎΠ½ для экспСримСнтов, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ всС ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ CSS3. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Ρ€Π°Π·Π΄Π΅Π» Π’ΠΈΡ‚Ρ€ΠΈΠ½Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ сайты ΠΈ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ с использованиСм основных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ UIKit. Он Ρ‚Π°ΠΊΠΆΠ΅ прСдоставляСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Ρ†Π΅Π»Ρ‹ΠΉ ряд ΡƒΡ‡Π΅Π±Π½Ρ‹Ρ… пособий для ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ изучСния Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°.

Иногда всС, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½Π° самом Π΄Π΅Π»Π΅ Π½ΡƒΠΆΠ½ΠΎ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, это Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΉ, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΈ соврСмСнный шаблон сСтки. Modest Grid прСдоставляСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΡˆΠ°Π±Π»ΠΎΠ½Π½ΡƒΡŽ систСму сСток, которая Π±ΡƒΠ΄Π΅Ρ‚ прСкрасно Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° соврСмСнных устройствах, Π° Ρ‚Π°ΠΊΠΆΠ΅ обСспСчит ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚ для использования ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ². ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ находится Π½Π° стадии Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ развития, поэтому оТидаСтся, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Ρ‚ΡŒΡΡ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ ΡΠ²ΠΎΠ»ΡŽΡ†ΠΈΠΈ самого CSS.

Schema ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ для обСспСчСния ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π° front-end Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ Π·Π°Π΄Π°Ρ‡Π΅ΠΉ являСтся ΠΏΠΎΠΌΠΎΡ‰ΡŒ Π² создании слоТных ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов.

Π§Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ Schema ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ новСйшиС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ CSS3 для создания слоТных Π²Π΅Π±-страниц, посСтитС страницу Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΈ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ со всСми возмоТностями CSS UI framework.

Metro UI

Π‘Ρ‚ΠΈΠ»ΡŒ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Metro ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Π» Π·Π° послСднСС врСмя Π½Π΅ΠΌΠ°Π»ΠΎ ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊΠΎΠ². Metro UI сконцСнтрирован ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Metro-стиля Windows, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π³ΠΈΠ±ΠΊΠΈΠ΅ интСрфСйсы с использованиСм Π΅Π³ΠΎ Π»ΡƒΡ‡ΡˆΠΈΡ… Ρ‡Π΅Ρ€Ρ‚. Metro UI ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΡƒΡŽ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ стилСй Metro ΠΎΡ‚ Microsoft для создания Ρ‚Π°ΠΊΠΈΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΊΠ°ΠΊ сСтки, ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. Он поставляСтся с Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ Π΄Π²Π°Π΄Ρ†Π°Ρ‚ΡŒΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ, содСрТит Π±ΠΎΠ»Π΅Π΅ трСхсот ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ построСн Π½Π° Π±Π°Π·Π΅ прСпроцСссора LESS.

Π­Ρ‚ΠΎ послСдний CSS grid framework Π² нашСм ΠΎΠ±Π·ΠΎΡ€Π΅. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ стили сСточных Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² сайтов. Π§Ρ‚ΠΎΠ±Ρ‹ процСсс Π±Ρ‹Π» Π΅Ρ‰Π΅ ΠΏΡ€ΠΎΡ‰Π΅, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΡΡ‚Ρ€ΠΎΠ΅Π½Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π° сСтки. Π’Π°ΠΊΠΆΠ΅ доступна Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° прСдустановлСнных шаблонов.

YAML удаСтся ΠΎΡΡ‚Π°Ρ‚ΡŒΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ дСсяти Π»Π΅Ρ‚, ΠΎΠ½ Π΄ΠΎ сих ΠΏΠΎΡ€ являСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ извСстных CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² Π² ΠΌΠΈΡ€Π΅. YAML (Yet Another Multicolumn Layout) β€” это ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹ΠΉ, Π³ΠΈΠ±ΠΊΠΈΠΉ CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для создания Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… сайтов. Он исповСдуСт ΠΏΠΎΠ΄Ρ…ΠΎΠ΄, Π±Π°Π·ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉΡΡ Π½Π° нСзависимом ΠΎΡ‚ дисплСя Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, ΠΈ прСдоставляСт ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ для Π³ΠΈΠ±ΠΊΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ². Π­Ρ‚ΠΎ идСальная отправная Ρ‚ΠΎΡ‡ΠΊΠ° для создания ΠΏΠΎ-настоящСму Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

YAML Π²ΠΎΠΏΠ»ΠΎΡ‚ΠΈΠ» Π² сСбС всС новСйшиС стандарты ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°. Он ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ для быстрой HTML5- ΠΈ CSS3-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. Написан с использованиСм SASS.

CSS β€” это Ρ€Π°Π·Π²ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΉΡΡ язык, ΠΈ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π² курсС послСдних Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠΉ довольно нСпросто. Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΠΏΡ€Π΅ΠΎΠ΄ΠΎΠ»Π΅Ρ‚ΡŒ Ρ€Π°Π·Ρ€Ρ‹Π² ΠΌΠ΅ΠΆΠ΄Ρƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒΡŽ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ запрос ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈ использованиСм Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, которая сдСлаСт это Π·Π° вас. Как Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΈΠ· этой ΡΡ‚Π°Ρ‚ΡŒΠΈ, CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π² сСбя ряд структур: Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ°, сброс CSS, элСмСнты интСрфСйса, Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ стили ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ сСтки. Π˜Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ.

CSS framework Π½Π΅Π·Π°ΠΌΠ΅Π½ΠΈΠΌΡ‹ ΠΏΡ€ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ Π·Π°Π΄Π°Ρ‡ обСспСчСния кроссбраузСрной совмСстимости ΠΈ Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ ΠΏΠΎΠ΄ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ устройств. Благодаря ΠΈΠΌ ваши сайты Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π½Π° Π»ΡŽΠ±Ρ‹Ρ… Ρ‚ΠΈΠΏΠ°Ρ… устройств. Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΈΠ· прСдставлСнных Π² этом ΠΎΠ±Π·ΠΎΡ€Π΅ CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ построСния Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… шаблонов ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ нСскольким Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ. Π­Ρ‚ΠΎ Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ позволяСт ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ врСмя ΠΈ Π±ΡŽΠ΄ΠΆΠ΅Ρ‚.

Данная публикация прСдставляСт собой ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«Top 21 Best Free CSS3 Frameworks for Web Development 2016Β» , ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π΄Ρ€ΡƒΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.Ρ€Ρƒ

Ρ‚Π΅Π»Π΅Π³Ρ€Π°ΠΌ ΠΊΠ°Π½Π°Π». Подпишись, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ!

Основная ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π° для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ JavaScript Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ: Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ с UI

ΠžΡ‚ Π°Π²Ρ‚ΠΎΡ€Π°: я Π²ΠΈΠ΄Π΅Π», ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ людСй слСпо ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ соврСмСнныС JavaScript Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ React, Angular ΠΈ Vue.js. Π’ этих Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°Ρ… ΠΌΠ½ΠΎΠ³ΠΎ интСрСсных Π²Π΅Ρ‰Π΅ΠΉ, Π½ΠΎ люди ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΡƒΠΏΡƒΡΠΊΠ°ΡŽΡ‚ Π³Π»Π°Π²Π½ΡƒΡŽ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρƒ ΠΈΡ… сущСствования.

Π­Ρ‚Π° ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π° Π½Π΅ связана с:

Они основаны Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ…

Π£ Π½ΠΈΡ… сильноС сообщСство

Π£ Π½ΠΈΡ… ΠΌΠ½ΠΎΠ³ΠΎ сторонних Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ для Ρ€Π°Π±ΠΎΡ‚Ρ‹

JavaScript. Быстрый старт

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ основы JavaScript Π½Π° практичСском ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎ созданию Π²Π΅Π±-прилоТСния

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Π£ Π½ΠΈΡ… Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ сторонниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

Π£ Π½ΠΈΡ… Π΅ΡΡ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° для ΠΏΠΎΠΌΠΎΡ‰ΠΈ с ΠΎΡ‚Π»Π°Π΄ΠΊΠΎΠΉ

Они Ρ…ΠΎΡ€ΠΎΡˆΠΎ подходят для создания одностраничных ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

Главная, Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Π°Ρ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ:

Π”Π°, это ΠΏΡ€Π°Π²Π΄Π°. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΡƒΠ·Π½Π°Π΅ΠΌ ΠΏΠΎΡ‡Π΅ΠΌΡƒ

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠ΅Ρ‚Π΅ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π³Π΄Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ³Π»Π°ΡˆΠ°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ людСй Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΈΠ³Π»Π°ΡˆΠ΅Π½ΠΈΡ ΠΏΠΎ email. UX/UI Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅: Ρƒ нас Π΅ΡΡ‚ΡŒ пустоС состояниС, Π³Π΄Π΅ ΠΌΡ‹ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Π»Π΅ΠΉΠ±Π» с ΠΊΠ°ΠΊΠΈΠΌ-Ρ‚ΠΎ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ тСкстом, Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС ΠΌΡ‹ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ email адрСс с ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ/ссылкой справа для удалСния.

БостояниС этой Ρ„ΠΎΡ€ΠΌΡ‹ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ собой массив ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ², содСрТащих email адрСса ΠΈ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ пустым. ΠŸΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ email адрСсов ΠΏΡƒΡ‚Π΅ΠΌ ΠΈΡ… Π²Π²ΠΎΠ΄Π° ΠΈ наТатия enter, Π²Π²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ адрСс добавляСтся Π² массив ΠΈ обновляСт UI. Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΊΠ»ΠΈΠΊΠ°Π΅Ρ‚ Π½Π° delete, Π²Ρ‹ удаляСтС email адрСс ΠΈ обновляСтС UI. Π’ΠΈΠ΄Π΅Π»ΠΈ? ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΠΏΡ€ΠΈ смСнС состояния Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒ UI.

И Ρ‡Ρ‚ΠΎ ΠΈΠ· этого? Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ это Π±Π΅Π· ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ²:

Чистая рСализация любого слоТного UI

Код ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚, ΠΊΠ°ΠΊΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ€Π°Π΄ΠΈ Ρ‚Π°ΠΊΠΎΠ³ΠΎ слоТного UI Π½Π° чистом JS (с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ классичСских Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ Ρ‚ΠΈΠΏΠ° jquery).

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ статичная структура создаСтся Π² HTML, Π° динамичСскиС Π²Π΅Ρ‰ΠΈ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ Π² JS (с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ document.createElement). Π­Ρ‚ΠΎ пСрвая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°: JS ΠΊΠΎΠ΄, ΡΠΎΠ·Π΄Π°ΡŽΡ‰ΠΈΠΉ UI, Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ, ΠΈ ΠΌΡ‹ опрСдСляСм UI Π² Π΄Π²ΡƒΡ… Ρ€Π°Π·Π½Ρ‹Ρ… частях. МоТно Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ innerHTML, ΠΎΠ½ Π±Ρ‹Π» Π±Ρ‹ Π±ΠΎΠ»Π΅Π΅ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΌ. Но ΠΎΠ½ ΠΌΠ΅Π½Π΅Π΅ эффСктивСн ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Π±Π°Π³ΠΈ Cross Site Scripting. ΠœΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ шаблонов, Π½ΠΎ Ссли ΠΌΡ‹ Ρ€Π΅Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌ большоС ΠΏΠΎΠ΄Π΄Ρ€Π΅Π²ΠΎ DOM, Ρ‚ΠΎ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ 2 ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹: Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ эффСктивно, ΠΈ часто приходится ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒΡΡ ΠΊ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ событий.

Но это Π½Π΅ главная ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°. Главная ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° всСгда – это ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ UI ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ состояния. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ состояния Π² UI Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. ΠŸΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ email Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ состояния Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ 2 строки ΠΊΠΎΠ΄Π°, Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ UI – 13 строк. А наш UI максимально прост!!

Код Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Π½ΠΎ Π±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ: ΠΎΠ½ сильно замусорСн. ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ синхронизации списка с сСрвСром. Нам Π½ΡƒΠΆΠ½ΠΎ ΡΡ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ наши Π΄Π°Π½Π½Ρ‹Π΅ с Π΄Π°Π½Π½Ρ‹ΠΌΠΈ, ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ с сСрвСра. Для этого Π½ΡƒΠΆΠ½ΠΎ ΡΡ€Π°Π²Π½ΠΈΡ‚ΡŒ всС ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ ΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ (ΠΌΠΎΠΆΠ½ΠΎ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π² памяти копию записи с Ρ‚Π΅ΠΌ ΠΆΠ΅ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ, Π½ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ).

Π‘ΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для этого случая Π½Π°ΠΌ придСтся Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° прСдставлСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ эффСктивно ΠΌΡƒΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ DOM. Если ΠΌΡ‹ допустим ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΎΡˆΠΈΠ±ΠΊΡƒ, UI Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ синхронизирован с Π΄Π°Π½Π½Ρ‹ΠΌΠΈ: потСря ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΠΏΠΎΠΊΠ°Π· Π½Π΅Π²Π΅Ρ€Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ полная ΠΏΠΎΠ»ΠΎΠΌΠΊΠ° элСмСнтов Π½Π΅ ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‚ трСбованиям ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Ρ…ΡƒΠΆΠ΅, Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‚ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Π΅ дСйствия (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ»ΠΈΠΊ ΠΏΠΎ delete удаляСт Π½Π΅ Ρ‚ΠΎΡ‚ элСмСнт).

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ синхронизации UI с Π΄Π°Π½Π½Ρ‹ΠΌΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя написаниС большого ΡƒΡ‚ΠΎΠΌΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ мусорного ΠΊΠΎΠ΄Π°.

JavaScript. Быстрый старт

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ основы JavaScript Π½Π° практичСском ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎ созданию Π²Π΅Π±-прилоТСния

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Π”Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ UI Π² ΠΏΠΎΠΌΠΎΡ‰ΡŒ

Ни сообщСство, Π½ΠΈ инструмСнты, Π½ΠΈ экосистСма, Π½ΠΈ сторонниС библиотСки…

Β«Π‘Π°ΠΌΠΎΠ΅ ΠΊΡ€ΡƒΠΏΠ½ΠΎΠ΅ Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ эти Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ UI, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ синхронизированы с Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΌ состояниСм прилоТСния.Β»

Ну, ΠΏΠΎΡ‡Ρ‚ΠΈ. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊ, Ссли Π²Ρ‹ Π½Π΅ Π½Π°Ρ€ΡƒΡˆΠΈΡ‚Π΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΠΎΡΡ‚ΡŒ состояния).

ΠœΡ‹ ΠΎΠ΄Π½ΠΈΠΌ выстрСлом создаСм UI, ΠΈ Π½Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ UI ΠΊΠΎΠ΄ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ дСйствиС. Благодаря ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡƒ ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ, ΠΌΡ‹ всСгда ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Π²Ρ‹Ρ…ΠΎΠ΄: Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ автоматичСски обновляСт Π΄Π°Π½Π½Ρ‹Π΅ послС измСнСния состояния.

Как это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚?

Π•ΡΡ‚ΡŒ 2 Π±Π°Π·ΠΎΠ²Ρ‹Π΅ стратСгии:

ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π½Ρ‹ΠΉ Ρ€Π΅Π½Π΄Π΅Ρ€ всСго ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°: React. Когда состояниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° мСняСтся, происходит Ρ€Π΅Π½Π΄Π΅Ρ€ DOM Π² памяти ΠΈ сравнСниС Π΅Π³ΠΎ с ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ DOM. На самом Π΄Π΅Π»Π΅, это Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΎΡ‡Π΅Π½ΡŒ Π·Π°Ρ‚Ρ€Π°Ρ‚Π½ΠΎ ΠΏΠΎ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, поэтому рисуСтся Virtual DOM ΠΈ сравниваСтся ΠΎΠ½ с ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΌ снимком Virtual DOM. Π—Π°Ρ‚Π΅ΠΌ происходит расчСт ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Ρ‚Π΅Ρ… ΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ DOM. ΠŸΡ€ΠΎΡ†Π΅ΡΡ называСтся согласованиСм.

ΠžΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Ρ‡Π΅Ρ€Π΅Π· observers: Angular ΠΈ Vue.js. Π—Π° ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹ΠΌΠΈ состояния вСдСтся наблюдСниС, ΠΈ ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ, ΠΎΠ±Π½ΠΎΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ элСмСнты DOM, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… эти значСния Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ ΠΈΠ»ΠΈ Π±Ρ‹Π»ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ Π² Ρ€Π΅Π½Π΄Π΅Ρ€.

А Ρ‡Ρ‚ΠΎ с Π²Π΅Π±-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ?

ΠžΡ‡Π΅Π½ΡŒ часто люди ΡΡ€Π°Π²Π½ΠΈΠ²Π°ΡŽΡ‚ React, Angular ΠΈ Vue.js с web components. Π­Ρ‚ΠΎ явный ΠΏΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚ основного прСимущСства этих Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ²: ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ синхронизации UI с состояниСм. Π’Π΅Π±-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π½ΠΈΡ‡Π΅Π³ΠΎ Ρ‚Π°ΠΊΠΎΠ³ΠΎ Π½Π΅ Π΄Π°ΡŽΡ‚. Π£ Π½ΠΈΡ… Π΅ΡΡ‚ΡŒ лишь Ρ‚Π΅Π³ template, Π½ΠΎ Π² Π½Π΅ΠΌ Π½Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠ° согласования. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅Π±-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΡΠΈΠ½Ρ…Ρ€ΠΎΠ½ΠΈΠ·Π°Ρ†ΠΈΡŽ UI со Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΌ состояниСм прилоТСния, Π²Π°ΠΌ придСтся Π΄Π΅Π»Π°Ρ‚ΡŒ это Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Ρ‚ΠΈΠΏΠ° Stencil.js (ΠΎΠ½ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Virtual DOM, ΠΊΠ°ΠΊ React).

Но Π΄Π°Π²Π°ΠΉΡ‚Π΅ проясним: Π² этих тСхнологиях Π½Π΅Ρ‚ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»Π°: Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ всСгда ΡΠΈΠ½Ρ…Ρ€ΠΎΠ½ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ UI с состояниСм. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π²Π΅Π±-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π½Π΅ Π΄Π°ΡŽΡ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ Ρ‚Π°ΠΊΠΎΠ³ΠΎ, ΠΈ Π²Π°ΠΌ приходится ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сторонниС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ (ΠΈΠ»ΠΈ Π΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ). НСвозмоТно ΠΏΠΈΡΠ°Ρ‚ΡŒ слоТный, эффСктивный ΠΈ Π»Π΅Π³ΠΊΠΎ обслуТиваСмый UI Π½Π° чистом JS. Π­Ρ‚ΠΎ главная ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ соврСмСнный JS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ.

Π”Π΅Π»Π°ΠΉΡ‚Π΅ сами

Π― обоТаю ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ основы, ΠΈ, оказываСтся, ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Virtual DOM. Π’Π°ΠΊ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ‹ Π½Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΏΠΈΡΠ°Ρ‚ΡŒ наш чистый UI, Π½ΠΎ с Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ Virtual DOM Π±Π΅Π· ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ²? НиТС прСдставлСно ядро Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°, Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ класс любого ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.

НиТС ΠΏΠΎΠΊΠ°Π·Π°Π½Π° пСрСдСланная рСализация ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° AddressList (с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ babel для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ JSX):

Π’Π΅ΠΏΠ΅Ρ€ΡŒ UI Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ, ΠΈ ΠΌΡ‹ Π½Π΅ использовали Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ. ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ Π»ΠΎΠ³ΠΈΠΊΡƒ, которая мСняСт состояниС Π»ΡŽΠ±Ρ‹ΠΌ способом, ΠΈ Π½Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄ для поддСрТания синхронизации с UI. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Ρ€Π΅ΡˆΠ΅Π½Π°!

Π—Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ событий это ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ React? Π£ нас Π΅ΡΡ‚ΡŒ haverender() ,componentDidMount() , setState()… ПослС Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ синхронизации UI с Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΌ состояниСм прилоТСния, всС ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ складываСтся самом собой.

ΠŸΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π½Π° Github.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Главная ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Ρ€Π΅ΡˆΠ°ΡŽΡ‚ соврСмСнныС JS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ – ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ синхронизации UI ΠΈ состояния

НСвозмоТно ΠΏΠΈΡΠ°Ρ‚ΡŒ слоТный, эффСктивный ΠΈ Π»Π΅Π³ΠΊΠΎ обслуТиваСмый UI Π½Π° чистом JS

Π’Π΅Π±-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π½Π΅ Ρ€Π΅ΡˆΠ°ΡŽΡ‚ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ свой Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Virtual DOM Π½Π΅ Ρ‚Π°ΠΊ ΠΈ слоТно. Но я Π½Π΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ Π²Π°ΠΌ Π΄Π΅Π»Π°Ρ‚ΡŒ этого!

Автор: Alberto Gimeno

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: https://medium.com/

РСдакция: Команда webformyself.

JavaScript. Быстрый старт

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ основы JavaScript Π½Π° практичСском ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎ созданию Π²Π΅Π±-прилоТСния

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для создания сайта?

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅ ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹ΠΉ ΠΏΠ»Π°Π½ ΠΏΠΎ созданию сайта с нуля!

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ

20+ Π»ΡƒΡ‡ΡˆΠΈΡ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ / Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса React Π½Π° 2020 Π³ΠΎΠ΄

Π’ этом рСсурсС ΠΌΡ‹ рассмотрим Π»ΡƒΡ‡ΡˆΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React UI, доступныС Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. Но сначала:

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ React?

React — это Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° JavaScript с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, которая ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠΈΠΉ интСрфСйс ΠΊΠ°ΠΊ для Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Ρ‚Π°ΠΊ ΠΈ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Он ΡƒΠ΄ΠΎΠ±Π½ΠΎ сочСтаСтся с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ JavaScript ΠΈ содСрТит ΠΊΡ€ΠΎΡˆΠ΅Ρ‡Π½Ρ‹Π΅ Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½Ρ‹Π΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΊΠΎΠ΄Π°, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ .ИмСнно эти ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ внимания Π½Π° этом рСсурсС.

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠΈ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅, Π±Π΅Π· особых зависимостСй ΠΎΡ‚ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ для ΠΎΡ‡Π΅Π½ΡŒ быстрого создания ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ интСрфСйсов. А благодаря Bit Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΈΠΌΠΈ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ энтузиастами React.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π²Ρ‹ Π½Π°Ρ‡Π½Π΅Ρ‚Π΅ свой ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ с React, ΡƒΠ΄Π΅Π»ΠΈΡ‚Π΅ нСсколько ΠΌΠΈΠ½ΡƒΡ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ этот список Π»ΡƒΡ‡ΡˆΠΈΡ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React UI, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅ выглядящий ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс.

Π›ΡƒΡ‡ΡˆΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса React Π² 2020 Π³ΠΎΠ΄Ρƒ

Material Kit React

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° основС Google Material Design, Material Kit React создаСт Π½Π°Π±ΠΎΡ€ элСмСнтов, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ являСтся Π³Π»Π°Π²Π½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ваш Π²Π΅Π±-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ сохраняСт сходство внСшнСго Π²ΠΈΠ΄Π° ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π½Π° всСм протяТСнии.

ΠžΠ±Ρ‰ΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ‚ нСсколько листов Π±ΡƒΠΌΠ°Π³ΠΈ. Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ΄Π°Π΅Ρ‚ ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌ Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ ΠΈ порядок. Π’ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ Ρ‚Ρ€ΠΈ страницы с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ.Π­Ρ‚ΠΈ страницы Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ возмоТности этого Π½Π°Π±ΠΎΡ€Π°, Π½ΠΎ ΠΈ слуТат Π² качСствС шаблонов, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ тСкст ΠΈ изобраТСния своими собствСнными.

Набор Ρ‚Π°ΠΊΠΆΠ΅ содСрТит ряд основных элСмСнтов, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΈ, мСню, Ρ€Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ Π½Π° страницы, ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈ Ρ‚Π°Π±Π»Π΅Ρ‚ΠΊΠΈ. Π’Ρ‹ смоТСтС Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ Ρ†Π²Π΅Ρ‚ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° элСмСнтов. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ JavaScript Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, Π²Ρ‹Π±ΠΎΡ€ Π΄Π°Ρ‚Ρ‹ ΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, карусСли ΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½Π°. Помимо использования Π½Π°Π±ΠΎΡ€Π° для запуска Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ любого старого ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Bootstrap.ВСрсия Material Kit React Pro содСрТит Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ большС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² страниц.

Ant Design для React

Π­Ρ‚Π° UI-Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° React прСдставляСт собой систСму Π΄ΠΈΠ·Π°ΠΉΠ½Π° для ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ уровня. Он основан Π½Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ Ant Design ΠΈ содСрТит Π½Π°Π±ΠΎΡ€ высококачСствСнных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ дСмонстраций для создания ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… интСрфСйсов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π°Ρ†ΠΈΠΎΠ½Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ для дСсятков языков.

Π£ вас Ρ‚Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π² соотвСтствии с вашими ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π½Ρ‹ΠΌΠΈ спСцификациями.Ant Design ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Less.js Π² качСствС языка стилСй. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Ant Design Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π·Π½Π°Ρ‡ΠΊΠΈ, сСтки, Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠΈ, Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ мСню, Ρ€Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ Π½Π° страницы ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

Π£ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΏΠΎΡ‡Ρ‚ΠΈ 60 тысяч Π·Π²Π΅Π·Π΄ Π½Π° GitHub, поэтому ΠΎΠ½ ΠΎΡ‡Π΅Π½ΡŒ популярСн срСди Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

React Admin

Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для создания административных ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ для бизнСса (B2B) Π½Π° основС REST / GraphQL API ΠΈ настраиваСтся ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ. Помимо React, ΠΎΠ½ построСн с использованиСм ряда Ρ…ΠΎΡ€ΠΎΡˆΠΎ извСстных ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²: Material UI, React Router, Redux ΠΈ React Final Form.ПослСднСС являСтся популярным Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ для управлСния состояниСм Ρ„ΠΎΡ€ΠΌΡ‹.

Помимо бСсплатной вСрсии ΠΈ Π΅Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², сущСствуСт Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅. ΠšΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ ΠΎΡ‚ Marmelab (создатСлСй) ΠΈ доступ ΠΊ частным модулям.

React Admin ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠΊΠΎΠ»ΠΎ 12 тысяч Π·Π²Π΅Π·Π΄ Π½Π° GitHub ΠΈ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ поддСрТиваСтся.

Shards React

Shards React — это соврСмСнный Π½Π°Π±ΠΎΡ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса React с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, созданный с нуля ΠΈ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π½Π° Π²Ρ‹ΡΠΎΠΊΡƒΡŽ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.БоврСмСнная систСма Π΄ΠΈΠ·Π°ΠΉΠ½Π° позволяСт ΠΌΠ½ΠΎΠ³ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ. Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ исходныС Ρ„Π°ΠΉΠ»Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ ΠΊΠΎΠ΄Π°. SCSS, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для стилизации, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ возмоТности Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°.

Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° основана Π½Π° Shards ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ React Datepicker, React Popper (ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ позиционирования) ΠΈ noUIShlider. Он ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ². Π’ ΠΏΠ°ΠΊΠ΅Ρ‚Π΅ Shards Pro Π΅ΡΡ‚ΡŒ 15 Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… страниц, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ. К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, Π½Π° этих страницах ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π±Π»ΠΎΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ.

ИмСя ~ 270 Π·Π²Π΅Π·Π΄ Π½Π° GitHub, ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ дСсятки настраиваСмых ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΈ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΠΈ Π²Π²ΠΎΠ΄Π°. Π‘ΠΎΠ»Π΅Π΅ 350 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΡŽΡ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ смоТСтС ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ практичСски любой Ρ‚ΠΈΠΏ Π²Π΅Π±-сайтов с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Shards React.

Material-UI

ИмСя ΠΊΠΎΠ»ΠΎΡΡΠ°Π»ΡŒΠ½Ρ‹Π΅ 55 тысяч Π·Π²Π΅Π·Π΄ Π½Π° GitHub, Material-UI Π²Ρ…ΠΎΠ΄ΠΈΡ‚ Π² число самых популярных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React UI. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π½Π° React, Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Material Design ΠΎΡ‚ Google. Для Ρ‚Π΅Ρ… ΠΈΠ· вас, ΠΊΠΎΠΌΡƒ Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ‡Π΅Ρ€ΠΏΠ°Π΅Ρ‚ Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΠΈΠ· физичСского ΠΌΠΈΡ€Π° ΠΈ тСкстур, ΠΏΡ€ΠΈ этом фактичСскиС элСмСнты ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса свСдСны ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ.

ДоступСн ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ спСктр ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π°Π²Ρ‚ΠΎΠ·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π°, Π·Π½Π°Ρ‡ΠΊΠΈ, мСню, ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, Material-UI Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ‚Π΅ΠΌΡ‹ ΠΈ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ React, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ для своСго прилоТСния.

React Bootstrap

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ Π² нашСм спискС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса React являСтся React Bootstrap, Π½Π°Π±ΠΎΡ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сохраняСт ядро ​​Bootstrap. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄Π°Ρ‚ΡŒ Π²Π°ΠΌ больший ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ Ρ„ΠΎΡ€ΠΌΠΎΠΉ ΠΈ функциями ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, ΠΎΠ½ замСняСт JavaScript Π² Bootstrap Π½Π° React.ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ построСн Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ лСгкодоступным, Ρ‡Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎ для создания внСшнСго интСрфСйса.

И ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ React Bootstrap Π½Π΅ сильно отличаСтся ΠΎΡ‚ своСго происхоТдСния, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΈΠ· тысяч доступных Ρ‚Π΅ΠΌ Bootstrap. Он Π·Π°Ρ€Π°Π±ΠΎΡ‚Π°Π» 14500+ Π·Π²Π΅Π·Π΄ Π½Π° GitHub.

React Virtualized

Π‘ΠΎΠ·Π΄Π°Π΅Ρ‚Π΅ интСрфСйс, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΠΉ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… объСмов Π΄Π°Π½Π½Ρ‹Ρ…? React Virtualized ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒΡΡ. Он Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя мноТСство ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² для эффСктивного отобраТСния Π±ΠΎΠ»ΡŒΡˆΠΈΡ… списков, Ρ‚Π°Π±Π»ΠΈΡ† ΠΈ сСток.НапримСр, Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ ΠΊΠΈΡ€ΠΏΠΈΡ‡Π½ΡƒΡŽ ΠΊΠ»Π°Π΄ΠΊΡƒ, ΠΊΠΎΠ»ΠΎΠ½Π½Ρ‹, Π°Π²Ρ‚ΠΎΡ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, сортировщики направлСния, скроллСры ΠΎΠΊΠΎΠ½ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, настроив высоту строк ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΠ² Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΠΈ Π² ячСйках.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, React Virtualized ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ°Π»ΠΎ зависимостСй ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ стандартныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ послСдниС ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ для iOS ΠΈ Android. Π£ Π½Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ 18000 Π·Π²Π΅Π·Π΄ Π½Π° GitHub.

Argon Design System React

Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π±Π΅ΡΠΏΠ»Π°Ρ‚Π½ΡƒΡŽ систСму Π΄ΠΈΠ·Π°ΠΉΠ½Π° для Bootstrap 4, React ΠΈ Reactstrap.Он содСрТит 100 соврСмСнных ΠΈ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½Ρ‹Ρ… элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹ Π² ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΌ ΠΊΠΎΠ΄Π΅, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒΡΡ со страницы Π½Π° Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Π΅Π±-сайт.

БистСма Π΄ΠΈΠ·Π°ΠΉΠ½Π° Argon ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ страниц ΠΈ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² для всСх ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Ρ†Π²Π΅Ρ‚Π°, стили, Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈ фокус.

ВзглянитС Π½Π° вСсь Π½Π°Π±ΠΎΡ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Π²ΠΊΠ»ΡŽΡ‡Π°Ρ основныС элСмСнты, Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΡƒ, ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, прСдупрСТдСния, изобраТСния, Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Javascript ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

Blueprint

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React Π² Blueprint Π² основном ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для использования Π² Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… прилоТСниях.Π­Ρ‚ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ особСнно подходят для создания слоТных интСрфСйсов с большим объСмом Π΄Π°Π½Π½Ρ‹Ρ…. Из Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΊΠΎΠ΄Π° для создания ΠΈ отобраТСния Π·Π½Π°Ρ‡ΠΊΠΎΠ², для взаимодСйствия с Π΄Π°Ρ‚ΠΎΠΉ ΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ, для Π²Ρ‹Π±ΠΎΡ€Π° часовых поясов ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ.

Π§Ρ‚ΠΎ Π΅Ρ‰Π΅ Π΅ΡΡ‚ΡŒ Π² этой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²? На самом Π΄Π΅Π»Π΅ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ — Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠΈ, выноски, ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒ, ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π²ΠΊΠ»Π°Π΄ΠΊΠΈ, Ρ‚Π΅Π³ΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. На GitHub ΠΎΠ½ Π½Π°Π±ΠΈΡ€Π°Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ 15000 Π·Π²Π΅Π·Π΄.

Π’Π°ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ интСрСсны ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ:

Semantic UI React

Semantic UI ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ для Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° HTML Π² качСствС срСды Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡŽ с React, Angular, Meteor, Ember ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠΌΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ.ВсС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ jQuery Π±Ρ‹Π»ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹ Π² React.

Он позволяСт Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ Semantic UI CSS ΠΏΠΎΠ²Π΅Ρ€Ρ… прилоТСния Semantic UI React. Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, Ρƒ вас Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π½Ρ‹ΠΉ доступ ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ Π² настройкС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Число Π·Π²Π΅Π·Π΄ Π½Π° GitHub ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ 11 000.

React Toolbox

Другая Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React UI, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠ² ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Google Π² своСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, — это React Toolbox.Для этой Ρ†Π΅Π»ΠΈ React Toolbox ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ CSS. Π₯отя Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ любой сборщик ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ, ΠΎΠ½ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ интСгрируСтся с Ρ€Π°Π±ΠΎΡ‡ΠΈΠΌ процСссом webpack. Команда React Toolbox ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½ΠΎ прСдоставляСт посСтитСлям Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

ΠŸΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с React Toolbox Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π² ΠΏΠ°ΠΊΠ΅Ρ‚Π°Ρ… ΠΈΠ»ΠΈ Π½Π΅ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Π Π°Π·Π½ΠΈΡ†Π° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π² ΠΏΠ΅Ρ€Π²ΠΎΠΌ случаС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ со всСми Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΌΠΈ зависимостями ΠΈ Ρ‚Π΅ΠΌΠ°ΠΌΠΈ, Π²Π²Π΅Π΄Π΅Π½Π½Ρ‹ΠΌΠΈ Π·Π° вас.Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ CSS для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ зависимости Π±ΡƒΠ΄Π΅Ρ‚ автоматичСски доступСн Π² вашСм ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌ CSS. Напротив, Π² сырых ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ… CSS Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚Π΅ΠΌΡƒ Ρ‡Π΅Ρ€Π΅Π· свойства для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π±Ρ‹Π» ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½. React Toolbox ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ» Π±ΠΎΠ»Π΅Π΅ 8000 Π·Π²Π΅Π·Π΄ Π½Π° GitHub.

React Desktop

Π’ нашСй ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², React Desktop, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ macOS, Sierra ΠΈ Windows 10, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ€Π°Π±ΠΎΡ‡ΠΈΠΌ столом Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.

Π­Ρ‚Π° коллСкция прСдставляСт собой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ JavaScript, ΡΠΎΠ·Π΄Π°Π½Π½ΡƒΡŽ Π½Π° основС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ React Facebook, ΠΈ совмСстима с Π»ΡŽΠ±Ρ‹ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ Π½Π° основС JavaScript. Π­Ρ‚ΠΎΡ‚ инструмСнт пСрСсСкаСт Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ 8000 Π·Π²Π΅Π·Π΄ Π½Π° GitHub.

Onsen UI

Если Π²Ρ‹ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚Π΅ΡΡŒ созданиСм кроссплатформСнных ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, вас заинтСрСсуСт это ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· нашСго списка Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React UI. Onsen UI — это срСда Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰Π°Ρ HTML5 ΠΈ JavaScript ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‰Π°Ρ ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡŽ с Angular, Vue.js ΠΈ React. ВсС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈΠΌΠ΅ΡŽΡ‚ автоматичСский ΡΡ‚ΠΈΠ»ΡŒ Π² зависимости ΠΎΡ‚ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹, поэтому ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΊΠ°ΠΊ iOS, Ρ‚Π°ΠΊ ΠΈ Android с использованиСм ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ исходного ΠΊΠΎΠ΄Π°.

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс Onsen совмСстим со ΠΌΠ½ΠΎΠ³ΠΈΠΌΠΈ популярными Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ React. Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ руководство ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с этим инструмСнтом. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ чистый CSS Π±Π΅Π· повСдСния JavaScript. Для Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ настраиваСмыС элСмСнты. ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ Π·Π²Π΅Π·Π΄ Π½Π° GitHub ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ 7800.

Evergreen

Evergreen содСрТит Π½Π°Π±ΠΎΡ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ подходят для Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ уровня.ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ React Primitive, ΠΎΠ½ ΠΎΡ‡Π΅Π½ΡŒ Π³ΠΈΠ±ΠΊΠΈΠΉ. ΠŸΡ€ΠΈ этом Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚Π°ΠΊ ΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ прямо ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ.

Он Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ спСктр ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ инструмСнтов, ΠΎΡ‚ Π±Π°Π·ΠΎΠ²Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ, Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π΄ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ списки, ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΠΈ, Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связи. ПослС установки ΠΏΠ°ΠΊΠ΅Ρ‚Π° Evergreen Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π’ настоящСС врСмя ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ 9000 Π·Π²Π΅Π·Π΄ Π½Π° GitHub.

Reactstrap

Для простых ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React Bootstrap 4 ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с Reactstrap.ΠŸΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ΡΡ с двумя основными вСрсиями дистрибутива. Один, базовая вСрсия, ΠΈΡΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‰Π°Ρ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ зависимости. Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ большС гибкости Π² настройкС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… зависимостСй.

Вторая вСрсия — это полная вСрсия, которая Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя всС Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ зависимости. Π­Ρ‚ΠΎΡ‚ рСкомСндуСтся для Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Reactstrap — Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° коллСкция Π² Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса React, которая пСрСсСкаСт ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΊΡƒ 8700 Π½Π° GitHub.

Rebass

Rebass содСрТит Ρ‚ΠΎΠ»ΡŒΠΊΠΎ восСмь основных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², всС Π² свСрхмалом Ρ„Π°ΠΉΠ»Π΅.ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹ΠΌΠΈ ΠΈ тСматичСскими ΠΈ созданы для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡƒΡŽ систСму ΠΈ слуТат ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠΉ ΠΎΡ‚ΠΏΡ€Π°Π²Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ для Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Π² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса для вашСго прилоТСния. ThemeProvider Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ Π² этом. ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ Π·Π²Π΅Π·Π΄ Π½Π° GitHub ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ 6000.

Grommet

Grommet ΠΈΠΌΠ΅Π΅Ρ‚ ΡˆΠΈΡ€ΠΎΠΊΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π² своСм Π½Π°Π±ΠΎΡ€Π΅ ΠΈ считаСт срСди своих ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Ρ‚Π°ΠΊΠΈΠ΅ Π³Ρ€ΠΎΠΌΠΊΠΈΠ΅ ΠΈΠΌΠ΅Π½Π°, ΠΊΠ°ΠΊ Netflix ΠΈ Boeing. НСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΎ Π»ΠΈ вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ΠΎΠ² ΠΈΠ»ΠΈ для Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΈΡ… экранов, Π²Ρ‹ смоТСтС ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹.Π”ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ осущСствляСтся Ρ‡Π΅Ρ€Π΅Π· ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρƒ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ чтСния с экрана.

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ создания Ρ‚Π΅ΠΌ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚, Ρ‚ΠΈΠΏ ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚. Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React UI ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ 6000 Π·Π²Π΅Π·Π΄ Π½Π° GitHub.

Elemental UI

Elemental UI прСдоставляСт ряд основных Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² для Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½ΠΎΠ³ΠΎ использования ΠΈΠ»ΠΈ Π² любой ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ, Π±ΡƒΠ΄ΡŒ Ρ‚ΠΎ Π² стилС ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΠ»ΠΈ послС тСматичСского оформлСния. НСкоторыС ΠΈΠ· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Ρ„ΠΎΡ€ΠΌΡ‹, ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°.

ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ находится Π² стадии Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, Π½ΠΎ Π΅Π³ΠΎ Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ Π½Π° GitHub составляСт Π±ΠΎΠ»Π΅Π΅ 4000 Π·Π²Π΅Π·Π΄.

React Suite

React Suite содСрТит ряд Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² для ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… систСмных ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ². Он ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ всС основныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΈ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π½Π° сторонС сСрвСра.

Если Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π΄ΠΎΠΌΠ° с МСнСС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ, настройка ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π² этой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π·Π½Π°Ρ‡ΠΊΠΈ, Π·Π°Π³Ρ€ΡƒΠ·Ρ‡ΠΈΠΊΠΈ, Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅, Π° React Suite ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠΊΠΎΠ»ΠΎ 4000 Π·Π²Π΅Π·Π΄ Π½Π° GitHub.

Belle

Π‘Ρ€Π΅Π΄ΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React UI, Belle ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ спСктр ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ эти ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π½Π° Π΄Π²ΡƒΡ… уровнях — Π±Π°Π·ΠΎΠ²ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ для всСх ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π² совокупности, Π° Ρ‚Π°ΠΊΠΆΠ΅ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠΈ ARIA. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Belle, сначала Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ простоС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ с React, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ любой ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Belle ΠΈ сразу ΠΆΠ΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ 2400 Π·Π²Π΅Π·Π΄ Π½Π° GitHub.

react-md

Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React UI, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² своСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, — это react-md.Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ Π²Ρ‹Π±ΠΎΡ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ с Sass. Для этой Ρ†Π΅Π»ΠΈ Π² Sass Π΅ΡΡ‚ΡŒ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ стилСй вмСсто встроСнного стиля. Π­Ρ‚ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ настройку ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π² соотвСтствии с ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ стилями.

Π¦Π²Π΅Ρ‚Π° ΠΈ Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΡƒ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ, Π° подробная докумСнтация ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² основах. На GitHub react-md насчитываСт Π±ΠΎΠ»Π΅Π΅ 2000 Π·Π²Π΅Π·Π΄.

PrimeReact

Π­Ρ‚ΠΎΡ‚ список Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса React Π½Π΅ Π±Ρ‹Π» Π±Ρ‹ ΠΏΠΎΠ»Π½Ρ‹ΠΌ Π±Π΅Π· PrimeReact.Он прСдоставляСт ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ ΠΏΠΎΡ‡Ρ‚ΠΈ всС основныС трСбования ΠΊ интСрфСйсу, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π²Π²ΠΎΠ΄Π°, мСню, прСдставлСниС Π΄Π°Π½Π½Ρ‹Ρ…, сообщСния ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

Он Ρ‚Π°ΠΊΠΆΠ΅ удСляСт Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ устройствам с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… для сСнсорного управлСния Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… элСмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π°. БущСствуСт ряд шаблонов ΠΈ Ρ‚Π΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ плоским ΠΈ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ 1200 Π·Π²Π΅Π·Π΄ Π½Π° GitHub.

KendoReact

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π²Ρ‹ΡˆΠ΅ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚Ρ‹Ρ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса React, KendoReact — это ΠΏΡ€Π΅ΠΌΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² с лицСнзиями ΠΎΡ‚ 799 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ².Он ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ…Π²Π°ΡΡ‚Π°Ρ‚ΡŒΡΡ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠΌ списком ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ², Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ входят Microsoft, NASA ΠΈ Sony. И Π²Ρ‹ Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для создания быстрых ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ интСрфСйсом.

Набор ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² создан ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π½Π° React. Π­Ρ‚ΠΎ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ отсутствиС зависимостСй, Π° всС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ для React. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ Π½Π΅ΠΉ ΠΈΠ· KendoReact, Π½Π΅ пСрСзаписывая всю Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ.

Π§Ρ‚ΠΎ ΠΆ, это наш список Π»ΡƒΡ‡ΡˆΠΈΡ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React UI.Π’Π°ΡˆΠ° любимая Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° здСсь?

…

НС Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ участиС Π² нашСм ускорСнном курсС ΠΏΠΎ ΡƒΡΠΊΠΎΡ€Π΅Π½ΠΈΡŽ вашСго сайта WordPress. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… простых исправлСний Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π΄Π°ΠΆΠ΅ Π½Π° 50-80%:

* Π­Ρ‚ΠΎΡ‚ пост содСрТит партнСрскиС ссылки, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ссли Π²Ρ‹ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Π½Π° ΠΎΠ΄Π½Ρƒ ΠΈΠ· ссылок ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΊΡƒΠΏΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚, ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ нСбольшая ΠΏΠ»Π°Ρ‚Π°. НС Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡ‚Π΅ΡΡŒ, Π²Ρ‹ всС Ρ€Π°Π²Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ ΡΡ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½ΡƒΡŽ сумму, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ с вашСй стороны Π½ΠΈΠΊΠ°ΠΊΠΈΡ… Π·Π°Ρ‚Ρ€Π°Ρ‚ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚.

.

20 Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² React UI 2019

Π’ настоящСС врСмя Π½Π°Π±Π»ΡŽΠ΄Π°Π΅Ρ‚ΡΡ массовый рост ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΈ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ большС Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠΉ ΠΎΡ‚ скорости прилоТСния. ИмСнно Ρ‚ΠΎΠ³Π΄Π° ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ‹Ρ‚Π°ΡŽΡ‚ΡΡ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΠΈ. ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ большом количСствС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² Π½Π° Π²Ρ‹Π±ΠΎΡ€ ΠΊΠΎΠΌΠ°Π½Π΄Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°ΠΏΡƒΡ‚Π°Π»Π°ΡΡŒ Π² «парадоксС Π²Ρ‹Π±ΠΎΡ€Π°Β». Π’Ρ‹Π±ΠΎΡ€ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ довольно слоТной Π·Π°Π΄Π°Ρ‡Π΅ΠΉ. Π•Π³ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ бизнСс-Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, Π° Π½Π΅ просто тСхнологичСский.Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ React UI ΡƒΠΆΠ΅ Π·Π°Π²ΠΎΠ΅Π²Π°Π»ΠΈ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ Π² Π²Π΅Π±-бизнСсС ΠΈ ΠΎΠ½Π»Π°ΠΉΠ½-бизнСсС. Они слишком Ρ…ΠΎΡ€ΠΎΡˆΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅. Они ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΎΠ±Π΅Ρ‰Π°Ρ‚ΡŒ Π²Π°ΠΌ красивый интСрфСйс. ΠŸΠΎΠΉΠΌΠΈΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ созданы с ΠΌΡ‹ΡˆΠ»Π΅Π½ΠΈΠ΅ΠΌ, ΠΊΠ°ΡΠ°ΡŽΡ‰ΠΈΠΌΡΡ бизнСса. Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ React UI ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ Π±ΠΎΠ»Π΅Π΅ Π±Ρ‹ΡΡ‚Ρ€ΡƒΡŽ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π²Π΅Π±-страниц, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ использования ΠΊΠΎΠ΄Π° ΠΈ удобство для SEO.

Онсэн UI

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ
заинтСрСсован Π² этой срСдС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ с использованиСм JavaScript ΠΈ HTML5.На
ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅ всС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ стилизованы автоматичСски. Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚
ΠΈ Android, ΠΈ iOS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ исходный ΠΊΠΎΠ΄.

Π•Π³ΠΎ ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ React UI Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ. А с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ руководства Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот инструмСнт. Он Ρ‚Π°ΠΊΠΆΠ΅ фактичСски ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ чистый CSS Π±Π΅Π· повСдСния Javascript.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

Π­Π²Π΅Ρ€Π³Ρ€ΠΈΠ½

Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π°ΠΌΠ±ΠΈΡ†ΠΈΠΎΠ·Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹ Π² сСти с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Evergreen.Он извСстСн ΠΊΠ°ΠΊ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… UI-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² для рСагирования. Π’Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΎΠ½ содСрТит ΠΎΡ‚ΡˆΠ»ΠΈΡ„ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ прямо ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ. Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, это ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° ΠΈ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ смыслС, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° построСна Π½Π° основС ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π° React UI. Π•Π³ΠΎ язык Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса — это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ понравится большС. ΠŸΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅, это ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ с Π²Π΅Π±-прилоТСниями ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ уровня.

Π‘Ρ€Π΅Π΄ΠΈ
Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ инструмСнты ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΎΠ½ содСрТит типографскиС Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈ Ρ†Π²Π΅Ρ‚Π°, основныС
ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, связанныС с функциями.По ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ послСднСго
ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΠΈ, Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ списки, ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связи ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Ρ„Π°ΠΉΠ»ΠΎΠ². ПослС установки
Π²Ρ‹ смоТСтС Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

БСмантичСский интСрфСйс

Когда Ρ‚Ρ‹
Π² поисках Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° React UI, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Π΅ ΠΈ красивыС
ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, сСмантичСский интСрфСйс — это ΠΎΡ‚Π²Π΅Ρ‚. Π­Ρ‚ΠΎ Π² основном ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ для Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° HTML
это Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ. И Ρ‚ΠΎΡ‚ Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ растСт
быстро, Π²Π°ΠΌ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ Π΅Π³ΠΎ возмоТностях.

сСмантичСский
ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ оснащСн тСматичСскими ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹ΠΌΠΈ высокого уровня. Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ…Π²Π°ΡΡ‚Π°Ρ‚ΡŒΡΡ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятным
систСма наслСдования, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π°Ρ Π·Π°Π²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ ваш Π΄ΠΈΠ·Π°ΠΉΠ½. По ΠΌΠ΅Ρ€Π΅ развития вашСго
Один Ρ€Π°Π· ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ Π²Π΅Π·Π΄Π΅.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ своим
ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ. МногиС использовали это Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΈ ΠΊΡ€ΡƒΠΏΠ½ΠΎΠΌΠ°ΡΡˆΡ‚Π°Π±Π½Ρ‹Ρ…
производствСнная срСда. Π‘ΠΎ всСми Π΅Π³ΠΎ основными ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ опрСдСлСния
ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ, элСмСнты, повСдСния, ΠΌΠΎΠ΄ΡƒΠ»ΠΈ ΠΈ прСдставлСния. ВсС это ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΡŒ
Ρ†Π΅Π»ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π° интСрфСйса.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

Набор инструмСнтов React

ОсСнь
люблю React Toolbox, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π° самом Π΄Π΅Π»Π΅ прСдставляСт собой Π½Π°Π±ΠΎΡ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Ρ€Π΅Π°ΠΊΡ†ΠΈΠΈ. Π­Ρ‚Π°
фактичСски Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠ΅Ρ‚ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ Google Material Design. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅
этой ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ React UI стало Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ благодаря самым ΠΌΠΎΠ΄Π½Ρ‹ΠΌ прСдлоТСниям ES6,
Webpack ΠΈ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ CSS. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ с Ρ€Π°Π±ΠΎΡ‡ΠΈΠΌ процСссом Webpack.
Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Π³ΠΈΠ±ΠΊΠΈΠΌ ΠΈ Π»Π΅Π³ΠΊΠΎ настраиваСмым.

ПосСлок
с вашим Π»ΡƒΡ‡ΡˆΠΈΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ React Toolbox, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ отличаСтся ΠΎΡ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ…
Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° UI Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ².Π£ Π½Π΅Π³ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅Π»Π°ΡŽΡ‚
процСсс Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI восток. Π­Ρ‚ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚ΠΎ, Ρ‡Π΅Π³ΠΎ Π²Ρ‹ всС ΠΆΠ΄Π°Π»ΠΈ
Π·Π°.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

Π’Ρ‚ΡƒΠ»ΠΊΠ°

Для
ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ, ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΡΡ‚ΡŒ, Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ ΠΈ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ° — Π½ΠΈΡ‡Ρ‚ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ€Π°Π²Π½ΠΈΡ‚ΡŒΡΡ с
Π’Ρ‚ΡƒΠ»ΠΊΠ°. Π­Ρ‚ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, основанный Π½Π° Ρ€Π΅Π°ΠΊΡ†ΠΈΠΈ Π½Π° UI, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСвосходСн срСди Π΄Ρ€ΡƒΠ³ΠΈΡ….
Π’Π°ΠΌ Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ ΡΠΌΠ΅ΡˆΠΈΠ²Π°Ρ‚ΡŒ, ΡΠΎΡ‡Π΅Ρ‚Π°Ρ‚ΡŒ ΠΈ Π΄Π°ΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²Π΅Ρ‰ΠΈ. БоставныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Grommet. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ, которая Π² основном соотвСтствуСт вашим потрСбностям.

Π­Ρ‚ΠΎ
доступСн, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ спСцификации WCAG 2.1. НастройтС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚
Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° соотвСтствовала Π²Π°ΡˆΠ΅ΠΌΡƒ Ρ‚ΠΈΠΏΡƒ, Ρ†Π²Π΅Ρ‚Ρƒ ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ. Π›ΡƒΡ‡ΡˆΠΈΠΉ
Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ взаимодСйствиСм ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

Π”Π°ΠΆΠ΅
ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΈΠΌΠΈ. Grommet ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ всС устройства, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅
CSS Grid ΠΈ Flexbox. ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ для этих ΡˆΠΈΡ€ΠΎΠΊΠΎΡ„ΠΎΡ€ΠΌΠ°Ρ‚Π½Ρ‹Ρ… дисплССв ΠΈ Π½ΠΎΠ²Ρ‹Ρ…
Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Ρ‹.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

Π§Π΅Ρ€Ρ‚Π΅ΠΆ

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ способ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ интСрфСйсных ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.Blueprint — Π»ΡƒΡ‡ΡˆΠ΅Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ примСнСния согласованного ΠΈ ΡƒΠ½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² Ρ€Π°Π·Π½Ρ‹Ρ… ΠΊΠΎΠΌΠ°Π½Π΄Π°Ρ…. Π­Ρ‚ΠΎ ΡƒΠΆΠ΅ Π±Ρ‹Π»ΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½ΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΈ ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€ΠΎΠ². Π­Ρ‚ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π·Π°Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ ΠΈ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ поддСрТиваСтся. ΠžΡ†Π΅Π½ΠΈΡ‚Π΅ Ρ‚ΠΎΡ‚ Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π³ΠΎΡ‚ΠΎΠ² ΠΊ использованию.

Π‘Ρ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΄Π°ΠΆΠ΅
Π±ΠΎΠ»Π΅Π΅ слоТныС ΠΈ насыщСнныС Π΄Π°Π½Π½Ρ‹ΠΌΠΈ Π²Π΅Π±-интСрфСйсы для Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π­Ρ‚ΠΈ прилоТСния
ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² IE11 ΠΈ соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Blueprint ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ ΠΎΡ‚ Blueprint
3.o ΠΊΠΎΠ³Π΄Π° основныС вСрсии ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ Π²Π΅Π±-страницС. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Π² основном
восстанавливаСт ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ React 15.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

React Desktop

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ
собствСнный Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ React Desktop. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊ
ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Windows 10 ΠΈ macOS Sierra. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ эту структуру ΠΎΡ‡Π΅Π½ΡŒ
Π½Ρƒ, это ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Electron.js ΠΈ NW.js. Но Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ Π²
Π΄Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² любом ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, основанном Π½Π° JavaScript.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

Belle

Belle Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π²Π°ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Ρ€Π΅Π°ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ComboBox, Toggle, Button, TextInput, Select, Card ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρƒ Π½Π΅Π³ΠΎ Π΅ΡΡ‚ΡŒ, Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, этот Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах. Π”Π°ΠΆΠ΅ стили ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π½Π° 2 уровнях. Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, настройтС стили Π±Π°Π·Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· этих стилСй ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎ.Π­Ρ‚ΠΎ ΠΎΠ΄Π½Π° ΠΈΠ· Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² React UI, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ стоит ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ,

Π’ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ
Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΎΠ½ поддСрТиваСтся, Π² Ρ‚ΠΎΠΌ числС Firefox, Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚
Explorer 9, 10 ΠΈ 11, Safari ΠΈ Chrome. Если Π²Π°ΠΌ ΠΎΡ‡Π΅Π½ΡŒ интСрСсно
ИмСя эту Ρ‚Π΅ΠΌΡƒ, Ρ…ΠΎΡ€ΠΎΡˆΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° доступна Π² ΠΏΠ°ΠΊΠ΅Ρ‚Π΅ npm. ПослС Вас
Π΅ΡΡ‚ΡŒ npm, Belle ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ сразу Π² ΠΏΠ°ΠΏΠΊΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

Атласкит

Когда
ΠΈΡ‰Π° Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°ΠΊΠΎΠ½Ρ‡Π΅Π½Π½ΡƒΡŽ срСду рСагирования Π½Π° UI, Atlaskit — это способ
ΠΈΠ΄Ρ‚ΠΈ.Π­Ρ‚ΠΎ Π½Π΅ просто UI-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ ΠΈΠ΄Π΅Ρ‚ с Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. РСакция
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ производятся Π² соотвСтствии с Руководством ΠΏΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ Atlassian. Они Π΅ΡΡ‚ΡŒ
просто ΠΌΠ½ΠΎΠ³ΠΎΡ€Π°Π·ΠΎΠ²Ρ‹ΠΉ, совмСстимый, доступный ΠΈ ΡƒΡ…ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ.

Как Ρ‚Ρ‹
просмотритС Ρ€Π°Π·Π΄Π΅Π» ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ², Ρ‚Π°ΠΌ Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΠ΄Π° ΠΈ
докумСнтация. ВсС ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ Π² ΠΊΠΎΠ΄Π°Ρ… ΠΈ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠ°Ρ… для всСх ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².
Они Ρ‚Π°ΠΊΠΆΠ΅ проходят ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ для использования Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ….

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ
Π·Π°Π²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ настройку прилоТСния React с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Atlaskit-starter.ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, запуститС
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Атласкита.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

Π“Π΅ΡˆΡ‚Π°Π»ΡŒΡ‚

Π“Π΅ΡˆΡ‚Π°Π»ΡŒΡ‚ — это
прСдставлСн ΠΊΠ°ΠΊ инфраструктура ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Ρ€Π΅Π°ΠΊΡ†ΠΈΠΈ, которая обСспСчиваСт соблюдСниС языка Π΄ΠΈΠ·Π°ΠΉΠ½Π° Pinterest.
Π’ основном ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ процСсса общСния ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ.
ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹. Π­Ρ‚ΠΎ просто способ ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ примСнСния основных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.
Π­Ρ‚ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· Pinterest.

Π₯ΠΎΡ€ΠΎΡˆΠ΅Π΅
ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ этой структуры Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³Π΄Π΅ ΡƒΠ³ΠΎΠ΄Π½ΠΎ, ΠΏΠΎΠΊΠ° ΠΎΠ½Π°
ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ глобальноС объСдинСниС ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ CSS ΠΈ ES6.Π’ΠΎΡ‚ Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½
Π² качСствС ΠΌΠ½ΠΎΠ³ΠΎΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π½ΠΎΠ³ΠΎ монорСпозитория Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ ΠΈ
Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ тСсты ΠΎΡ€Π³Π°Π½ΠΈΠ·ΡƒΡŽΡ‚ΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ. Π‘Π»Π΅Π΄ΡƒΠΉΡ‚Π΅ инструкциям ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ
ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ для своих Ρ†Π΅Π»Π΅ΠΉ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Web

Π’ Π·Π°ΠΊΠ°Π·Π΅
Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½Ρ‹Π΅ ΠΈ красивыС ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Material Components Web.
Для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ² это ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈΠΌΠΏΠ»Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½
для создания Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ интСрСсно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ
Ρ„ΠΎΡ€ΠΌΠ°, Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈ Ρ†Π²Π΅Ρ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°. Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ дСмонстрации
Ρ‚Π°ΠΊΠΆΠ΅ Π±Ρ‹Π»ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ.

А для
ваш ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€Π½Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Material
ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ ΠΈ докумСнтация. Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ дСмонстрации
ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ссылки Π½Π° Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ, ΠΊΠΎΠ΄Ρƒ ΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ.

Π Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ
ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ этот Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ оказался Π½Π°Π΄Π΅ΠΆΠ½ΠΎΠΉ систСмой ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²,
руководства ΠΈ инструмСнты.ВсС эти Π²Π°ΠΆΠ½Ρ‹Π΅ элСмСнты ΠΌΠΎΠ³ΡƒΡ‚ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒ
Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ поддСрТиваСтся ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚
ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ ΡƒΠΏΡ€ΠΎΡ‰Π°ΡŽΡ‚ сотрудничСство ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ ΠΈ
Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ². ΠšΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ быстро ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ красивыС издСлия.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

React Foundation

An
Π»Π΅Π³ΠΊΠΎ настраиваСмый ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, React Foundation просто
Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ срСди ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ…. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΊΡ€ΡƒΡ‚ΠΎ
особСнно ΠΈΠ·-Π·Π° своСй простоты.Π§Ρ‚ΠΎ сдСлало Π΅Π³ΠΎ Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€ΡƒΡ‚Ρ‹ΠΌ, Ρ‚Π°ΠΊ это
комбинация Immutable ΠΈ Redux.

Π’ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ
Ρ‡Π°ΡΡ‚ΡŒ Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚Π° — Ρ†Π΅Π»ΡŒ ΠΈΡ… Π·Π°Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΈ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²
ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React. Π­Ρ‚ΠΎ Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ слСдования Π»ΡƒΡ‡ΡˆΠΈΠΌ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°ΠΌ
ΠžΡΠ½ΠΎΠ²Ρ‹. ОсновноС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ удСляСтся Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΠΎΡΡ‚ΠΈ ΠΈ простотС использования. НСкоторыС ΠΈΠ·
ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ чистыС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ Π±Π΅Π· состояния. Π’
Ρ†Π΅Π»ΡŒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ — свСсти ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ использованиС памяти.

Π”ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅: Callout, ButtonGroup,
ΠŸΠ°Π½ΠΈΡ€ΠΎΠ²ΠΎΡ‡Π½Ρ‹Π΅ сухари, Π—Π½Π°Ρ‡ΠΎΠΊ, АккордСон, CloseButton, Π—Π½Π°Ρ‡ΠΎΠΊ, Π‘Π΅Ρ‚ΠΊΠ°, FlexVideo, Π Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ Π½Π° страницы,
ΠŸΡ€ΠΎΠ³Ρ€Π΅ΡΡ, отзывчивая навигация ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» UI

Когда Ρ‚Ρ‹
установит Material UI, Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ Π΅Π³ΠΎ Ρ„Π°ΠΉΠ»Ρ‹ Ρ‡Π΅Ρ€Π΅Π· npm. И Ссли Ρ‚Ρ‹ Π±ΡƒΠ΄Π΅ΡˆΡŒ
ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π΅Π³ΠΎ, Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°ΠΉΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΈΠ·ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ. Они Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ
ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚ΡΡ хозрасчСтными. Π₯ΠΎΡ€ΠΎΡˆΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅
ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° Π½ΠΎΠ²Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ, учитывая ΠΏΡ€Π΅ΠΌΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ‚Π΅ΠΌΡ‹. Π­Ρ‚ΠΈ Ρ‚Π΅ΠΌΡ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ
ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π½Π° ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ Ρ€Ρ‹Π½ΠΊΠ΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Material-UI.

Π‘
сильная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΊΡ€ΡƒΡ‚Ρ‹Ρ… спонсоров, Material UI постоянно развиваСтся.Π­Ρ‚ΠΎ Π»ΠΈΡ†Π΅Π½Π·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ ΠΎΡ‚ MIT, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΆΠ΄Π΅Ρ‚ вас.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Khan React

Π­Ρ‚ΠΎ
framework Π² основном ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ CommonJS-ΡΡ‚ΠΈΠ»ΡŒ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚. Π­Ρ‚ΠΎ позволяСт Π»Π΅Π³ΠΊΠΎ Π±Ρ‹Ρ‚ΡŒ
Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Webpack ΠΈΠ»ΠΈ Browserify. Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΄Ρ€ΡƒΠ³ΠΈΡ…
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Khan React, ΠΈΠΌ Π² основном Π½ΡƒΠΆΠ½Ρ‹ внСшниС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Backbone Mixin,
TeX, TimeAgo ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ
Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π΅Ρ‰Π΅ Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ Π² этот Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΎΠ½ΠΈ Π²Π°ΠΌ понадобятся
ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ нСобходимости.НапримСр, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ внСшниС трСбования. ΠšΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ
Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΡ… Π² свой package.json. Π˜Ρ‚Π°ΠΊ, Ρ…Π²Π°Ρ‚Π°ΠΉΡ‚Π΅ Ρ…Π°Π½Π°
ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React ΠΊΠ°ΠΊ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΎΡ‚ Khan Academy.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

Π Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ

Π Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ
Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ React-Virtualized Π² ваш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚. ВзглянитС Π½Π° это ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ большС
Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΎΡ‚ этого большС ΠΏΠΎΠ»ΡŒΠ·Ρ‹. Когда Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ Π΅Π³ΠΎ установки, ΠΎΠ½ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя использованиС
npm.Π’Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ Ρƒ Π½Π΅Π³ΠΎ Π΅ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ нСсколько зависимостСй, Π² основном управляСмых
NPM. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ зависимости ΠΎΠ΄Π½ΠΎΡ€Π°Π½Π³ΠΎΠ²Ρ‹Ρ… ΡƒΠ·Π»ΠΎΠ².
Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ΠΎΠ² вСрсий. NPM Π½Π΅ установит ΠΈΡ… для вас, Π½ΠΎ
вмСсто этого Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π°ΡŽΡ‰Π΅Π΅ сообщСниС. Π‘ΡƒΠ΄ΡƒΡ‚ инструкции, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½Ρ‹
ΡΠΎΠ±Π»ΡŽΠ΄Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΏΡ€ΠΈ ΠΈΡ… установкС.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ,
ΠΎΠ½ Π½Π°Ρ†Π΅Π»Π΅Π½ Π½Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ послСдних ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² для Android ΠΈ iOS, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ
Π²Π΅Ρ‡Π½ΠΎΠ·Π΅Π»Π΅Π½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹. Π”Π°ΠΆΠ΅ IE + Π² основном поддСрТиваСтся. Π”ΠΎ создания ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²
с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ response-virtualized, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ response-sortable-hoc, response-virtualized-checkbox,
response-infinite-calendar, react-virtualized-tree, response-timeline-9000 ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

Вкань

Вкань Π΅ΡΡ‚ΡŒ
Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Π½Π° основС интСрфСйса ΠΈ рСагирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΎΠΏΡ‹Ρ‚
для Office 365 ΠΈ Office. Π­Ρ‚ΠΎ поддСрТиваСтся Π½Π°Π±ΠΎΡ€ΠΎΠΌ основанных Π½Π° Ρ€Π΅Π°ΠΊΡ†ΠΈΠΈ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Π’Ρ‹ просто ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈ просто ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡΠ΅Ρ‚ΡŒ
ΠΎΠΏΡ‹Ρ‚. Π­Ρ‚ΠΎ Ρ‚ΠΎΠΆΠ΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ использованиС языка офисного Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ЀактичСски,
Вкань 7 всС Π΅Ρ‰Π΅ находится Π² стадии Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

На самом Π΄Π΅Π»Π΅ сущСствуСт пошаговоС руководство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ создании простого прилоТСния React Π½Π° основС инфраструктуры интСрфСйса Fabric react UI.Π˜Π½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ всС эти ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π² свой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚. Но это, скорСС всСго, Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ ΠΎΡ‚ вашСй настройки. ΠŸΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ установкС использовался ΠΏΠ°ΠΊΠ΅Ρ‚, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ Webpack. Π­Ρ‚ΠΎ Ρ€Π°Π·Ρ€Π΅ΡˆΠΈΡ‚ ΠΈΠΌΠΏΠΎΡ€Ρ‚ ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ² NPM Π² вашСм ΠΊΠΎΠ΄Π΅. ΠžΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠΉΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Один ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² React UI, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

РСбасс

РСбасс — это
Π² основном это ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса с ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ построСн Π² соотвСтствии со стилизованной систСмой.Он впСчатляСт своим красиво ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½Ρ‹ΠΌ ΠΈ Π»Π΅Π³ΠΊΠΈΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ
восСмь согласованных, ΠΌΠ½ΠΎΠ³ΠΎΡ€Π°Π·ΠΎΠ²Ρ‹Ρ… ΠΈ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². ВсС ΠΎΠ½ΠΈ построСны с
Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Π΅ΠΌΠΎΡΡ‚ΡŒ ΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ.

Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚
смысл ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ Π΅Π³ΠΎ функциях: восСмь основных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса
слуТит основой для Π΄ΠΈΠ·Π°ΠΉΠ½-систСм, тСматичСских ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… стилСй
ΠΎΡ‚ стилизованной систСмы, Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹Ρ… Π±Π°Π·ΠΎΠ²Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Π΄ΠΈΠ·Π°ΠΉΠ½-систСмы с
ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ, построСнная с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

ΠΎΡΠ½ΠΎΠ²ΠΎΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ этой структуры Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ ΠΎΡΠ½ΠΎΠ²Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ:
нСзамысловатый, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ, ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ, Π³ΠΈΠ±ΠΊΠΈΠΉ, ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ, Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹ΠΉ, тСматичСский,
ΠΈ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ Π΄Π΅Π»ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Π½Ρ‹ΠΉ интСрфСйс

Π‘ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠΌΠΈ
элСмСнтов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса с элСгантным Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, Elemental UI, бСзусловно, являСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ·
Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΠΈΠΉ ΠΎΡ…Π²Π°Ρ‚ UI-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ². ΠŸΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚Π΅ ΠΊ установкС. ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π²Ρ‹ сдСлаСтС
Π·Π΄Π°Π½ΠΈΠ΅, Π²Π°ΠΌ всС Ρ€Π°Π²Π½ΠΎ понадобится Ρ‚Π΅ΠΌΠ° стиля.Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π±Ρ€Π°Ρ‚ΡŒ
Ρ‚Π°ΠΊ называСмая Ρ‚Π΅ΠΌΠ°-элСмСнт ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Π’Π°ΠΊΠΆΠ΅ рСкомСндуСтся ΠΈΠΌΠ΅Ρ‚ΡŒ
написаниС ΠΊΠΎΠ΄Π° Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ для соврСмСнного javascript.

Π Π΅ΡˆΠΈΡ‚Π΅
трСбования, установлСнныС ΠΌΠΈΡ€ΠΎΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Elemental UI. Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹
Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ само ΠΏΠΎ сСбС благодаря Π³ΠΈΠ±ΠΊΠΎΠΉ Ρ‚Π΅ΠΌΠ΅
ΠΈ возмоТности стиля ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

ΠΠ°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ
это ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‚ΠΎΠΆΠ΅ имСя ΠœΠ•ΠΠ¬Π¨Π•. Π›ΡŽΠ±Π»ΡŽ Ρ‚ΠΎΡ‚ Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ это ΠΊΡ€Π°Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹ΠΉ камСнь
сдСлано людьми, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π½Π°ΡŽΡ‚ Ρ‚ΠΎΠ»ΠΊ Π² CSS, JavaScript ΠΈ HTML.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

RSuite

ΠŸΠΎΡΡ‚Ρ€ΠΎΠ΅Π½
Команда UX ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π° HYPERS Front-End, RSuite Π² основном состоит ΠΈΠ· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° React.
Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ. Π­Ρ‚ΠΎ ΠΏΡ€ΠΎΡˆΠ»ΠΎ Ρ‚Ρ€ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… измСнСния. Много ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²
Π² Ρ‚ΠΎΠΌ числС Π±ΠΎΠ³Π°Ρ‚Ρ‹ΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π».

ВсС основныС
ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ RSuite. Π­Ρ‚ΠΎ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ
ΠΈ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для использования Π² соврСмСнных Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Π° Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ…
Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹.

Π§Ρ‚ΠΎ Π΅Ρ‰Π΅,
ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π½Π° сторонС сСрвСра ΠΈ Next.js Π² составС
ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΠ°Ρ срСда Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:
Flow, Electron, TypeScript ΠΈ React 16+. ΠŸΠ΅Ρ€Π΅Π΄ установкой этого
framework, Π² основном ΠΎΠ½ прСдставлСн Π² Π²ΠΈΠ΄Π΅ ΠΏΠ°ΠΊΠ΅Ρ‚Π° NPM. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ RSuite
Π»ΠΈΡ†Π΅Π½Π·ΠΈΡŽ ΠœΠ°ΡΡΠ°Ρ‡ΡƒΡΠ΅Ρ‚ΡΠΊΠΎΠ³ΠΎ тСхнологичСского института, Ρ‚Π΅ΠΌ большС Π²Π°ΠΌ захочСтся этим ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

РСакция MD

React md — это, Π² основном, Π½Π°Π±ΠΎΡ€ Ρ„Π°ΠΉΠ»ΠΎΠ² sass ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React. Он Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ ΠΊΠ°ΠΊ ΠΎΠ΄Π½Π° ΠΈΠ· Π½Π΅ΠΌΠ½ΠΎΠ³ΠΈΡ… структур ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса для рСагирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ.ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π²Π½Π΅Π΄Ρ€ΠΈΡ‚Π΅ это Π² Π΄ΠΈΠ·Π°ΠΉΠ½ вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π§Ρ‚ΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π΄Π°Ρ‚ΡŒ Π²Π°ΠΌ, Ρ‚Π°ΠΊ это Π²Ρ‹Π±ΠΎΡ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΡ… с Sass. Π’ связи с этим ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ сущСствуСт Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ стилСй Sass Π² вопросах, ΠΊΠ°ΡΠ°ΡŽΡ‰ΠΈΡ…ΡΡ встроСнного стиля. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ стилям.

Π”ΠΎ
Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈ Ρ†Π²Π΅Ρ‚Π°, ΠΈΡ… Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ. ДокумСнтация
Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΡ‚ΡŒ основы. Π’Ρ‹ просто ΠΏΡ€Π°Π²Π΄Π°
Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Π²Π°ΠΆΠ½ΠΎΡΡ‚ΡŒ React md для вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒDemo

.

UI Framework Control — ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс Telerik для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² WinForms

Telerik UI для WinForms ΠΎΡ‚ Progress ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ возмоТности форматирования тСкста Π² стилС HTML Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ инфраструктуры. ВсС элСмСнты управлСния Telerik WinForms, содСрТащиС TextPrimitive ΠΈΠ»ΠΈ LightVisualElement, способны ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ тСкст с использованиСм стандартных Ρ‚Π΅Π³ΠΎΠ² HTML, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ , ΠΈ . РСализация ΠΎΡ‡Π΅Π½ΡŒ проста ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятна, особСнно Ссли Π²Ρ‹ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с HTML.

ПовСдСниС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½ΠΎΠ³ΠΎ форматирования Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ ΠΏΡƒΡ‚Π΅ΠΌ добавлСния Ρ‚Π΅Π³Π° ΠΏΠ΅Ρ€Π΅Π΄ тСкстом ΠΈΠ»ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ RadMarkupEditor.

RadMarkupEditor — это WYSIWYG-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ свойств тСкста ΠΈ ΠΌΠ΅Ρ‚ΠΎΠΊ. Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ прСдоставляСт ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный ΠΈ простой Π² использовании интСрфСйс Π»Π΅Π½Ρ‚Ρ‹ ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ Π²ΠΎ врСмя Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, Ρ‚Π°ΠΊ ΠΈ Π²ΠΎ врСмя выполнСния. Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ Π½Π΅ являСтся ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ элСмСнтом управлСния; скорСС, Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ тСкста Π² стилС HTML доступно Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для форматирования тСкстовых элСмСнтов Π² Π½Π°ΡˆΠΈΡ… элСмСнтах управлСния.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Π΅ Ρ‚Π΅Π³ΠΈ HTML:

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *