flystyles - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

docs/_docs/components/formElements.md

@@ -78,7 +78,7 @@ ---
 
-Set heights using classes like `.Input--{size}`. Combine with `u-fontSize-{size}` utils to have a better results.
+Set heights using classes like `.Input--{size}`. Combine with `fontSize-{size}` utils to have a better results.
 
 {% example html %}
 <div class='FormGroup'>
-  <label class='Label u-fontSize-xs'>Extra small input</label>
+  <label class='Label fontSize-xs'>Extra small input</label>
   <input type='text' class='Input Input--xs' placeholder='extra-small input'/>
@@ -88,3 +88,3 @@ </div>
 <div class='FormGroup'>
-  <label class='Label u-fontSize-sm'>Small input</label>
+  <label class='Label fontSize-sm'>Small input</label>
   <input type='email' class='Input Input--sm' placeholder='small input'/>
@@ -99,3 +99,3 @@ </div>
 <div class='FormGroup'>
-  <label class='Label u-fontSize-lg'>Large Select</label>
+  <label class='Label fontSize-lg'>Large Select</label>
   <select class="Select Select--lg" id="exampleSelect1">
@@ -111,3 +111,3 @@ <option>1</option>
 <div class='FormGroup'>
-  <label class='Label u-fontSize-xl'>Extra large field</label>
+  <label class='Label fontSize-xl'>Extra large field</label>
   <input type='text' class='Input Input--xl' placeholder='extra-large input'/>
@@ -114,0 +114,0 @@ </div>

docs/_docs/components/grid.md

@@ -12,7 +12,7 @@ ---
 
-Start by adding an element with a class of `.GridRow`. This will create a horizontal block to contain vertical columns. Then add elements with a .GridColumn class within that row. Specify the widths of each column in each media query with the `.GridColumn--xs-*`, `.GridColumn--sm-*`, `.GridColumn--md-*`, `.GridColumn--lg-*` and `.GridColumn--xs-*` classes.
+Start by adding an element with a class of `.GridRow`. This will create a horizontal block to contain vertical columns. Then add elements with a .GridColumn class within that row. Specify the widths of each column in each media query with the `.GridColumn--fromXSmall-*`, `.GridColumn--fromSmall-*`, `.GridColumn--fromMedium-*`, `.GridColumn--fromLarge-*` and `.GridColumn--fromXSmall-*` classes.
 
 ##### Example: Mobile and desktop
 
-Don’t want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `GridColumn--xs-*` and `.GridColumn--md-*` to your columns. See the example below for a better idea of how it all works.
+Don’t want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `GridColumn--fromXSmall-*` and `.GridColumn--fromMedium-*` to your columns. See the example below for a better idea of how it all works.
 
@@ -23,4 +23,4 @@ <div class="exampleView">
 <div class="GridRow">
-  <div class="GridColumn GridColumn--xs-12 GridColumn--md-8">.GridColumn--xs-12 .GridColumn--md-8</div>
-  <div class="GridColumn GridColumn--xs-6 GridColumn--md-4">.GridColumn--xs-6 .GridColumn--md-4</div>
+  <div class="GridColumn GridColumn--fromXSmall-12 GridColumn--fromMedium-8">.GridColumn--fromXSmall-12 .GridColumn--fromMedium-8</div>
+  <div class="GridColumn GridColumn--fromXSmall-6 GridColumn--fromMedium-4">.GridColumn--fromXSmall-6 .GridColumn--fromMedium-4</div>
 </div>
@@ -30,5 +30,5 @@
 <div class="GridRow">
-  <div class="GridColumn GridColumn--xs-6 GridColumn--md-4">.GridColumn--xs-6 .GridColumn--md-4</div>
-  <div class="GridColumn GridColumn--xs-6 GridColumn--md-4">.GridColumn--xs-6 .GridColumn--md-4</div>
-  <div class="GridColumn GridColumn--xs-6 GridColumn--md-4">.GridColumn--xs-6 .GridColumn--md-4</div>
+  <div class="GridColumn GridColumn--fromXSmall-6 GridColumn--fromMedium-4">.GridColumn--fromXSmall-6 .GridColumn--fromMedium-4</div>
+  <div class="GridColumn GridColumn--fromXSmall-6 GridColumn--fromMedium-4">.GridColumn--fromXSmall-6 .GridColumn--fromMedium-4</div>
+  <div class="GridColumn GridColumn--fromXSmall-6 GridColumn--fromMedium-4">.GridColumn--fromXSmall-6 .GridColumn--fromMedium-4</div>
 </div>
@@ -38,4 +38,4 @@
 <div class="GridRow">
-  <div class="GridColumn GridColumn--xs-6">.GridColumn--xs-6</div>
-  <div class="GridColumn GridColumn--xs-6">.GridColumn--xs-6</div>
+  <div class="GridColumn GridColumn--fromXSmall-6">.GridColumn--fromXSmall-6</div>
+  <div class="GridColumn GridColumn--fromXSmall-6">.GridColumn--fromXSmall-6</div>
 </div>
@@ -52,3 +52,3 @@ {% endexample %}
 
-<div class="GridRow GridRow--sm-1 GridRow--md-2 GridRow--lg-4">
+<div class="GridRow GridRow--fromSmall-1 GridRow--fromMedium-2 GridRow--fromLarge-4">
   <div class="GridColumn">.GridColumn</div>
@@ -55,0 +55,0 @@ <div class="GridColumn">.GridColumn</div>

docs/_docs/utilities/border.md

@@ -8,12 +8,12 @@ ---
 
-Add borders to left or right, `.u-borderLeft` or `.u-borderRight`.
+Add borders to left or right, `.borderLeft` or `.borderRight`.
 
 <div class='exampleView'>
 {% example html %}
-<span class='u-borderLeft'>.u-borderLeft</span>
-<span class='u-borderRight'>.u-borderRight</span>
+<span class='borderLeft'>.borderLeft</span>
+<span class='borderRight'>.borderRight</span>
 {% endexample %}
 </div>
 
-Also we have the resposive version, acording to every breakpoint: `.u-{size}-{borderLeft|borderRight}`.
+Also we have the resposive version, acording to every breakpoint: `.{size}-{borderLeft|borderRight}`.
 
@@ -24,16 +24,16 @@ <div class='exampleView'>
 <p>
-    <span class='u-xs-borderLeft'>Border left on all viewport sizes</span>
-    <span class='u-xs-borderRight'>Border right on all viewport sizes</span>
+    <span class='fromXSmall-borderLeft'>Border left on all viewport sizes</span>
+    <span class='fromXSmall-borderRight'>Border right on all viewport sizes</span>
 </p>
 
 <p>
-    <span class='u-md-borderLeft'>Border left from medium size</span>
-    <span class='u-md-borderRight'>Border right from medium size</span>
+    <span class='fromMedium-borderLeft'>Border left from medium size</span>
+    <span class='fromMedium-borderRight'>Border right from medium size</span>
 </p>
 
 <p>
-    <span class='u-xl-borderLeft'>Border left from extra-large size</span>
-    <span class='u-xl-borderRight'>Border right from extra-large size</span>
+    <span class='fromXLarge-borderLeft'>Border left from extra-large size</span>
+    <span class='fromXLarge-borderRight'>Border right from extra-large size</span>
 </p>
 {% endexample %}
 </div>

docs/_docs/utilities/display.md

@@ -11,15 +11,15 @@ ---
 ```scss
-.u-display-block {
+.display-block {
   display: block !important;
 }
 
-.u-display-inlineBlock {
+.display-inlineBlock {
   display: inline-block !important;
 }
 
-.u-display-inline {
+.display-inline {
   display: inline !important;
 }
 
-.u-display-table {
+.display-table {
   display: table !important;
@@ -29,3 +29,3 @@ width: 100%;
 
-.u-display-table--padded {
+.display-table--padded {
   table-layout: fixed;
@@ -36,3 +36,3 @@ border-spacing: $spacer;
 
-.u-display-tableCell {
+.display-tableCell {
   display: table-cell !important;
@@ -39,0 +39,0 @@ }

docs/_docs/utilities/float.md

@@ -8,14 +8,14 @@ ---
 
-These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float property. !important is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system: `.u-{size}-float-{left|none|right}`.
+These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float property. !important is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system: `.{size}-float-{left|none|right}`.
 
 {% example html %}
-<div class="u-xs-float-left">Float left on all viewport sizes</div><br>
-<div class="u-xs-float-right">Float right on all viewport sizes</div><br>
-<div class="u-xs-float-none">Don't float on all viewport sizes</div><br>
+<div class="fromXSmall-float-left">Float left on all viewport sizes</div><br>
+<div class="fromXSmall-float-right">Float right on all viewport sizes</div><br>
+<div class="fromXSmall-float-none">Don't float on all viewport sizes</div><br>
 
-<div class="u-sm-float-right">Float right on viewports sized SM (small) or wider</div><br>
-<div class="u-md-float-right">Float right on viewports sized MD (medium) or wider</div><br>
-<div class="u-lg-float-right">Float right on viewports sized LG (large) or wider</div><br>
-<div class="u-xl-float-right">Float right on viewports sized XL (extra-large) or wider</div>
+<div class="fromSmall-float-right">Float right on viewports sized SM (small) or wider</div><br>
+<div class="fromMedium-float-right">Float right on viewports sized MD (medium) or wider</div><br>
+<div class="fromLarge-float-right">Float right on viewports sized LG (large) or wider</div><br>
+<div class="fromXLarge-float-right">Float right on viewports sized XL (extra-large) or wider</div>
 
 {% endexample %}

docs/_docs/utilities/helpers.md

@@ -8,6 +8,6 @@ ---
 
-Helper classes, not related with a concrete CSS property, for example `u-clearfix`.
+Helper classes, not related with a concrete CSS property, for example `clearfix`.
 
 ##### Clearfix
 
-Clears all floatings and ensure to start in a new line. Yo can use as a CSS class `.u-clearfix` or as a mixins `@include clearfix`.
+Clears all floatings and ensure to start in a new line. Yo can use as a CSS class `.clearfix` or as a mixins `@include clearfix`.

docs/_docs/utilities/spacing.md

@@ -10,3 +10,3 @@ ---
 
-The classes are named using the format: `.u-{property}-{size}`.
+The classes are named using the format: `.{property}-{size}`.
 
@@ -32,3 +32,3 @@ Where `property` is one of:
 {% example html %}
-<span class="u-margin-0 u-padding-xs">.u-margin-0 .u-padding-xs</span>
+<span class="margin-0 padding-xs">.margin-0 .padding-xs</span>
 {% endexample %}

docs/_docs/utilities/text.md

@@ -10,9 +10,9 @@ ---
 
-Utility classes to change font weight `.u-fontWeight-{light|normal|semiBold|bold}`.
+Utility classes to change font weight `.fontWeight-{light|normal|semiBold|bold}`.
 
 {% example html %}
-<p class='u-fontWeight-light'>.u-fontWeight-light</p>
-<p class='u-fontWeight-normal'>.u-fontWeight-normal</p>
-<p class='u-fontWeight-semiBold'>.u-fontWeight-semiBold</p>
-<p class='u-fontWeight-bold'>.u-fontWeight-bold</p>
+<p class='fontWeight-light'>.fontWeight-light</p>
+<p class='fontWeight-normal'>.fontWeight-normal</p>
+<p class='fontWeight-semiBold'>.fontWeight-semiBold</p>
+<p class='fontWeight-bold'>.fontWeight-bold</p>
 {% endexample %}
@@ -32,10 +32,10 @@
 
-Utility classes to change font size `.u-fontSize-{xs|sm|md|lg|xl}`.
+Utility classes to change font size `.fontSize-{xs|sm|md|lg|xl}`.
 
 {% example html %}
-<p class='u-fontSize-xs'>.u-fontSize-xs</p>
-<p class='u-fontSize-sm'>.u-fontSize-sm</p>
-<p class='u-fontSize-md'>.u-fontSize-md</p>
-<p class='u-fontSize-lg'>.u-fontSize-lg</p>
-<p class='u-fontSize-xl'>.u-fontSize-xl</p>
+<p class='fontSize-xs'>.fontSize-xs</p>
+<p class='fontSize-sm'>.fontSize-sm</p>
+<p class='fontSize-md'>.fontSize-md</p>
+<p class='fontSize-lg'>.fontSize-lg</p>
+<p class='fontSize-xl'>.fontSize-xl</p>
 {% endexample %}
@@ -56,8 +56,8 @@
 
-Change text yo uppercase, lowercase or capitalize first letter. Use: `.u-textTransform-{lowercase|uppercase|capitalize}`
+Change text yo uppercase, lowercase or capitalize first letter. Use: `.textTransform-{lowercase|uppercase|capitalize}`
 
 {% example html %}
-<span class='u-textTransform-lowercase'>LOWERCASE</span>
-<span class='u-textTransform-uppercase'>uppercase</span>
-<span class='u-textTransform-capitalize'>capitalize</span>
+<span class='textTransform-lowercase'>LOWERCASE</span>
+<span class='textTransform-uppercase'>uppercase</span>
+<span class='textTransform-capitalize'>capitalize</span>
 {% endexample %}
@@ -67,8 +67,8 @@
 
-Simply set text alignment: `u-textAlign-{left|center|right}`.
+Simply set text alignment: `textAlign-{left|center|right}`.
 
 {% example html %}
-<p class='u-textAlign-left'>.u-textAlign-left</p>
-<p class='u-textAlign-center'>.u-textAlign-center</p>
-<p class='u-textAlign-right'>.u-textAlign-right</p>
+<p class='textAlign-left'>.textAlign-left</p>
+<p class='textAlign-center'>.textAlign-center</p>
+<p class='textAlign-right'>.textAlign-right</p>
 {% endexample %}
@@ -79,9 +79,9 @@
 
-For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system: `.u-{size}-textAlign-{left-center-right}`.
+For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system: `.{size}-textAlign-{left-center-right}`.
 
 {% example html %}
-<p class='u-xs-textAlign-center'>Center text on all viewport sizes.</p>
-<p class='u-md-textAlign-center'>Center text on viewports sized MD (medium) or wider.</p>
-<p class='u-lg-textAlign-center'>Center text on viewports sized LG (large) or wider.</p>
-<p class='u-xl-textAlign-center'>Center text on viewports sized XL (extra-large) or wider.</p>
+<p class='fromXSmall-textAlign-center'>Center text on all viewport sizes.</p>
+<p class='fromMedium-textAlign-center'>Center text on viewports sized MD (medium) or wider.</p>
+<p class='fromLarge-textAlign-center'>Center text on viewports sized LG (large) or wider.</p>
+<p class='fromXLarge-textAlign-center'>Center text on viewports sized XL (extra-large) or wider.</p>
 {% endexample %}

docs/_docs/utilities/visibility.md

@@ -8,10 +8,13 @@ ---
 
-Visibility classes let you show or hide elements based on screen size or device orientation, use: `u-{breakpoint}{Up|Down}-hidden`.
-For example, `u-lgUp-hidden` will hide the element from large size, that is, when the viewport width is bigger than 992px.
+Visibility classes let you show or hide elements based on screen size or device orientation.
+You can use it from a breakpoint, or up to a breakpoint, for example:
+`fromSmall-hidden` or `upToSmall-hidden`.
 
+For example, `fromLarge-hidden` will hide the element from large size, that is, when the viewport width is bigger than 992px.
 
+
 {% example html %}
-<span class='u-mdUp-hidden'>Hidden on medium up</span>
-<span class='u-smDown-hidden'>Hidden on small down</span>
-<span class='u-lgUp-hidden'>Hidden on large up</span>
+<span class='fromMedium-hidden'>Hidden on medium up</span>
+<span class='upToSmall-hidden'>Hidden on small down</span>
+<span class='fromLarge-hidden'>Hidden on large up</span>
 {% endexample %}

docs/css-guidelines.md

@@ -128,3 +128,3 @@ ---
 
-Syntax: `<componentName>[-descendentName][--modifierName]`
+Syntax: `<ComponentName>[-descendentName][--modifierName]`
 
@@ -149,10 +149,10 @@ We use a BEM-like naming convention., meaning Block, Element, Modifier, is a front-end methodology coined by developers working at Yandex. Whilst BEM is a complete methodology, here we are only concerned with its naming convention. Further, the naming convention here only is BEM-like; the principles are exactly the same, but the actual syntax differs slightly.
 
-The component's name must be written in camel case.
+The component's name must be written in upper camel case.
 
 ```css
-.myComponent { /* … */ }
+.MyComponent { /* … */ }
 ```
 
 ```html
-<article class="myComponent">
+<article class="MyComponent">
   …
@@ -162,3 +162,3 @@ </article>
 
-#### componentName--modifierName
+#### ComponentName--modifierName
 
@@ -173,15 +173,14 @@ A component modifier is a class that modifies the presentation of the base
 /* Core button */
-.button { /* … */ }
+.Button { /* … */ }
 /* Default button style */
-.button--default { /* … */ }
+.Button--default { /* … */ }
 ```
 
 ```html
-<button class="button button--default" type="button">…</button>
+<button class="Button Button--default" type="button">…</button>
 ```
 
-#### componentName-descendentName
+#### ComponentName-descendentName
 
-A component descendent is a class that is attached to a descendent node of a
-component. It's responsible for applying presentation directly to the
+A component descendent is a class that is attached to a descendent node of a component. It's responsible for applying presentation directly to the
 descendent on behalf of a particular component. Descendent names must be
@@ -191,8 +190,8 @@ written in camel case.
 ```html
-<article class="tweet">
-  <header class="tweet-header">
-    <img class="tweet-avatar" src="{{src}}" alt="{{alt}}">
+<article class="Tweet">
+  <header class="Tweet-header">
+    <img class="Tweet-avatar" src="{{src}}" alt="{{alt}}">
     …
   </header>
-  <div class="tweet-bodyText">
+  <div class="Tweet-bodyText">
     …
@@ -203,7 +202,6 @@ </div>
 
-#### componentName.is-stateOfComponent
+#### ComponentName.is-stateOfComponent
 
-Use `is-stateName` to reflect changes to a component's state. The state name
-must be camel case. **Never style these classes directly; they should always be
-used as an adjoining class.**
+Use `is-stateName` to reflect changes to a component's state. The state name must be camel case.
+**Never style these classes directly; they should always be used as an adjoining class.**
 
@@ -215,8 +213,8 @@ This means that the same state names can be used in multiple contexts, but
 ```css
-.tweet { /* … */ }
-.tweet.is-expanded { /* … */ }
+.Tweet { /* … */ }
+.Tweet.is-expanded { /* … */ }
 ```
 
 ```html
-<article class="tweet is-expanded">
+<article class="Tweet is-expanded">
   …
@@ -228,18 +226,16 @@ </article>
 
-Low-level structural and positional traits. Utilities can be applied directly
-to any element within a component.
+Low-level structural and positional traits. Utilities can be applied directly to any element within a component.
 
-Syntax: `u-<utilityName>-[sm-|md-|lg-]`
+Syntax: `<property>-<value>-[sm|md|lg]`
 
-#### u-utilityName
+#### property-value-size
 
-Utilities must use a camel case name. What follows is an example of how various
-utilities can be used to create a simple structure within a component.
+Utilities must use a camel case name. What follows is an example of how various utilities can be used to create a simple structure within a component.
 
 ```html
-<div class="u-cf">
-  <a class="u-float-left" href="{{url}}">
-    <img class="u-display-block" src="{{src}}" alt="">
+<div class="clearfix">
+  <a class="float-left" href="{{url}}">
+    <img class="display-block" src="{{src}}" alt="">
   </a>
-  <p class="u-textAlign-sm-center u-textAlign-md-left">
+  <p class="fromSmallSize-textAlign-center fromMediumSize-textAlign-left">
     …
@@ -252,7 +248,7 @@ </p>
 
-Certain utilities have responsive variants using the patterns: `u-<breakpoint>-<property>-<value>`.
+Certain utilities have responsive variants using the patterns: `from<breakpoint>-<property>-<value>`. For examle: `fromMedium-textAlign-center`.
 
 #### Visibility utilities
 
-Syntax: `u-[sm|smUp|smDown]|[lg|lgUp|lgDown]|...]-hidden`
+Syntax: `fromSmallSize-hidden` or `upToLargeSize-hidden`.
 
@@ -316,5 +312,5 @@
 
-```css
+```scss
 
-.component {
+.Component {
   ...
@@ -326,3 +322,3 @@ }
 // Variation
-.component--variation {
+.Component--variation {
   ...
@@ -334,3 +330,3 @@ }
 
-```css
+```scss
 .selector {
@@ -337,0 +333,0 @@ // why z-index is used?

package.json

 {
   "name": "flystyles",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Flywire UI Framework",
@@ -28,3 +28,2 @@ "author": "Javier Arques <[e-mail]>",
     "browser-sync": "^2.16.0",
-    "child_process": "^1.0.2",
     "clean-css": "^3.4.19",
@@ -31,0 +30,0 @@ "node-sass": "^3.8.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

317955

increased by5.76%

Dev dependency count

5

decreased by-16.67%

Number of package files

90

increased by3.45%

Lines of code

1996

increased by10.95%

No dependency changes