stylobate-islands - npm Package Compare versions

Comparing version 0.11.0 to 0.11.1

button/skin-islands-button_checked.md

@@ -63,4 +63,6 @@ ---
 >
-> И то же самое, только с радиобатонами вместо чекбоксов, и используя другой тип кнопок:
->
+> <div class="example:toggler"></div>
+
+И то же самое, только с радиобатонами вместо чекбоксов, и используя другой тип кнопок:
+
 > <label class="toggler">
@@ -84,5 +86,3 @@ >     <input class="toggler-controller" type="radio" name="toggler1" checked="checked">
 > </label>
->
-> <div class="example:toggler"></div>
 
 Видно, что для CSS-only варианта приходится использовать чуть более сложную html-структуру, но зато всё это дело получается очень гибким и это хороший пример того, как можно сверстать один и тот же блок на разной HTML-структуре и логике, но используя один скин.

button/skin-islands-button.md

@@ -101,3 +101,3 @@ ---
 > <a class="action-button" href="#x">
->   <span class="button-content">Кнопка ссылкой</span>
+>     <span class="button-content">Кнопка ссылкой</span>
 > </a>
@@ -104,0 +104,0 @@ >

group/skin-islands-group.md

@@ -36,7 +36,4 @@ ---
 
-Параметром к нему передаётся селектор элемента, к которому нужно применять соответствующий скин:
+Параметром к нему передаётся селектор элемента, к которому нужно применять соответствующий скин, например, если реализовать радиогруппу на инпутах:
 
-
-> Радиогрупа на инпутах. Нужно таргетить не сами элементы, а внутренности.
->
 > <p class="group">
@@ -63,4 +60,6 @@ >     <label class="toggler">
 >
-> Или маленькие псевдо-чекбоксы на инпутах:
->
+> <div class="example:nested-group"></div>
+
+Оно же, но с чекбоксами и на псевдокнопках:
+
 > <p class="group">
@@ -86,4 +85,2 @@ >     <label class="toggler">
 > </p>
->
-> <div class="example:nested-group"></div>
 
@@ -90,0 +87,0 @@ В случаях когда элементы группы лежат в контейнере в неверном порядке (скажем, при использовании `float` и в некоторых иных случаях), можно задать соответствующим элементам групп нужные скины раздельно:

isle/skin-islands-isle.md

@@ -6,3 +6,3 @@ ---
 
-Наш герой, белый блок с тенью. Остров можно приземлить, а можно оставить парящим (параметр `fly`).
+Стандартный блок, отличается белым фоном и тонкой тенюшкой.
 
@@ -13,6 +13,3 @@ skin: isle
 >
->     .isle
->       kind: block
->       skin: isle
-> {:.styl}
+> <div class="example:isle"></div>
 
@@ -25,6 +22,25 @@ Летающий блок создан для модальных окон, выпадающих списков и прочих элементов верхнего слоя, в остальных случаях следует обходиться обычным островом.
 >
->     .flying-isle
->       kind: block
->       skin: isle fly
-> {:.styl}
+> <div class="example:flying-isle"></div>
 
+Для отступов контента можно использовать специальный параметр:
+
+    skin: isle (-content '&-content')
+
+> <div class="island">
+>     <div class="island-content">
+>         <p>Hello, there!</p>
+>         <p>I'm a normal island.</p>
+>     </div>
+> </div>
+>
+> <div class="example:island"></div>
+
+Этот параметр также можно настроить, задав маленький отступы параметром `small`:
+
+    skin: isle (-content '&' small)
+
+> <div class="islet">And I'm a small one!</div>
+>
+> <div class="example:islet"></div>
+
+Также в этом примере можно увидеть, что подскин контента можно применять прямо к самому блоку.

package.json

 {
   "name": "stylobate-islands",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "author": "Roman Komarov <[e-mail]> (http://kizu.ru/en/)",
@@ -5,0 +5,0 @@ "licence": "MIT",

tabs/skin-islands-tabs.md

@@ -55,3 +55,3 @@ ---
 > <div class="flying-isle">
->     <div class="isle-content">
+>     <div class="island-content">
 >         <div class="tabs">
@@ -58,0 +58,0 @@ >             <a class="tabs-item tabs-item_selected">Войти</a

No alert changes

Improved metrics

Total package byte prevSize

76025

increased by1.08%

No dependency changes