flystyles - npm Package Compare versions

Comparing version 1.1.9 to 1.1.10

docs.js

 // Create a Browsersync instance
-const bs = require("browser-sync").create();
+const bs = require('browser-sync').create();
 const exec = require('child_process').exec;
+const buildPath = './_site';
 
+// exec jekyll build for the first time
+exec('bundle exec jekyll build', (error, stdout, stderr) => {
+  if (error) {
+    console.error(`${error}`);
+    return;
+  }
+  console.log(`${stdout}`);
+  console.log(`${stderr}`);
 
+  // Now init the Browsersync server
+  bs.init({
+    server: buildPath
+  });
+});
+
 // Provide a callback to capture ALL events to CSS
 // files - then filter for 'change' and reload all
 // css files on the page.
-bs.watch("./**/*.scss", function(event, file) {
+bs.watch('./**/*.scss', (event, file) => {
 
-  if (event === "change") {
-    //bs.reload("*.css");
-    var build = exec('bundle exec jekyll build');
+  if (event === 'change') {
+    //bs.reload('*.css');
+    const build = exec('bundle exec jekyll build');
 
-    build.stdout.on('data', function(data) {
+    build.stdout.on('data', (data) => {
       console.log(data);
-      bs.reload("*.css");
+      bs.reload('*.css');
     });
 
-    build.stderr.on('data', function(data) {
-      console.log(data);
-    });
-
-    build.on('close', function(code) {
-      console.log(code);
-    });
+    build.stderr.on('data', (data) => console.log(data));
   }
@@ -31,8 +40,8 @@ });
 // Provide a callback to capture ALL events to HTML
-bs.watch(["./docs/**/*.html", "./docs/**/*.md"], function(event, file) {
+bs.watch(['./docs/**/*.md'], (event, file) => {
 
-  if (event === "change") {
-    var build = exec('bundle exec jekyll build');
+  if (event === 'change') {
+    const build = exec('bundle exec jekyll build');
 
-    build.stdout.on('data', function(data) {
+    build.stdout.on('data', (data) => {
       console.log(data);
@@ -42,15 +51,4 @@ bs.reload();
 
-    build.stderr.on('data', function(data) {
-      console.log(data);
-    });
-
-    build.on('close', function(code) {
-      console.log(code);
-    });
+    build.stderr.on('data', (data) => console.log(data));
   }
 });
-
-// Now init the Browsersync server
-bs.init({
-  server: './_site'
-});

docs/_docs/components/buttons.md

@@ -60,7 +60,2 @@ ---
 <button class="Button Button--outlineWhite" type="button">white</button>
-{% endexample %}
-</div>
-
-
-{% example html %}
 <button class="Button Button--outlinePrimary" type="button">primary</button>
@@ -71,5 +66,4 @@ <button class="Button Button--outlineSecondary" type="button">secondary</button>
 {% endexample %}
+</div>
 
-
-
 ##### Disabled Button
@@ -76,0 +70,0 @@

docs/framework.md

@@ -11,11 +11,5 @@ ---
 
-The project can be installed via Bower, npm or rails indicating the git repository and the release (tag/version).
-The repository is private, so you will need a ssh key and permissions to see the repository.
+The project can be installed via npm or yarn.
 
-### bower
 
-```bash
-bower install [e-mail]:peertransfer/flystyles.git#0.0.1
-```
-
 ### npm
@@ -31,11 +25,3 @@ ```bash
 
-### rails
 
-The project has a gem, so just include in Gemfile
-
-```bash
-gem 'flystyles', git: 'https://github.com/peertransfer/flystyles.git'
-```
-and execute `bundle`.
-
 # Build commands
@@ -71,3 +57,3 @@
 
-To create the build files (in `/docs/dist` folder) execute:
+To create the build files (in `_site` folder) execute:
 
@@ -99,3 +85,3 @@ ```bash
 title: Buttons
-description:
+description: Button component description
 category: components
@@ -116,43 +102,45 @@ ---
 
-### Deploy
+#### Deploy
 
-Deployed to Github Pages.
+For the moment, the project is hosted on Netlifly [flystyles.netlify.com](http://flystyles.netlify.com/). The project is deployed whenever you push to master automatically.
 
+#### Create a new version
+
+To create a new version you have to use the npm command [version](https://docs.npmjs.com/cli/version). It will generate the new dist files, add a release tag and push to master.
+
+```bash
+npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]
+```
+
 ## Architecture
 
 ```
-scss/
+src/
 |
-|– mixins/
-|   |– _responsive.scss   # Responsive mixins
-|   |– _typography.scss   # Typography mixins
-|   …                     # Etc
+|- styles
 |
-|– base/
-|   |– _normalize.scss    # Reset/normalize
-|   |– _typography.scss   # Typography rules
-|   |- _animations.scss   # CSS Animations
-|   …                     # Etc.
+|   – mixins/
+|      |– _responsive.scss   # Responsive mixins
+|      |– _typography.scss   # Typography mixins
+|      …                     # Etc
 |
+|   – base/
+|       |– _normalize.scss    # Reset/normalize
+|       |– _typography.scss   # Typography rules
+|       |- _animations.scss   # CSS Animations
+|       …                     # Etc.
 |
-|– utilities/
-|   |– _spacing.scss      # Margins, paddings, ...
-|   |– _responsive.scss   # Brakpoints visibility classes
-|   …                     # Etc.
+|   – utilities/
+|       |– _spacing.scss      # Margins, paddings, ...
+|       |– _responsive.scss   # Brakpoints visibility classes
+|       …                     # Etc.
 |
-|– themes/
-|   |– _theme.scss        # Default theme
-|   |– _admin.scss        # Admin theme
-|   …                     # Etc.
+|- components/
+|   |– Button/_Button.scss    # Buttons
+|   |– Grid/_Grid.scss        # Grid
+|   …                         # Etc.
 |
-|
-components/
-|
-|   |– button/_button.scss  # Buttons
-|   |– grid/_grid.scss      # Grid
-|   …                       # Etc.
+|- _config.scss           # Flystyles variables
+|– main.scss              # Main Sass file
 
- - _config.scss           # Flystyles variables
- – main.scss              # Main Sass file
-
 ```
@@ -159,0 +147,0 @@

package.json

 {
   "name": "flystyles",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "description": "Flywire UI Framework",
@@ -5,0 +5,0 @@ "author": "Javier Arques <[e-mail]>",

README.md

@@ -5,27 +5,18 @@ # Flystyles
 
-The project can be installed via Bower, npm or rails indicating the git repository and the release (tag/version).
-The repository is private, so you will need a ssh key and permissions to see the repository.
+The project can be installed via npm or yarn.
 
-#### bower
 
+### npm
 ```bash
-bower install [e-mail]:peertransfer/flystyles.git#0.0.1
+npm install flystyles
 ```
 
-#### npm
+### yarn
 ```bash
-npm install [e-mail]:peertransfer/flystyles.git#v0.0.1
+yarn add flystyles
 ```
 
-#### rails
 
-The project has a gem, so just include in Gemfile
+# Build commands
 
-```bash
-gem 'flystyles', git: '[e-mail]:peertransfer/flystyles.git', 'tag': 'v0.0.4'
-```
-and execute `bundle`.
-
-## Build commands
-
 A compiled version of the CSS is provided in `/dist` folder.
@@ -35,2 +26,3 @@ To compile a new version:
 Install dependencies:
+
 ```bash
@@ -41,2 +33,3 @@ npm install
 Compile CSS:
+
 ```bash
@@ -46,9 +39,10 @@ npm run build
 
-## Documentation
+# Documentation
 
 All components in flysyles are documented in `/docs` folder. The styleguide is created with Jekyll.
 
-### Installation
+## Installation
 
-First go to `/docs` folder and install jekyll:
+Docs are made using [Jekyll](https://jekyllrb.com/).
+To install Jekyll:
 
@@ -59,3 +53,3 @@ ```bash
 
-To create the build files (in `/dist` folder) execute:
+To create the build files (in `_site` folder) execute:
 
@@ -72,5 +66,5 @@ ```bash
 
-### Working
+## Working
 
-#### Styleguide Driven Development
+### Styleguide Driven Development
 
@@ -81,3 +75,3 @@ Styleguide Driven Development (SDD) is a practice that encourages the separation of UX, Design & Frontend from Backend concerns. This is achieved by developing the UI separately in a styleguide.
 
-#### Creating new components
+### Creating new components
 
@@ -89,3 +83,3 @@ To document a new component, a new markdown file has to be added to `src/_docs/components`. This file has a [Front Matter](https://jekyllrb.com/docs/frontmatter/) where you have to specify the category and the name of the component:
 title: Buttons
-description:
+description: Button component description
 category: components
@@ -95,11 +89,11 @@ ---
 
-#### Browser Sync
+### Browser Sync
 
 To help in developing workflow, a Browser Sync is provided that watch local changes and refresh the browser. That way, when we need a new component, It can be created directly in the styleguide that gets the styles from Flystyles, achieving the Styleguide Driven Development (SDD).
 
-To run the server, execute in `/docs` folder:
+To run the server, execute:
 
 ```bash
 npm install
-npm run serve
+npm run docs
 ```
@@ -109,8 +103,105 @@
 
-For the moment, the project is hosted on Netlifly [flystyles.netlify.com](http://flystyles.netlify.com/). To deploy the build files, you have to create an account in Netlifly, install `netlify-cli` and deploy:
+For the moment, the project is hosted on Netlifly [flystyles.netlify.com](http://flystyles.netlify.com/). The project is deployed whenever you push to master automatically.
 
+#### Create a new version
+
+To create a new version you have to use the npm command [version](https://docs.npmjs.com/cli/version). It will generate the new dist files, add a release tag and push to master.
+
 ```bash
-npm install netlify-cli -g
-cd docs/
-netlify deploy dist
+npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]
 ```
+
+## Architecture
+
+```
+src/
+|
+|- styles
+|
+|   – mixins/
+|      |– _responsive.scss   # Responsive mixins
+|      |– _typography.scss   # Typography mixins
+|      …                     # Etc
+|
+|   – base/
+|       |– _normalize.scss    # Reset/normalize
+|       |– _typography.scss   # Typography rules
+|       |- _animations.scss   # CSS Animations
+|       …                     # Etc.
+|
+|   – utilities/
+|       |– _spacing.scss      # Margins, paddings, ...
+|       |– _responsive.scss   # Brakpoints visibility classes
+|       …                     # Etc.
+|
+|- components/
+|   |– Button/_Button.scss    # Buttons
+|   |– Grid/_Grid.scss        # Grid
+|   …                         # Etc.
+|
+|- _config.scss           # Flystyles variables
+|– main.scss              # Main Sass file
+
+```
+
+Files follow the same naming conventions described above: they are hyphen-delimited.
+
+### BASE FOLDER
+
+The base/ folder holds what we might call the boilerplate code for the project. In there, you might find the reset file, some typographic rules, and probably a stylesheet defining some standard styles for commonly used HTML elements (that I like to call _base.scss).
+
+```
+_base.scss
+_reset.scss
+_typography.scss
+_animations.scss
+
+```
+
+
+### COMPONENTS FOLDER
+
+For smaller components, there is the components/ folder. There are usually a lot of files in components/ since the whole site/application should be mostly composed of tiny modules.
+
+```
+_media.scss
+_carousel.scss
+_thumbnails.scss
+```
+
+### MIXINS FOLDER
+
+The `mixins/` folder gathers all Sass tools and helpers used across the project. Every global variable, function, mixin and placeholder should be put in here. This files dont's produce any output.
+
+```
+_responsive.scss
+_typography.scss
+```
+
+### THEMES FOLDER
+
+Custom theme specific styles.
+
+```
+_theme.scss
+_admin.scss
+```
+
+### UTILITIES FOLDER
+
+Utilities are low-level. They have a very narrow scope and may end up being used frequently, due to their separation from the semantics of the document and the theming of a component. As a result, once a class is in significant use great care should be taken when introducing any modifications to it.
+
+Utilities make use of `!important` to ensure that their styles always apply ahead of those defined in a component's dedicated CSS.
+
+```
+_spacing.scss
+_responsive.scss
+```
+
+### CONFIG FILE `_config.scss`
+
+The configuration file where all variables are defined. Copy this file to override the Flystyles defaults without modifying key, versioned files.
+
+### MAIN FILE `flystyles.scss`
+
+The main file should be the only Sass file from the whole code base not to begin with an underscore. This file should not contain anything but @import and comments.

No alert changes

Improved metrics

Total package byte prevSize

392400

increased by0.68%

Number of lines in readme file

198

increased by85.05%

No dependency changes