diff --git a/.cargo/config b/.cargo/config
new file mode 100644
index 0000000..8049fb7
--- /dev/null
+++ b/.cargo/config
@@ -0,0 +1,5 @@
+[build]
+target="wasm32-unknown-unknown"
+
+[target.'cfg(all(target_arch = "wasm32", not(cargo_web)))']
+runner = 'wasm-bindgen-test-runner'
\ No newline at end of file
diff --git a/.github/workflows/rust.yml b/.github/workflows/rust.yml
new file mode 100644
index 0000000..59b5a86
--- /dev/null
+++ b/.github/workflows/rust.yml
@@ -0,0 +1,31 @@
+name: Yew Styles
+
+on:
+  pull_request:
+    branches: [ master, development ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: wasm-pack
+        uses: jetli/wasm-pack-action@v0.3.0
+        with:
+          version: 'latest'
+      - name: install rustfmt
+        run: rustup component add rustfmt
+      - name: install clippy
+        run: rustup component add clippy
+      - name: install stable
+        run: rustup install stable
+      - name: add wasm32-unknown-unknown
+        run: rustup target add wasm32-unknown-unknown
+      - name: download geckodriver
+        run: curl --retry 5 -LO https://github.com/mozilla/geckodriver/releases/download/v0.26.0/geckodriver-v0.26.0-linux64.tar.gz
+      - name: uncompress geckodriver
+        run: tar -xzf geckodriver-v0.26.0-linux64.tar.gz
+      - name: execute CI
+        run: GECKODRIVER=$(pwd)/geckodriver ./ci/run_checks.sh
diff --git a/.gitignore b/.gitignore
index 8fafc3e..2d02e67 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,5 @@ crate/pkg
 crate/target
 crate/wasm-pack.log
 crate/yew_styles/target
+crate/yew_styles/pkg
 .cache
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index adb24da..0000000
--- a/.travis.yml
+++ /dev/null
@@ -1,21 +0,0 @@
-language: rust
-sudo: false
-
-INSTALL_NODE_VIA_NVM: &INSTALL_NODE_VIA_NVM
-  |
-    rustup target add wasm32-unknown-unknown
-    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
-    source ~/.nvm/nvm.sh
-    nvm install v10.5
-    
-matrix:
-  include:
-    # tests pass on nightly
-    - rust: nightly
-      env: JOB=test-template
-      install:
-        - *INSTALL_NODE_VIA_NVM
-        - cargo install wasm-pack
-        - npm install
-      script: 
-        - npm run build
diff --git a/LICENSE-MIT b/LICENSE
similarity index 95%
rename from LICENSE-MIT
rename to LICENSE
index e69282e..cf246f1 100644
--- a/LICENSE-MIT
+++ b/LICENSE
@@ -1,4 +1,4 @@
-Copyright (c) 2015 The Rust Project Developers
+Copyright (c) 2020 Francisco Jesus Navarro Cortes
 
 Permission is hereby granted, free of charge, to any
 person obtaining a copy of this software and associated
diff --git a/LICENSE-APACHE b/LICENSE-APACHE
deleted file mode 100644
index 16fe87b..0000000
--- a/LICENSE-APACHE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                     http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-   "License" shall mean the terms and conditions for use, reproduction,
-   and distribution as defined by Sections 1 through 9 of this document.
-
-   "Licensor" shall mean the copyright owner or entity authorized by
-   the copyright owner that is granting the License.
-
-   "Legal Entity" shall mean the union of the acting entity and all
-   other entities that control, are controlled by, or are under common
-   control with that entity. For the purposes of this definition,
-   "control" means (i) the power, direct or indirect, to cause the
-   direction or management of such entity, whether by contract or
-   otherwise, or (ii) ownership of fifty percent (50%) or more of the
-   outstanding shares, or (iii) beneficial ownership of such entity.
-
-   "You" (or "Your") shall mean an individual or Legal Entity
-   exercising permissions granted by this License.
-
-   "Source" form shall mean the preferred form for making modifications,
-   including but not limited to software source code, documentation
-   source, and configuration files.
-
-   "Object" form shall mean any form resulting from mechanical
-   transformation or translation of a Source form, including but
-   not limited to compiled object code, generated documentation,
-   and conversions to other media types.
-
-   "Work" shall mean the work of authorship, whether in Source or
-   Object form, made available under the License, as indicated by a
-   copyright notice that is included in or attached to the work
-   (an example is provided in the Appendix below).
-
-   "Derivative Works" shall mean any work, whether in Source or Object
-   form, that is based on (or derived from) the Work and for which the
-   editorial revisions, annotations, elaborations, or other modifications
-   represent, as a whole, an original work of authorship. For the purposes
-   of this License, Derivative Works shall not include works that remain
-   separable from, or merely link (or bind by name) to the interfaces of,
-   the Work and Derivative Works thereof.
-
-   "Contribution" shall mean any work of authorship, including
-   the original version of the Work and any modifications or additions
-   to that Work or Derivative Works thereof, that is intentionally
-   submitted to Licensor for inclusion in the Work by the copyright owner
-   or by an individual or Legal Entity authorized to submit on behalf of
-   the copyright owner. For the purposes of this definition, "submitted"
-   means any form of electronic, verbal, or written communication sent
-   to the Licensor or its representatives, including but not limited to
-   communication on electronic mailing lists, source code control systems,
-   and issue tracking systems that are managed by, or on behalf of, the
-   Licensor for the purpose of discussing and improving the Work, but
-   excluding communication that is conspicuously marked or otherwise
-   designated in writing by the copyright owner as "Not a Contribution."
-
-   "Contributor" shall mean Licensor and any individual or Legal Entity
-   on behalf of whom a Contribution has been received by Licensor and
-   subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-   this License, each Contributor hereby grants to You a perpetual,
-   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-   copyright license to reproduce, prepare Derivative Works of,
-   publicly display, publicly perform, sublicense, and distribute the
-   Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-   this License, each Contributor hereby grants to You a perpetual,
-   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-   (except as stated in this section) patent license to make, have made,
-   use, offer to sell, sell, import, and otherwise transfer the Work,
-   where such license applies only to those patent claims licensable
-   by such Contributor that are necessarily infringed by their
-   Contribution(s) alone or by combination of their Contribution(s)
-   with the Work to which such Contribution(s) was submitted. If You
-   institute patent litigation against any entity (including a
-   cross-claim or counterclaim in a lawsuit) alleging that the Work
-   or a Contribution incorporated within the Work constitutes direct
-   or contributory patent infringement, then any patent licenses
-   granted to You under this License for that Work shall terminate
-   as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-   Work or Derivative Works thereof in any medium, with or without
-   modifications, and in Source or Object form, provided that You
-   meet the following conditions:
-
-   (a) You must give any other recipients of the Work or
-       Derivative Works a copy of this License; and
-
-   (b) You must cause any modified files to carry prominent notices
-       stating that You changed the files; and
-
-   (c) You must retain, in the Source form of any Derivative Works
-       that You distribute, all copyright, patent, trademark, and
-       attribution notices from the Source form of the Work,
-       excluding those notices that do not pertain to any part of
-       the Derivative Works; and
-
-   (d) If the Work includes a "NOTICE" text file as part of its
-       distribution, then any Derivative Works that You distribute must
-       include a readable copy of the attribution notices contained
-       within such NOTICE file, excluding those notices that do not
-       pertain to any part of the Derivative Works, in at least one
-       of the following places: within a NOTICE text file distributed
-       as part of the Derivative Works; within the Source form or
-       documentation, if provided along with the Derivative Works; or,
-       within a display generated by the Derivative Works, if and
-       wherever such third-party notices normally appear. The contents
-       of the NOTICE file are for informational purposes only and
-       do not modify the License. You may add Your own attribution
-       notices within Derivative Works that You distribute, alongside
-       or as an addendum to the NOTICE text from the Work, provided
-       that such additional attribution notices cannot be construed
-       as modifying the License.
-
-   You may add Your own copyright statement to Your modifications and
-   may provide additional or different license terms and conditions
-   for use, reproduction, or distribution of Your modifications, or
-   for any such Derivative Works as a whole, provided Your use,
-   reproduction, and distribution of the Work otherwise complies with
-   the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-   any Contribution intentionally submitted for inclusion in the Work
-   by You to the Licensor shall be under the terms and conditions of
-   this License, without any additional terms or conditions.
-   Notwithstanding the above, nothing herein shall supersede or modify
-   the terms of any separate license agreement you may have executed
-   with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-   names, trademarks, service marks, or product names of the Licensor,
-   except as required for reasonable and customary use in describing the
-   origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-   agreed to in writing, Licensor provides the Work (and each
-   Contributor provides its Contributions) on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-   implied, including, without limitation, any warranties or conditions
-   of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-   PARTICULAR PURPOSE. You are solely responsible for determining the
-   appropriateness of using or redistributing the Work and assume any
-   risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-   whether in tort (including negligence), contract, or otherwise,
-   unless required by applicable law (such as deliberate and grossly
-   negligent acts) or agreed to in writing, shall any Contributor be
-   liable to You for damages, including any direct, indirect, special,
-   incidental, or consequential damages of any character arising as a
-   result of this License or out of the use or inability to use the
-   Work (including but not limited to damages for loss of goodwill,
-   work stoppage, computer failure or malfunction, or any and all
-   other commercial damages or losses), even if such Contributor
-   has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-   the Work or Derivative Works thereof, You may choose to offer,
-   and charge a fee for, acceptance of support, warranty, indemnity,
-   or other liability obligations and/or rights consistent with this
-   License. However, in accepting such obligations, You may act only
-   on Your own behalf and on Your sole responsibility, not on behalf
-   of any other Contributor, and only if You agree to indemnify,
-   defend, and hold each Contributor harmless for any liability
-   incurred by, or claims asserted against, such Contributor by reason
-   of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-   To apply the Apache License to your work, attach the following
-   boilerplate notice, with the fields enclosed by brackets "[]"
-   replaced with your own identifying information. (Don't include
-   the brackets!)  The text should be enclosed in the appropriate
-   comment syntax for the file format. We also recommend that a
-   file or class name and description of purpose be included on the
-   same "printed page" as the copyright notice for easier
-   identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-	http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/README.md b/README.md
index d4c4b12..1373cc9 100644
--- a/README.md
+++ b/README.md
@@ -1,29 +1,42 @@
-# `yewstyle`
-
-This is an initial project of a framework style for yew
-
-you can run the project with:
-
-* `npm start`
-
-To install yew-styles in your project, execute in the root path:
+# Yew Styles
+Yew Styles is a style framework for yew
+
+## Motivation
+The purpose of developing this project is first,
+provide a style framework for yew because there isn't not many options currently,
+also to create a layout system which is not far of the flexbox concept, and,
+to take the rust benefits and implement a properties selected by enumeration
+in the most of the cases which makes fast for developing applications and avoids the practice try and error
+
+## How it works
+Each component is splited in two parts, the logical yew component and its sass module,
+however, it is not necessary to worry about the sass module only it needs to be include in the project
+### How install it
+1. Install the sass module: `npm install yew-styles`
+2. Add the yew_style crate in Cargo.toml file: `yew_styles = "0.3.0"`
+3. Import the main.css file in you main javascript/typescript file project: 
+```typescript
+    import 'node_modules/yew-styles/main.css';
+```
+4. Ready to import and use in your project 🚀
 
-* `npm install yew-styles`
+## Run the documentation page
+1. `git clone https://github.com/spielrs/yew_styles.git`
+2. `cd yew_styles`
+3. `npm start`
 
-* after import the css in your index.js/index.ts file:
+In the left side there is a list of links where each one access to a correspondent component documentation,
+there, shows how to use it.
 
-```javascript
-import 'node_modules/yew-styles/main.css';
-```
+## Run the tests
+Inside of the project run:
 
-* include in your Cargo.toml if you want to use web-sys feature this:
+`cargo test --target wasm32-unknown-unknown --manifest-path=crate/yew_styles/Cargo.toml`
 
-```toml
-yew_styles= {path= "./yew_styles", version = "0.2.0", features = ["web_sys"]}
-```
+## Development phase
+Yew style is in early phase, currently doesn't have enough components to cover all the requirements that could need a website/web application.
+All contributions are appreciated.
 
-or this if you want to use stdweb instead
+## License
 
-```toml
-yew_styles= {path= "./yew_styles", version = "0.2.0", features = ["std_web"]}
-```
\ No newline at end of file
+Yew Style is MIT licensed. See [license](LICENSE)
\ No newline at end of file
diff --git a/app/index.ts b/app/index.ts
index 11b71c6..5cc719b 100644
--- a/app/index.ts
+++ b/app/index.ts
@@ -1,4 +1,7 @@
 import './yew-styles/main.sass';
 import './page-styles/main.sass';
+import 'prismjs/themes/prism.css';
+import 'prismjs/components/prism-rust';
+
 import module from '../crate/Cargo.toml';
 module.run();
diff --git a/app/page-styles/_app.sass b/app/page-styles/_app.sass
index 7b0eb6b..643ee32 100644
--- a/app/page-styles/_app.sass
+++ b/app/page-styles/_app.sass
@@ -8,4 +8,7 @@
         &:hover
             background-color: rgb(230, 236, 241)
 
-        
\ No newline at end of file
+.container
+    .item
+        code
+            font-size: 1vw
\ No newline at end of file
diff --git a/ci/run_checks.sh b/ci/run_checks.sh
new file mode 100755
index 0000000..dab724c
--- /dev/null
+++ b/ci/run_checks.sh
@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+set -euxo pipefail
+
+cargo fmt --manifest-path=crate/yew_styles/Cargo.toml --all -- --check
+cargo clippy --manifest-path=crate/yew_styles/Cargo.toml --all -- --deny=warnings
+wasm-pack test --headless --firefox crate/yew_styles
diff --git a/crate/.cargo/config b/crate/.cargo/config
new file mode 100644
index 0000000..042e360
--- /dev/null
+++ b/crate/.cargo/config
@@ -0,0 +1,2 @@
+[build]
+target="wasm32-unknown-unknown"
diff --git a/crate/Cargo.lock b/crate/Cargo.lock
index 0956f1c..497a597 100644
--- a/crate/Cargo.lock
+++ b/crate/Cargo.lock
@@ -43,11 +43,6 @@ dependencies = [
  "libc 0.2.65 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
-[[package]]
-name = "base-x"
-version = "0.2.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-
 [[package]]
 name = "bincode"
 version = "1.2.1"
@@ -98,14 +93,9 @@ version = "0.1.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
-[[package]]
-name = "discard"
-version = "1.0.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-
 [[package]]
 name = "dotenv"
 version = "0.15.0"
@@ -230,9 +220,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
  "libc 0.2.65 (registry+https://github.com/rust-lang/crates.io-index)",
- "stdweb 0.4.20 (registry+https://github.com/rust-lang/crates.io-index)",
  "wasi 0.9.0+wasi-snapshot-preview1 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -259,7 +248,7 @@ name = "gloo-events"
 version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
  "web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
@@ -270,7 +259,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "gloo-events 0.1.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "js-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
  "web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
@@ -280,7 +269,7 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "js-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
  "web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
@@ -317,7 +306,7 @@ name = "js-sys"
 version = "0.3.36"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -503,6 +492,11 @@ name = "ryu"
 version = "1.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 
+[[package]]
+name = "scoped-tls"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+
 [[package]]
 name = "semver"
 version = "0.9.0"
@@ -564,11 +558,6 @@ dependencies = [
  "yaml-rust 0.4.3 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
-[[package]]
-name = "sha1"
-version = "0.6.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-
 [[package]]
 name = "slab"
 version = "0.4.2"
@@ -579,53 +568,6 @@ name = "static_assertions"
 version = "0.3.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 
-[[package]]
-name = "stdweb"
-version = "0.4.20"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-dependencies = [
- "discard 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
- "rustc_version 0.2.3 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde_json 1.0.48 (registry+https://github.com/rust-lang/crates.io-index)",
- "stdweb-derive 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)",
- "stdweb-internal-macros 0.2.9 (registry+https://github.com/rust-lang/crates.io-index)",
- "stdweb-internal-runtime 0.1.5 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
-]
-
-[[package]]
-name = "stdweb-derive"
-version = "0.5.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-dependencies = [
- "proc-macro2 1.0.6 (registry+https://github.com/rust-lang/crates.io-index)",
- "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde_derive 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
- "syn 1.0.11 (registry+https://github.com/rust-lang/crates.io-index)",
-]
-
-[[package]]
-name = "stdweb-internal-macros"
-version = "0.2.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-dependencies = [
- "base-x 0.2.6 (registry+https://github.com/rust-lang/crates.io-index)",
- "proc-macro2 1.0.6 (registry+https://github.com/rust-lang/crates.io-index)",
- "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde_derive 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde_json 1.0.48 (registry+https://github.com/rust-lang/crates.io-index)",
- "sha1 0.6.0 (registry+https://github.com/rust-lang/crates.io-index)",
- "syn 1.0.11 (registry+https://github.com/rust-lang/crates.io-index)",
-]
-
-[[package]]
-name = "stdweb-internal-runtime"
-version = "0.1.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-
 [[package]]
 name = "syn"
 version = "1.0.11"
@@ -678,14 +620,6 @@ name = "unicode-xid"
 version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 
-[[package]]
-name = "uuid"
-version = "0.8.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-dependencies = [
- "rand 0.7.3 (registry+https://github.com/rust-lang/crates.io-index)",
-]
-
 [[package]]
 name = "version_check"
 version = "0.9.1"
@@ -698,16 +632,16 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.59"
+version = "0.2.60"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen-macro 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-macro 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "wasm-bindgen-backend"
-version = "0.2.59"
+version = "0.2.60"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "bumpalo 3.1.2 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -716,45 +650,67 @@ dependencies = [
  "proc-macro2 1.0.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
  "syn 1.0.11 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen-shared 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-shared 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "wasm-bindgen-futures"
-version = "0.4.8"
+version = "0.4.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
  "js-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
  "web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.59"
+version = "0.2.60"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen-macro-support 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-macro-support 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.59"
+version = "0.2.60"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "proc-macro2 1.0.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
  "syn 1.0.11 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen-backend 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen-shared 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-backend 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-shared 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.59"
+version = "0.2.60"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+
+[[package]]
+name = "wasm-bindgen-test"
+version = "0.3.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+dependencies = [
+ "console_error_panic_hook 0.1.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "js-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
+ "scoped-tls 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-futures 0.4.9 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-test-macro 0.3.8 (registry+https://github.com/rust-lang/crates.io-index)",
+]
+
+[[package]]
+name = "wasm-bindgen-test-macro"
+version = "0.3.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
+dependencies = [
+ "proc-macro2 1.0.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
+]
 
 [[package]]
 name = "web-sys"
@@ -762,7 +718,7 @@ version = "0.3.36"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "js-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -805,7 +761,7 @@ dependencies = [
 
 [[package]]
 name = "yew"
-version = "0.14.1"
+version = "0.15.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "anyhow 1.0.20 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -831,15 +787,15 @@ dependencies = [
  "slab 0.4.2 (registry+https://github.com/rust-lang/crates.io-index)",
  "thiserror 1.0.11 (registry+https://github.com/rust-lang/crates.io-index)",
  "toml 0.5.5 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen-futures 0.4.8 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-futures 0.4.9 (registry+https://github.com/rust-lang/crates.io-index)",
  "web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
- "yew-macro 0.14.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "yew-macro 0.15.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "yew-macro"
-version = "0.14.0"
+version = "0.15.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "boolinator 2.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -852,7 +808,7 @@ dependencies = [
 
 [[package]]
 name = "yew-router"
-version = "0.11.0"
+version = "0.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -863,35 +819,46 @@ dependencies = [
  "nom 5.1.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde_json 1.0.48 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
  "web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
- "yew 0.14.1 (registry+https://github.com/rust-lang/crates.io-index)",
- "yew-router-macro 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)",
- "yew-router-route-parser 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "yew 0.15.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "yew-router-macro 0.12.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "yew-router-route-parser 0.12.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "yew-router-macro"
-version = "0.11.0"
+version = "0.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "proc-macro2 1.0.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
  "syn 1.0.11 (registry+https://github.com/rust-lang/crates.io-index)",
- "yew-router-route-parser 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "yew-router-route-parser 0.12.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "yew-router-route-parser"
-version = "0.11.0"
+version = "0.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "nom 5.1.1 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
+[[package]]
+name = "yew_prism"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+dependencies = [
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-test 0.3.8 (registry+https://github.com/rust-lang/crates.io-index)",
+ "web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
+ "yew 0.15.0 (registry+https://github.com/rust-lang/crates.io-index)",
+]
+
 [[package]]
 name = "yew_style_page"
-version = "0.2.0"
+version = "0.3.0"
 dependencies = [
  "cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
  "console_error_panic_hook 0.1.6 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -899,22 +866,25 @@ dependencies = [
  "failure 0.1.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde_derive 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
  "web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
  "wee_alloc 0.4.5 (registry+https://github.com/rust-lang/crates.io-index)",
- "yew 0.14.1 (registry+https://github.com/rust-lang/crates.io-index)",
- "yew-router 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)",
- "yew_styles 0.2.1",
+ "yew 0.15.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "yew-router 0.12.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "yew_prism 0.2.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "yew_styles 0.3.0",
 ]
 
 [[package]]
 name = "yew_styles"
-version = "0.2.1"
+version = "0.3.0"
 dependencies = [
- "uuid 0.8.1 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "getrandom 0.1.14 (registry+https://github.com/rust-lang/crates.io-index)",
+ "rand 0.7.3 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-test 0.3.8 (registry+https://github.com/rust-lang/crates.io-index)",
  "web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
- "yew 0.14.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "yew 0.15.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [metadata]
@@ -924,7 +894,6 @@ dependencies = [
 "checksum autocfg 0.1.7 (registry+https://github.com/rust-lang/crates.io-index)" = "1d49d90015b3c36167a20fe2810c5cd875ad504b39cff3d4eae7977e6b7c1cb2"
 "checksum backtrace 0.3.40 (registry+https://github.com/rust-lang/crates.io-index)" = "924c76597f0d9ca25d762c25a4d369d51267536465dc5064bdf0eb073ed477ea"
 "checksum backtrace-sys 0.1.32 (registry+https://github.com/rust-lang/crates.io-index)" = "5d6575f128516de27e3ce99689419835fce9643a9b215a14d2b5b685be018491"
-"checksum base-x 0.2.6 (registry+https://github.com/rust-lang/crates.io-index)" = "1b20b618342cf9891c292c4f5ac2cde7287cc5c87e87e9c769d617793607dec1"
 "checksum bincode 1.2.1 (registry+https://github.com/rust-lang/crates.io-index)" = "5753e2a71534719bf3f4e57006c3a4f0d2c672a4b676eec84161f763eca87dbf"
 "checksum boolinator 2.4.0 (registry+https://github.com/rust-lang/crates.io-index)" = "cfa8873f51c92e232f9bac4065cddef41b714152812bfc5f7672ba16d6ef8cd9"
 "checksum bumpalo 3.1.2 (registry+https://github.com/rust-lang/crates.io-index)" = "5fb8038c1ddc0a5f73787b130f4cc75151e96ed33e417fde765eb5a81e3532f4"
@@ -934,7 +903,6 @@ dependencies = [
 "checksum cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)" = "4785bdd1c96b2a846b2bd7cc02e86b6b3dbf14e7e53446c4f54c92a361040822"
 "checksum cfg-match 0.2.1 (registry+https://github.com/rust-lang/crates.io-index)" = "8100e46ff92eb85bf6dc2930c73f2a4f7176393c84a9446b3d501e1b354e7b34"
 "checksum console_error_panic_hook 0.1.6 (registry+https://github.com/rust-lang/crates.io-index)" = "b8d976903543e0c48546a91908f21588a680a8c8f984df9a5d69feccb2b2a211"
-"checksum discard 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)" = "212d0f5754cb6769937f4501cc0e67f4f4483c8d2c3e1e922ee9edbe4ab4c7c0"
 "checksum dotenv 0.15.0 (registry+https://github.com/rust-lang/crates.io-index)" = "77c90badedccf4105eca100756a0b1289e191f6fcbdadd3cee1d2f614f97da8f"
 "checksum dtoa 0.4.4 (registry+https://github.com/rust-lang/crates.io-index)" = "ea57b42383d091c85abcc2706240b94ab2a8fa1fc81c10ff23c4de06e2a90b5e"
 "checksum failure 0.1.6 (registry+https://github.com/rust-lang/crates.io-index)" = "f8273f13c977665c5db7eb2b99ae520952fe5ac831ae4cd09d80c4c7042b5ed9"
@@ -985,6 +953,7 @@ dependencies = [
 "checksum rustc-demangle 0.1.16 (registry+https://github.com/rust-lang/crates.io-index)" = "4c691c0e608126e00913e33f0ccf3727d5fc84573623b8d65b2df340b5201783"
 "checksum rustc_version 0.2.3 (registry+https://github.com/rust-lang/crates.io-index)" = "138e3e0acb6c9fb258b19b67cb8abd63c00679d2851805ea151465464fe9030a"
 "checksum ryu 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)" = "bfa8506c1de11c9c4e4c38863ccbe02a305c8188e85a05a784c9e11e1c3910c8"
+"checksum scoped-tls 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)" = "ea6a9290e3c9cf0f18145ef7ffa62d68ee0bf5fcd651017e586dc7fd5da448c2"
 "checksum semver 0.9.0 (registry+https://github.com/rust-lang/crates.io-index)" = "1d7eb9ef2c18661902cc47e535f9bc51b78acd254da71d375c2f6720d9a40403"
 "checksum semver-parser 0.7.0 (registry+https://github.com/rust-lang/crates.io-index)" = "388a1df253eca08550bef6c72392cfe7c30914bf41df5269b68cbd6ff8f570a3"
 "checksum serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)" = "414115f25f818d7dfccec8ee535d76949ae78584fc4f79a6f45a904bf8ab4449"
@@ -992,36 +961,33 @@ dependencies = [
 "checksum serde_derive 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)" = "128f9e303a5a29922045a830221b8f78ec74a5f544944f3d5984f8ec3895ef64"
 "checksum serde_json 1.0.48 (registry+https://github.com/rust-lang/crates.io-index)" = "9371ade75d4c2d6cb154141b9752cf3781ec9c05e0e5cf35060e1e70ee7b9c25"
 "checksum serde_yaml 0.8.11 (registry+https://github.com/rust-lang/crates.io-index)" = "691b17f19fc1ec9d94ec0b5864859290dff279dbd7b03f017afda54eb36c3c35"
-"checksum sha1 0.6.0 (registry+https://github.com/rust-lang/crates.io-index)" = "2579985fda508104f7587689507983eadd6a6e84dd35d6d115361f530916fa0d"
 "checksum slab 0.4.2 (registry+https://github.com/rust-lang/crates.io-index)" = "c111b5bd5695e56cffe5129854aa230b39c93a305372fdbb2668ca2394eea9f8"
 "checksum static_assertions 0.3.4 (registry+https://github.com/rust-lang/crates.io-index)" = "7f3eb36b47e512f8f1c9e3d10c2c1965bc992bd9cdb024fa581e2194501c83d3"
-"checksum stdweb 0.4.20 (registry+https://github.com/rust-lang/crates.io-index)" = "d022496b16281348b52d0e30ae99e01a73d737b2f45d38fed4edf79f9325a1d5"
-"checksum stdweb-derive 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)" = "c87a60a40fccc84bef0652345bbbbbe20a605bf5d0ce81719fc476f5c03b50ef"
-"checksum stdweb-internal-macros 0.2.9 (registry+https://github.com/rust-lang/crates.io-index)" = "58fa5ff6ad0d98d1ffa8cb115892b6e69d67799f6763e162a1c9db421dc22e11"
-"checksum stdweb-internal-runtime 0.1.5 (registry+https://github.com/rust-lang/crates.io-index)" = "213701ba3370744dcd1a12960caa4843b3d68b4d1c0a5d575e0d65b2ee9d16c0"
 "checksum syn 1.0.11 (registry+https://github.com/rust-lang/crates.io-index)" = "dff0acdb207ae2fe6d5976617f887eb1e35a2ba52c13c7234c790960cdad9238"
 "checksum synstructure 0.12.1 (registry+https://github.com/rust-lang/crates.io-index)" = "3f085a5855930c0441ca1288cf044ea4aecf4f43a91668abdb870b4ba546a203"
 "checksum thiserror 1.0.11 (registry+https://github.com/rust-lang/crates.io-index)" = "ee14bf8e6767ab4c687c9e8bc003879e042a96fd67a3ba5934eadb6536bef4db"
 "checksum thiserror-impl 1.0.11 (registry+https://github.com/rust-lang/crates.io-index)" = "a7b51e1fbc44b5a0840be594fbc0f960be09050f2617e61e6aa43bef97cd3ef4"
 "checksum toml 0.5.5 (registry+https://github.com/rust-lang/crates.io-index)" = "01d1404644c8b12b16bfcffa4322403a91a451584daaaa7c28d3152e6cbc98cf"
 "checksum unicode-xid 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)" = "826e7639553986605ec5979c7dd957c7895e93eabed50ab2ffa7f6128a75097c"
-"checksum uuid 0.8.1 (registry+https://github.com/rust-lang/crates.io-index)" = "9fde2f6a4bea1d6e007c4ad38c6839fa71cbb63b6dbf5b595aa38dc9b1093c11"
 "checksum version_check 0.9.1 (registry+https://github.com/rust-lang/crates.io-index)" = "078775d0255232fb988e6fccf26ddc9d1ac274299aaedcedce21c6f72cc533ce"
 "checksum wasi 0.9.0+wasi-snapshot-preview1 (registry+https://github.com/rust-lang/crates.io-index)" = "cccddf32554fecc6acb585f82a32a72e28b48f8c4c1883ddfeeeaa96f7d8e519"
-"checksum wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)" = "3557c397ab5a8e347d434782bcd31fc1483d927a6826804cec05cc792ee2519d"
-"checksum wasm-bindgen-backend 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)" = "e0da9c9a19850d3af6df1cb9574970b566d617ecfaf36eb0b706b6f3ef9bd2f8"
-"checksum wasm-bindgen-futures 0.4.8 (registry+https://github.com/rust-lang/crates.io-index)" = "8bbdd49e3e28b40dec6a9ba8d17798245ce32b019513a845369c641b275135d9"
-"checksum wasm-bindgen-macro 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)" = "0f6fde1d36e75a714b5fe0cffbb78978f222ea6baebb726af13c78869fdb4205"
-"checksum wasm-bindgen-macro-support 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)" = "25bda4168030a6412ea8a047e27238cadf56f0e53516e1e83fec0a8b7c786f6d"
-"checksum wasm-bindgen-shared 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)" = "fc9f36ad51f25b0219a3d4d13b90eb44cd075dff8b6280cca015775d7acaddd8"
+"checksum wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "2cc57ce05287f8376e998cbddfb4c8cb43b84a7ec55cf4551d7c00eef317a47f"
+"checksum wasm-bindgen-backend 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "d967d37bf6c16cca2973ca3af071d0a2523392e4a594548155d89a678f4237cd"
+"checksum wasm-bindgen-futures 0.4.9 (registry+https://github.com/rust-lang/crates.io-index)" = "457414a91863c0ec00090dba537f88ab955d93ca6555862c29b6d860990b8a8a"
+"checksum wasm-bindgen-macro 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "8bd151b63e1ea881bb742cd20e1d6127cef28399558f3b5d415289bc41eee3a4"
+"checksum wasm-bindgen-macro-support 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "d68a5b36eef1be7868f668632863292e37739656a80fc4b9acec7b0bd35a4931"
+"checksum wasm-bindgen-shared 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "daf76fe7d25ac79748a37538b7daeed1c7a6867c92d3245c12c6222e4a20d639"
+"checksum wasm-bindgen-test 0.3.8 (registry+https://github.com/rust-lang/crates.io-index)" = "98fd0ec352c44d1726b6c2bec524612b1c81e34a7d858f597a6c71f8e018c82e"
+"checksum wasm-bindgen-test-macro 0.3.8 (registry+https://github.com/rust-lang/crates.io-index)" = "97837a6e83ab24a4b3a38d44a257e13335b54f4b4548b2c9d71edd0bf570cb4f"
 "checksum web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)" = "721c6263e2c66fd44501cc5efbfa2b7dfa775d13e4ea38c46299646ed1f9c70a"
 "checksum wee_alloc 0.4.5 (registry+https://github.com/rust-lang/crates.io-index)" = "dbb3b5a6b2bb17cb6ad44a2e68a43e8d2722c997da10e928665c72ec6c0a0b8e"
 "checksum winapi 0.3.8 (registry+https://github.com/rust-lang/crates.io-index)" = "8093091eeb260906a183e6ae1abdba2ef5ef2257a21801128899c3fc699229c6"
 "checksum winapi-i686-pc-windows-gnu 0.4.0 (registry+https://github.com/rust-lang/crates.io-index)" = "ac3b87c63620426dd9b991e5ce0329eff545bccbbb34f3be09ff6fb6ab51b7b6"
 "checksum winapi-x86_64-pc-windows-gnu 0.4.0 (registry+https://github.com/rust-lang/crates.io-index)" = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
 "checksum yaml-rust 0.4.3 (registry+https://github.com/rust-lang/crates.io-index)" = "65923dd1784f44da1d2c3dbbc5e822045628c590ba72123e1c73d3c230c4434d"
-"checksum yew 0.14.1 (registry+https://github.com/rust-lang/crates.io-index)" = "29d4669e99b3ab4473eb8337c4c2f0c5e1ad6230ee704d6460bdf40084480db1"
-"checksum yew-macro 0.14.0 (registry+https://github.com/rust-lang/crates.io-index)" = "fb25d91f16265dd1643497ac3252be6c21c169d9cf3babcae32325c74200499f"
-"checksum yew-router 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)" = "19145953cfaa35cbd26a06ef5f589553d8e16d2a8d889d9c3e74516617ea7db8"
-"checksum yew-router-macro 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)" = "5e2b24468a3ea4ac70f2c46f6ca07a80b2cbb14eb725a16bc74eb5d759fbb3e7"
-"checksum yew-router-route-parser 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)" = "8e6801d6eb8583313fb33f20b141627c51881d24225e8de1660571e971f268d8"
+"checksum yew 0.15.0 (registry+https://github.com/rust-lang/crates.io-index)" = "7532a83ec6c2173cd72888bb3ac0e3656d0dd152476f71631f4b465481855391"
+"checksum yew-macro 0.15.0 (registry+https://github.com/rust-lang/crates.io-index)" = "28cf0535e956932124a66721a0f91a1f65a1654ab509c43c3b5d71eb10f20089"
+"checksum yew-router 0.12.1 (registry+https://github.com/rust-lang/crates.io-index)" = "30c14c320554af8f6c9412606daca46e9fdac686b6be6f3563e7f4073c628f8e"
+"checksum yew-router-macro 0.12.0 (registry+https://github.com/rust-lang/crates.io-index)" = "88820ce667e8b1b17750c2294e69dc93932bdcfd76a7fec5b7b573131f3421c1"
+"checksum yew-router-route-parser 0.12.0 (registry+https://github.com/rust-lang/crates.io-index)" = "b3c4708315d2325182b9c3d8c9805e4f5293baf6e6103f9cd4f989ddedca192a"
+"checksum yew_prism 0.2.1 (registry+https://github.com/rust-lang/crates.io-index)" = "18729acde7cdb3dea9acb4ef2e3610035f69c2795d0172f8def81718a85199de"
diff --git a/crate/Cargo.toml b/crate/Cargo.toml
index 323f095..afd438e 100644
--- a/crate/Cargo.toml
+++ b/crate/Cargo.toml
@@ -2,11 +2,11 @@
 authors = ["The RustWasm Developers"]
 categories = ["wasm"]
 description = "My awesome Yew with Yew-Router and Parcel application!"
-license = "Apache-2.0/MIT"
+license = "MIT"
 name = "yew_style_page"
 readme = "./README.md"
 repository = "https://github.com/spielrs/yew-styles-page.git"
-version = "0.2.0"
+version = "0.3.0"
 
 [lib]
 crate-type = ["cdylib"]
@@ -20,10 +20,8 @@ serde = "1.0"
 serde_derive = "1.0"
 dotenv = "0.15"
 failure = "0.1"
-yew = { version = "0.14", features = ["toml", "yaml", "msgpack", "cbor", "web_sys"]}
-yew-router = {version = "0.11", features = ["web_sys"] }
+yew = { version="0.15", features = ["toml", "yaml", "msgpack", "cbor", "web_sys"]}
+yew-router = {version="0.12", features = ["web_sys"] }
 web-sys = "0.3"
-yew_styles= {path= "./yew_styles", version = "0.2.0", features = ["web_sys"]}
-
-[build]
-target="wasm32-unknown-unknown"
\ No newline at end of file
+yew_prism = {version="0.2"}
+yew_styles= {path= "./yew_styles"}
diff --git a/crate/src/app.rs b/crate/src/app.rs
index 1c46465..0cb1318 100644
--- a/crate/src/app.rs
+++ b/crate/src/app.rs
@@ -1,7 +1,7 @@
-use page::{ButtonPage, LayoutsPage, NavbarPage};
+use page::{ButtonPage, HomePage, LayoutsPage, NavbarPage};
 use yew::prelude::*;
 use yew_router::{prelude::*, route::Route, switch::Permissive, Switch};
-use yew_styles::{
+use yew_styles::layouts::{
     container::{AlignItems, Container, Direction, Mode, Wrap},
     item::{Item, ItemLayout},
 };
@@ -31,21 +31,24 @@ impl Component for App {
     }
 
     fn update(&mut self, _: Self::Message) -> ShouldRender {
-        true
+        false
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        false
     }
 
     fn view(&self) -> Html {
         html! {
-            <Container name="root" direction=Direction::Row wrap=Wrap::Wrap>
-                <Item name="left-side" layouts=vec!(ItemLayout::ItL(2), ItemLayout::ItXs(12))>
+            <Container direction=Direction::Row wrap=Wrap::Wrap>
+                <Item layouts=vec!(ItemLayout::ItL(2), ItemLayout::ItXs(12))>
                     <Container
-                        name="components"
                         direction=Direction::Column
                         align_items=AlignItems::FlexStart(Mode::NoMode)
                         wrap=Wrap::Wrap
                     >
                         <Item layouts=vec!(ItemLayout::ItXs(12)) class_name="component-link">
-                            <h2>{"Yew Styles Component"}</h2>
+                            <h2>{"Documentation"}</h2>
                         </Item>
                         <Item layouts=vec!(ItemLayout::ItXs(12)) class_name="component-link">
                             <RouterAnchor<AppRouter> route=AppRouter::RootPath>{"Let's start"}</RouterAnchor<AppRouter>>
@@ -61,15 +64,11 @@ impl Component for App {
                         </Item>
                     </Container>
                 </Item>
-                <Item name="right-side" layouts=vec!(ItemLayout::ItXs(12), ItemLayout::ItL(10) )>
+                <Item layouts=vec!(ItemLayout::ItXs(12), ItemLayout::ItL(10) )>
                     <Router<AppRouter, ()>
                         render = Router::render(|switch: AppRouter | {
                             match switch {
-                                AppRouter::RootPath => html!{
-                                    <div>
-                                        <h1>{"Welcome to Yew Style"}</h1>
-                                    </div>
-                                },
+                                AppRouter::RootPath => html!{<HomePage/>},
                                 AppRouter::ButtonPath => html!{<ButtonPage/>},
                                 AppRouter::LayoutsPath => html!{<LayoutsPage/>},
                                 AppRouter::NavbarPath => html!{<NavbarPage/>},
diff --git a/crate/src/lib.rs b/crate/src/lib.rs
index e784b9d..176cb9c 100644
--- a/crate/src/lib.rs
+++ b/crate/src/lib.rs
@@ -5,6 +5,7 @@ extern crate cfg_if;
 extern crate wasm_bindgen;
 extern crate web_sys;
 extern crate yew;
+extern crate yew_prism;
 extern crate yew_router;
 extern crate yew_styles;
 
diff --git a/crate/src/page/button_page.rs b/crate/src/page/button_page.rs
index 7b948c2..2fc1143 100644
--- a/crate/src/page/button_page.rs
+++ b/crate/src/page/button_page.rs
@@ -1,6 +1,9 @@
+use super::highlighters::button_code;
 use yew::prelude::*;
+use yew_prism::Prism;
 use yew_styles::{
     button::{get_size, Button, Size},
+    layouts::item::{Item, ItemLayout},
     styles::{get_pallete, get_style, Palette, Style},
 };
 
@@ -36,16 +39,45 @@ impl Component for ButtonPage {
         true
     }
 
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        false
+    }
+
     fn view(&self) -> Html {
         html! {
-            <div class="container-button">
-                <div class="buttons-example">
-                    {get_button_styles(self.link.clone())}
-                </div>
-                <div class="action">
-                    {self.button_type.clone()}
+            <>
+                <Item layouts=vec!(ItemLayout::ItXs(12))>
+                    <h1>{"Button Component"}</h1>
+                </Item>
+
+                <Item layouts=vec!(ItemLayout::ItXs(12))>
+                    <h2>{"Code example"}</h2>
+                    <Prism
+                        code=button_code()
+                        language="rust"
+                    />
+                </Item>
+
+                <Item layouts=vec!(ItemLayout::ItXs(12))>
+                    <h2>{"Propeties"}</h2>
+                    <ul>
+                        <li><b>{"button_type: "}</b>{"type botton style. Options included in "}<code>{"Pallete"}</code>{". Default "}<code>{"Standard"}</code>{"."}</li>
+                        <li><b>{"size: "}</b>{"three diffent button standard sizes. Options included in "}<code>{"Size"}</code>{". Default "}<code>{"Medium"}</code>{"."}</li>
+                        <li><b>{"button_style: "}</b>{"button styles. Options included in "}<code>{"Style"}</code>{". Default "}<code>{"Regular"}</code>{"."}</li>
+                        <li><b>{"onsignal: "}</b>{"click event for button. Required."}</li>
+                    </ul>
+                </Item>
+
+                <h2>{"Visual examples"}</h2>
+                <div class="container-button">
+                    <div class="buttons-example">
+                        {get_button_styles(self.link.clone())}
+                    </div>
+                    <div class="action">
+                        {self.button_type.clone()}
+                    </div>
                 </div>
-            </div>
+            </>
         }
     }
 }
@@ -67,7 +99,7 @@ fn get_button_styles(link: ComponentLink<ButtonPage>) -> Html {
         .map(move |style| {
             html! {
                 <>
-                    <h2>{get_style(style.clone()).to_uppercase()}</h2>
+                    <h3>{get_style(style.clone()).to_uppercase()}</h3>
                     {get_sizes(style, link.clone())}
                 </>
             }
@@ -109,20 +141,22 @@ fn get_buttons(size: Size, button_style: Style, link: ComponentLink<ButtonPage>)
 
     html! {
         <div class="show-size">
-            <h3>{get_size(size.clone()).to_uppercase()}</h3>
+            <h4>{get_size(size.clone()).to_uppercase()}</h4>
             {
                 button_types.into_iter().map(|button_type| {
                     let button = html! {
-                        <Button
-                            onsignal=link.callback(move |_| Msg::ChangeType(button_type.to_string().clone()))
-                            class_name="button-page"
-                            button_type=button_types_enum[index].clone()
-                            button_style=button_style.clone()
-                            size=size.clone()
-                        >{to_first_upercase(&get_pallete(button_types_enum[index].clone()))}
-                        </Button>
+                        <>
+                            <Button
+                                onsignal=link.callback(move |_| Msg::ChangeType(button_type.to_string().clone()))
+                                class_name="button-page"
+                                button_type=button_types_enum[index].clone()
+                                button_style=button_style.clone()
+                                size=size.clone()
+                            >{to_first_upercase(&get_pallete(button_types_enum[index].clone()))}
+                            </Button>
+                        </>
                     };
-                    index = index + 1;
+                    index += 1;
                     button
                 }).collect::<Html>()
             }
diff --git a/crate/src/page/highlighters.rs b/crate/src/page/highlighters.rs
new file mode 100644
index 0000000..67f275b
--- /dev/null
+++ b/crate/src/page/highlighters.rs
@@ -0,0 +1,57 @@
+pub fn button_code() -> String {
+    "<Button
+    onsignal=link.callback(move |_| Msg::Clicked(\"Hello world\"))
+    class_name=\"hello-world\"
+    button_type=Pallete::Standard
+    button_style=Style::Light
+    size=Size::Medium
+>{\"Greeting\"}</Button>"
+        .to_string()
+}
+
+pub fn container_code() -> String {
+    "<Container direction=Direction::Row wrap=Wrap::Wrap class_name=\"align-item\">
+    <Item name=\"align\" index=0 layouts=vec!(ItemLayout::ItXs(4)) align_self=AlignSelf::FlexStart>
+        <h3>{\"start\"}</h3>
+    </Item>
+    <Item name=\"align\" index=1 layouts=vec!(ItemLayout::ItXs(4)) align_self=AlignSelf::Center>
+        <h3>{\"center\"}</h3>
+    </Item>
+    <Item name=\"align\" index=2 layouts=vec!(ItemLayout::ItXs(4)) align_self=AlignSelf::FlexEnd>
+        <h3>{\"end\"}</h3>
+    </Item>
+</Container>"
+        .to_string()
+}
+
+pub fn navbar_code() -> String {
+    "<Navbar
+    fixed=Fixed::None
+    navbar_style=Style::Light
+    navbar_type=Palette::Info
+    branch=html!{<img src=\"/assets/spielrs_logo.png\"></img>}>
+        <NavbarContainer justify_content=JustifyContent::FlexStart(Mode::NoMode)>
+            <NavbarItem
+                onsignal=link.callback(move |_| Msg::ChangeMenu(String::from(\"Home\")))>
+                <span>{\"Home\"}</span>
+            </NavbarItem>
+            <NavbarItem
+                onsignal=link.callback(move |_| Msg::ChangeMenu(String::from(\"Shop\")))>
+                <span>{\"Shop\"}</span>
+            </NavbarItem>
+            <NavbarItem
+                onsignal=link.callback(move |_| Msg::ChangeMenu(String::from(\"Shop\")))>
+                <span>{\"Shop\"}</span>
+            </NavbarItem>
+            <NavbarItem
+                onsignal=link.callback(move |_| Msg::ChangeMenu(String::from(\"About us\")))>   
+                <span>{\"About us\"}</span>
+            </NavbarItem>
+            <NavbarItem
+                onsignal=link.callback(move |_| Msg::ChangeMenu(String::from(\"Contact\")))>   
+                <span>{\"Contact\"}</span>
+            </NavbarItem>
+        </NavbarContainer>
+</Navbar>"
+        .to_string()
+}
diff --git a/crate/src/page/home_page.rs b/crate/src/page/home_page.rs
new file mode 100644
index 0000000..d7e7eeb
--- /dev/null
+++ b/crate/src/page/home_page.rs
@@ -0,0 +1,71 @@
+use yew::prelude::*;
+use yew_styles::layouts::{
+    container::{Container, Direction, Wrap},
+    item::{Item, ItemLayout},
+};
+
+pub struct HomePage;
+
+impl Component for HomePage {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        HomePage {}
+    }
+
+    fn update(&mut self, _: Self::Message) -> ShouldRender {
+        false
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        html! {
+            <Container wrap=Wrap::Wrap
+                direction=Direction::Row>
+                <Item layouts=vec!(ItemLayout::ItXl(8), ItemLayout::ItM(10), ItemLayout::ItXs(12))>
+                    <h1>{"Yew Styles"}</h1>
+                </Item>
+                <Item layouts=vec!(ItemLayout::ItXl(8), ItemLayout::ItM(10), ItemLayout::ItXs(12))>
+                    <p>{"Yew Styles is a style framework for yew"}</p>
+                </Item>
+                <Item layouts=vec!(ItemLayout::ItXl(8), ItemLayout::ItM(10), ItemLayout::ItXs(12))>
+                    <h2>{"Motivation"}</h2>
+                    <p>{"The purpose of developing this project is first, provide a style framework for yew
+                    because there isn't not many options currently, also to create a layout system which is not
+                    far of the flexbox concept, and, to take the rust benefits and implement a properties
+                    selected by enumeration in the most of the cases which makes fast for developing applications
+                    and avoids the practice try and error"}</p>
+                </Item>
+                <Item layouts=vec!(ItemLayout::ItXl(8), ItemLayout::ItM(10), ItemLayout::ItXs(12))>
+                    <h2>{"How it works"}</h2>
+                    <p>{"Each component is splited in two parts, the logical yew component and its sass module, however,
+                    it is not necessary to worry about the sass module only it needs to be include in the project"}</p>
+
+                    <h3>{"How install it"}</h3>
+                    <ol>
+                        <li>{"Install the sass module: "}<code>{"npm install yew-styles"}</code></li>
+                        <li>{"Add the yew_style crate in Cargo.toml file: "}
+                            <code>{"yew_styles = \"0.3.0\""}</code>
+                        </li>
+                        <li>{"Import the main.css file in you main javascript/typescript file project: "}
+                            <code>{"import 'node_modules/yew-styles/main.css';"}</code>
+                        </li>
+                        <li>{"Ready to import and use in your project \u{1F680}"}</li>
+                    </ol>
+
+                    <p>{"In the left side there is a list of links where each one access to a correspondent component documentation,
+                    there, shows how to use it."}</p>
+                </Item>
+                <Item layouts=vec!(ItemLayout::ItXl(8), ItemLayout::ItM(10), ItemLayout::ItXs(12))>
+                    <h2>{"Development phase"}</h2>
+                    <p>{"Yew style is in early phase, currently doesn't have enough components to cover all the requirements
+                    that could need a website/web application. All contributions are appreciated."}</p>
+                </Item>
+            </Container>
+        }
+    }
+}
diff --git a/crate/src/page/layouts_page.rs b/crate/src/page/layouts_page.rs
index cd9aa83..cfa7bdb 100644
--- a/crate/src/page/layouts_page.rs
+++ b/crate/src/page/layouts_page.rs
@@ -1,5 +1,7 @@
+use super::highlighters::container_code;
 use yew::prelude::*;
-use yew_styles::{
+use yew_prism::Prism;
+use yew_styles::layouts::{
     container::{AlignContent, AlignItems, Container, Direction, JustifyContent, Mode, Wrap},
     item::{AlignSelf, Item, ItemLayout},
 };
@@ -17,75 +19,112 @@ impl Component for LayoutsPage {
     }
 
     fn update(&mut self, _: Self::Message) -> ShouldRender {
-        true
+        false
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        false
     }
 
     fn view(&self) -> Html {
         html! {
             <div>
-                <h1>{"Layouts"}</h1>
-                <h2>{"Wrap"}</h2>
-                <Container direction=Direction::Row wrap=Wrap::Wrap name="wrap" index=0>
+                <Item layouts=vec!(ItemLayout::ItXs(12))>
+                    <h1>{"Layouts Components"}</h1>
+                </Item>
+
+                <Item layouts=vec!(ItemLayout::ItXs(12))>
+                    <h2>{"Code example"}</h2>
+                    <Prism
+                        code=container_code()
+                        language="rust"
+                    />
+                </Item>
+
+                <Item layouts=vec!(ItemLayout::ItXs(12))>
+                    <h2>{"Container properties"}</h2>
+                    <ul>
+                        <li><b>{"direction: "}</b>{"which direction are placing the items. Options include in "}<code>{"Direction"}</code>{". Required."}</li>
+                        <li><b>{"wrap: "}</b>{"set a wrap for the items. Options included in "}<code>{"Wrap"}</code>{". Default "}<code>{"Wrap"}</code>{"."}</li>
+                        <li><b>{"justify_content: "}</b>{"set how will be justified the content. Options included in "}<code>{"JustifyContent"}</code>{". Default "}<code>{"FlexStart(No Mode)"}</code>{"."}</li>
+                        <li><b>{"align_content: "}</b>{"set how will be aligned the content. Options included in "}<code>{"AlignContent"}</code>{". Default "}<code>{"Stretch(NoMode)"}</code>{"."}</li>
+                        <li><b>{"align_items: "}</b>{"set how will be aligned the items. Options included in "}<code>{"AlignItems"}</code>{". Default "}<code>{"Stretch(NoMode)"}</code>{"."}</li>
+                        <li><b>{"mode: "}</b>{"safe postion handler which is additional option for justify_content, align_content and align_items. Options included in "}<code>{"Mode"}</code>{". Default "}<code>{"NoMode"}</code>{"."}</li>
+                    </ul>
+                </Item>
+
+                <Item layouts=vec!(ItemLayout::ItXs(12))>
+                    <h2>{"Item properties"}</h2>
+                    <ul>
+                        <li><b>{"layouts: "}</b>{"percent of the layout that will take the item. The value is a vector "}<code>{"Vec<ItemLayout>"}</code>{". Required"}</li>
+                        <li><b>{"align_self: "}</b>{"align the item itself. Options include in "}<code>{"AlignSelf"}</code>{". Default "}<code>{"Auto"}</code></li>
+                        <li><b>{"onsignal: "}</b>{"click event for the item. Default "}<code>{"noop()"}</code></li>
+                    </ul>
+                </Item>
+
+
+                <h2>{"Visual examples"}</h2>
+                <h3>{"Wrap"}</h3>
+                <Container direction=Direction::Row wrap=Wrap::Wrap>
                     {(1..13).map(|x| LayoutsPageModel.get_items(x)).collect::<Html>()}
                 </Container>
-                <h2>{"No wrap"}</h2>
-                <Container direction=Direction::Row wrap=Wrap::Nowrap name="wrap" index=1>
+                <h3>{"No wrap"}</h3>
+                <Container direction=Direction::Row wrap=Wrap::Nowrap>
                     {(1..13).map(|x| LayoutsPageModel.get_items(x)).collect::<Html>()}
                 </Container>
-                <h2>{"Wrap reverse"}</h2>
-                <Container direction=Direction::Row wrap=Wrap::WrapReverse name="wrap" index=2>
+                <h3>{"Wrap reverse"}</h3>
+                <Container direction=Direction::Row wrap=Wrap::WrapReverse>
                     {(1..13).map(|x| LayoutsPageModel.get_items(x)).collect::<Html>()}
                 </Container>
-                <h2>{"Row direction:"}</h2>
-                <Container direction=Direction::Row wrap=Wrap::Wrap name="direction" index=0>
+                <h3>{"Row direction:"}</h3>
+                <Container direction=Direction::Row wrap=Wrap::Wrap>
                     {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::<Html>()}
                 </Container>
-                <h2>{"Row reverse direction:"}</h2>
-                <Container direction=Direction::RowReverse wrap=Wrap::Wrap name="direction" index=1>
+                <h3>{"Row reverse direction:"}</h3>
+                <Container direction=Direction::RowReverse wrap=Wrap::Wrap>
                     {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::<Html>()}
                 </Container>
-                <h2>{"Column direction:"}</h2>
-                <Container direction=Direction::Column wrap=Wrap::Wrap name="direction" index=2>
+                <h3>{"Column direction:"}</h3>
+                <Container direction=Direction::Column wrap=Wrap::Wrap>
                     {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::<Html>()}
                 </Container>
-                <h2>{"Column reverse direction:"}</h2>
-                <Container direction=Direction::ColumnReverse wrap=Wrap::Wrap name="direction" index=3>
+                <h3>{"Column reverse direction:"}</h3>
+                <Container direction=Direction::ColumnReverse wrap=Wrap::Wrap>
                     {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::<Html>()}
                 </Container>
-                <h2>{"Combination of column and row direction"}</h2>
-                <Container direction=Direction::Row wrap=Wrap::Wrap name="combination" index=0>
+                <h3>{"Combination of column and row direction"}</h3>
+                <Container direction=Direction::Row wrap=Wrap::Wrap>
                     <Item
                         layouts=vec!(ItemLayout::ItXs(6))
                     >
-                        <Container direction=Direction::Column wrap=Wrap::Wrap name="combination" index=1>
+                        <Container direction=Direction::Column wrap=Wrap::Wrap>
                             {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::<Html>()}
                         </Container>
                     </Item>
                     <Item
                         layouts=vec!(ItemLayout::ItXs(6))
                     >
-                        <Container direction=Direction::Row wrap=Wrap::Wrap name="combination" index=2>
+                        <Container direction=Direction::Row wrap=Wrap::Wrap>
                             {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::<Html>()}
                         </Container>
                     </Item>
                 </Container>
-                <h2>{"Justify Content"}</h2>
+                <h3>{"Justify Content"}</h3>
                 <Container
                     direction=Direction::Row wrap=Wrap::Wrap
-                    name="justify"
-                    index=0 justify_content=JustifyContent::Rigth(Mode::NoMode)
+                    justify_content=JustifyContent::Rigth(Mode::NoMode)
                 >
                     <Item
                         layouts=vec!(ItemLayout::ItXs(4))
                     >
-                        <Container direction=Direction::Column wrap=Wrap::Wrap name="justify" index=1>
+                        <Container direction=Direction::Column wrap=Wrap::Wrap>
                             {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::<Html>()}
                         </Container>
                     </Item>
                     <Item
                         layouts=vec!(ItemLayout::ItXs(4))
                     >
-                        <Container direction=Direction::Column wrap=Wrap::Wrap name="justify" index=2>
+                        <Container direction=Direction::Column wrap=Wrap::Wrap>
                             {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::<Html>()}
                         </Container>
                     </Item>
@@ -93,24 +132,24 @@ impl Component for LayoutsPage {
                 <p>{"To know about more options please visit "}
                     <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content" target="_bank">{"Justify Content"}</a>
                 </p>
-                <h2>{"Align Content"}</h2>
+                <h3>{"Align Content"}</h3>
                 <Container
                     direction=Direction::Row
-                    wrap=Wrap::Wrap name="align-content"
-                    index=0 align_content=AlignContent::FlexEnd(Mode::NoMode)
+                    wrap=Wrap::Wrap
+                 align_content=AlignContent::FlexEnd(Mode::NoMode)
                     class_name="align"
                 >
                     <Item
                         layouts=vec!(ItemLayout::ItXs(6))
                     >
-                        <Container direction=Direction::Column wrap=Wrap::Wrap name="align-content" index=1>
+                        <Container direction=Direction::Column wrap=Wrap::Wrap>
                             {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::<Html>()}
                         </Container>
                     </Item>
                     <Item
                         layouts=vec!(ItemLayout::ItXs(6))
                     >
-                        <Container direction=Direction::Column wrap=Wrap::Wrap name="align-content" index=2>
+                        <Container direction=Direction::Column wrap=Wrap::Wrap>
                             {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::<Html>()}
                         </Container>
                     </Item>
@@ -118,15 +157,15 @@ impl Component for LayoutsPage {
                 <p>{"To know about more options please visit "}
                     <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content" target="_bank">{"Align Content"}</a>
                 </p>
-                <h2>{"Align Items"}</h2>
-                <Container direction=Direction::Row wrap=Wrap::Wrap name="align-items" index=0>
+                <h3>{"Align Items"}</h3>
+                <Container direction=Direction::Row wrap=Wrap::Wrap>
                     <Item
                         layouts=vec!(ItemLayout::ItXs(6))
                     >
                         <Container
                             direction=Direction::Column
-                            wrap=Wrap::Wrap name="align-items"
-                            index=1 align_items=AlignItems::Center(Mode::NoMode)
+                            wrap=Wrap::Wrap
+                         align_items=AlignItems::Center(Mode::NoMode)
                         >
                             {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::<Html>()}
                         </Container>
@@ -136,8 +175,7 @@ impl Component for LayoutsPage {
                     >
                         <Container
                             direction=Direction::Column
-                            wrap=Wrap::Wrap name="align-items"
-                            index=2
+                            wrap=Wrap::Wrap
                             align_items=AlignItems::FlexEnd(Mode::NoMode)
                         >
                             {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::<Html>()}
@@ -147,15 +185,15 @@ impl Component for LayoutsPage {
                 <p>{"To know about more options please visit "}
                     <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items" target="_bank">{"Align Items"}</a>
                 </p>
-                <h2>{"Align self"}</h2>
+                <h3>{"Align self"}</h3>
                 <Container direction=Direction::Row wrap=Wrap::Wrap class_name="align-item">
-                    <Item name="align" index=0 layouts=vec!(ItemLayout::ItXs(4)) align_self=AlignSelf::FlexStart>
+                    <Item layouts=vec!(ItemLayout::ItXs(4)) align_self=AlignSelf::FlexStart>
                         <h3>{"start"}</h3>
                     </Item>
-                    <Item name="align" index=1 layouts=vec!(ItemLayout::ItXs(4)) align_self=AlignSelf::Center>
+                    <Item layouts=vec!(ItemLayout::ItXs(4)) align_self=AlignSelf::Center>
                         <h3>{"center"}</h3>
                     </Item>
-                    <Item name="align" index=2 layouts=vec!(ItemLayout::ItXs(4)) align_self=AlignSelf::FlexEnd>
+                    <Item layouts=vec!(ItemLayout::ItXs(4)) align_self=AlignSelf::FlexEnd>
                         <h3>{"end"}</h3>
                     </Item>
                 </Container>
diff --git a/crate/src/page/mod.rs b/crate/src/page/mod.rs
index e0accc1..c6bb1de 100644
--- a/crate/src/page/mod.rs
+++ b/crate/src/page/mod.rs
@@ -1,7 +1,10 @@
 pub mod button_page;
+mod highlighters;
+pub mod home_page;
 pub mod layouts_page;
 pub mod navbar_page;
 
 pub use self::button_page::ButtonPage;
+pub use self::home_page::HomePage;
 pub use self::layouts_page::LayoutsPage;
 pub use self::navbar_page::NavbarPage;
diff --git a/crate/src/page/navbar_page.rs b/crate/src/page/navbar_page.rs
index 7c34f08..f942589 100644
--- a/crate/src/page/navbar_page.rs
+++ b/crate/src/page/navbar_page.rs
@@ -1,7 +1,16 @@
+use super::highlighters::navbar_code;
 use yew::prelude::*;
+use yew_prism::Prism;
 use yew_styles::{
-    container::{JustifyContent, Mode},
-    navbar::{Fixed, Navbar, NavbarContainer, NavbarItem},
+    layouts::{
+        container::{JustifyContent, Mode},
+        item::{Item, ItemLayout},
+    },
+    navbar::{
+        navbar_component::{Fixed, Navbar},
+        navbar_container::NavbarContainer,
+        navbar_item::NavbarItem,
+    },
     styles::{Palette, Style},
 };
 
@@ -44,6 +53,10 @@ impl Component for NavbarPage {
         }
     }
 
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        false
+    }
+
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
         match msg {
             Msg::ChangeType(index, navbar_menu) => {
@@ -57,6 +70,43 @@ impl Component for NavbarPage {
     fn view(&self) -> Html {
         html! {
             <div class="root">
+                <Item layouts=vec!(ItemLayout::ItXs(12))>
+                    <h1>{"Navbar Components"}</h1>
+                </Item>
+
+                <Item layouts=vec!(ItemLayout::ItXs(12))>
+                    <h2>{"Code example"}</h2>
+                    <Prism
+                        code=navbar_code()
+                        language="rust"
+                    />
+                </Item>
+
+                <Item layouts=vec!(ItemLayout::ItXs(12))>
+                    <h2>{"Navbar properties"}</h2>
+                    <ul>
+                        <li><b>{"navbar_type: "}</b>{"type navbar style. Options included in "}<code>{"Pallete"}</code>{". Default "}<code>{"Standard"}</code></li>
+                        <li><b>{"button_style: "}</b>{"navbar styles. Options included in "}<code>{"Style"}</code>{". Default "}<code>{"Regular"}</code>{"."}</li>
+                        <li><b>{"fixed: "}</b>{"the location of the navbar which is fixed .Options included in "}<code>{"Fixed"}</code>{". Default "}<code>{"Top"}</code>{"."}</li>
+                        <li><b>{"branch: "}</b>{"vnode embedded in the beginning of the navbar, useful to include a branch logo. Optional"}</li>
+                    </ul>
+                </Item>
+                <Item layouts=vec!(ItemLayout::ItXs(12))>
+                    <h2>{"Navbar Container properties"}</h2>
+                    <ul>
+                        <li><b>{"justify_content: "}</b>{"set how will be justified the navbar items. Options included in "}<code>{"JustifyContent"}</code>{". Default "}<code>{"FlexStart(No Mode)"}</code>{"."}</li>
+                        <li><b>{"direction: "}</b>{"which direction are placing the navbar items. Options include in "}<code>{"Direction"}</code>{". Default "}<code>{"Row"}</code>{"."}</li>
+                        <li><b>{"mode: "}</b>{"safe postion handler which is additional option for justify_content. Options included in "}<code>{"Mode"}</code>{". Default "}<code>{"NoMode"}</code>{"."}</li>
+                    </ul>
+                </Item>
+                <Item layouts=vec!(ItemLayout::ItXs(12))>
+                    <h2>{"Navbar Item properties"}</h2>
+                    <ul>
+                        <li><b>{"onsignal: "}</b>{"click event for navbar item. Default "}<code>{"noop()"}</code></li>
+                    </ul>
+                </Item>
+
+                <h2>{"Visual examples"}</h2>
                 {get_style(self.link.clone(), self.navbar_menu.clone())}
             </div>
         }
@@ -83,7 +133,7 @@ fn get_style(link: ComponentLink<NavbarPage>, navbar_menu: Vec<String>) -> Html
     styles
         .into_iter()
         .map(|style| {
-            let navbar = get_navbar_type(link.clone(), style.clone(), navbar_menu.clone(), index);
+            let navbar = get_navbar_type(link.clone(), style, navbar_menu.clone(), index);
 
             index = navbar.index + 1;
 
@@ -139,7 +189,7 @@ fn get_navbar_type(
         .map(|navbar_type| {
             let element = html! {
                 <div>
-                    <h2>{format!("{} {}",style.name.clone(), navbar_type.name)}</h2>
+                    <h3>{format!("{} {}",style.name.clone(), navbar_type.name)}</h3>
                     <Navbar
                         fixed=Fixed::None
                         navbar_style=style.style.clone()
@@ -154,7 +204,7 @@ fn get_navbar_type(
                 </div>
             };
 
-            navbar_type_rendered = navbar_type_rendered + 1;
+            navbar_type_rendered += 1;
 
             element
         })
diff --git a/crate/yew_styles/.cargo/config b/crate/yew_styles/.cargo/config
new file mode 100644
index 0000000..8049fb7
--- /dev/null
+++ b/crate/yew_styles/.cargo/config
@@ -0,0 +1,5 @@
+[build]
+target="wasm32-unknown-unknown"
+
+[target.'cfg(all(target_arch = "wasm32", not(cargo_web)))']
+runner = 'wasm-bindgen-test-runner'
\ No newline at end of file
diff --git a/crate/yew_styles/Cargo.lock b/crate/yew_styles/Cargo.lock
index 0a224c0..c8b0c70 100644
--- a/crate/yew_styles/Cargo.lock
+++ b/crate/yew_styles/Cargo.lock
@@ -2,7 +2,7 @@
 # It is not intended for manual editing.
 [[package]]
 name = "anyhow"
-version = "1.0.26"
+version = "1.0.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 
 [[package]]
@@ -15,18 +15,13 @@ name = "autocfg"
 version = "1.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 
-[[package]]
-name = "base-x"
-version = "0.2.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-
 [[package]]
 name = "bincode"
 version = "1.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "byteorder 1.3.4 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.105 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -36,7 +31,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 
 [[package]]
 name = "bumpalo"
-version = "3.2.0"
+version = "3.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 
 [[package]]
@@ -65,14 +60,9 @@ version = "0.1.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
-[[package]]
-name = "discard"
-version = "1.0.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-
 [[package]]
 name = "dtoa"
 version = "0.4.5"
@@ -131,10 +121,10 @@ name = "futures-macro"
 version = "0.3.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "proc-macro-hack 0.5.11 (registry+https://github.com/rust-lang/crates.io-index)",
+ "proc-macro-hack 0.5.14 (registry+https://github.com/rust-lang/crates.io-index)",
  "proc-macro2 1.0.9 (registry+https://github.com/rust-lang/crates.io-index)",
- "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "syn 1.0.16 (registry+https://github.com/rust-lang/crates.io-index)",
+ "quote 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
+ "syn 1.0.17 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -160,8 +150,8 @@ dependencies = [
  "futures-task 0.3.4 (registry+https://github.com/rust-lang/crates.io-index)",
  "memchr 2.3.3 (registry+https://github.com/rust-lang/crates.io-index)",
  "pin-utils 0.1.0-alpha.4 (registry+https://github.com/rust-lang/crates.io-index)",
- "proc-macro-hack 0.5.11 (registry+https://github.com/rust-lang/crates.io-index)",
- "proc-macro-nested 0.1.3 (registry+https://github.com/rust-lang/crates.io-index)",
+ "proc-macro-hack 0.5.14 (registry+https://github.com/rust-lang/crates.io-index)",
+ "proc-macro-nested 0.1.4 (registry+https://github.com/rust-lang/crates.io-index)",
  "slab 0.4.2 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
@@ -171,10 +161,9 @@ version = "0.1.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
- "libc 0.2.67 (registry+https://github.com/rust-lang/crates.io-index)",
- "stdweb 0.4.20 (registry+https://github.com/rust-lang/crates.io-index)",
+ "libc 0.2.68 (registry+https://github.com/rust-lang/crates.io-index)",
  "wasi 0.9.0+wasi-snapshot-preview1 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -193,7 +182,7 @@ name = "gloo-console-timer"
 version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
+ "web-sys 0.3.37 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -201,8 +190,8 @@ name = "gloo-events"
 version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
- "web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
+ "web-sys 0.3.37 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -211,9 +200,9 @@ version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "gloo-events 0.1.1 (registry+https://github.com/rust-lang/crates.io-index)",
- "js-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
- "web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
+ "js-sys 0.3.37 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
+ "web-sys 0.3.37 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -221,19 +210,19 @@ name = "gloo-timers"
 version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "js-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
- "web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
+ "js-sys 0.3.37 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
+ "web-sys 0.3.37 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "half"
-version = "1.4.1"
+version = "1.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 
 [[package]]
 name = "http"
-version = "0.2.0"
+version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "bytes 0.5.4 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -256,10 +245,10 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 
 [[package]]
 name = "js-sys"
-version = "0.3.36"
+version = "0.3.37"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -269,7 +258,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 
 [[package]]
 name = "libc"
-version = "0.2.67"
+version = "0.2.68"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 
 [[package]]
@@ -310,17 +299,12 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 
 [[package]]
 name = "proc-macro-hack"
-version = "0.5.11"
+version = "0.5.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-dependencies = [
- "proc-macro2 1.0.9 (registry+https://github.com/rust-lang/crates.io-index)",
- "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "syn 1.0.16 (registry+https://github.com/rust-lang/crates.io-index)",
-]
 
 [[package]]
 name = "proc-macro-nested"
-version = "0.1.3"
+version = "0.1.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 
 [[package]]
@@ -333,7 +317,7 @@ dependencies = [
 
 [[package]]
 name = "quote"
-version = "1.0.2"
+version = "1.0.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "proc-macro2 1.0.9 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -345,7 +329,7 @@ version = "0.7.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "getrandom 0.1.14 (registry+https://github.com/rust-lang/crates.io-index)",
- "libc 0.2.67 (registry+https://github.com/rust-lang/crates.io-index)",
+ "libc 0.2.68 (registry+https://github.com/rust-lang/crates.io-index)",
  "rand_chacha 0.2.2 (registry+https://github.com/rust-lang/crates.io-index)",
  "rand_core 0.5.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "rand_hc 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -392,41 +376,25 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "byteorder 1.3.4 (registry+https://github.com/rust-lang/crates.io-index)",
  "rmp 0.8.9 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
-]
-
-[[package]]
-name = "rustc_version"
-version = "0.2.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-dependencies = [
- "semver 0.9.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.105 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "ryu"
-version = "1.0.2"
+version = "1.0.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 
 [[package]]
-name = "semver"
-version = "0.9.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-dependencies = [
- "semver-parser 0.7.0 (registry+https://github.com/rust-lang/crates.io-index)",
-]
-
-[[package]]
-name = "semver-parser"
-version = "0.7.0"
+name = "scoped-tls"
+version = "1.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 
 [[package]]
 name = "serde"
-version = "1.0.104"
+version = "1.0.105"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "serde_derive 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde_derive 1.0.105 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -434,18 +402,18 @@ name = "serde_cbor"
 version = "0.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "half 1.4.1 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
+ "half 1.5.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.105 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "serde_derive"
-version = "1.0.104"
+version = "1.0.105"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "proc-macro2 1.0.9 (registry+https://github.com/rust-lang/crates.io-index)",
- "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "syn 1.0.16 (registry+https://github.com/rust-lang/crates.io-index)",
+ "quote 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
+ "syn 1.0.17 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -454,8 +422,8 @@ version = "1.0.48"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "itoa 0.4.5 (registry+https://github.com/rust-lang/crates.io-index)",
- "ryu 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
+ "ryu 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.105 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -465,93 +433,41 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "dtoa 0.4.5 (registry+https://github.com/rust-lang/crates.io-index)",
  "linked-hash-map 0.5.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.105 (registry+https://github.com/rust-lang/crates.io-index)",
  "yaml-rust 0.4.3 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
-[[package]]
-name = "sha1"
-version = "0.6.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-
 [[package]]
 name = "slab"
 version = "0.4.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 
-[[package]]
-name = "stdweb"
-version = "0.4.20"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-dependencies = [
- "discard 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
- "rustc_version 0.2.3 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde_json 1.0.48 (registry+https://github.com/rust-lang/crates.io-index)",
- "stdweb-derive 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)",
- "stdweb-internal-macros 0.2.9 (registry+https://github.com/rust-lang/crates.io-index)",
- "stdweb-internal-runtime 0.1.5 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
-]
-
-[[package]]
-name = "stdweb-derive"
-version = "0.5.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-dependencies = [
- "proc-macro2 1.0.9 (registry+https://github.com/rust-lang/crates.io-index)",
- "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde_derive 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
- "syn 1.0.16 (registry+https://github.com/rust-lang/crates.io-index)",
-]
-
-[[package]]
-name = "stdweb-internal-macros"
-version = "0.2.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-dependencies = [
- "base-x 0.2.6 (registry+https://github.com/rust-lang/crates.io-index)",
- "proc-macro2 1.0.9 (registry+https://github.com/rust-lang/crates.io-index)",
- "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde_derive 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde_json 1.0.48 (registry+https://github.com/rust-lang/crates.io-index)",
- "sha1 0.6.0 (registry+https://github.com/rust-lang/crates.io-index)",
- "syn 1.0.16 (registry+https://github.com/rust-lang/crates.io-index)",
-]
-
-[[package]]
-name = "stdweb-internal-runtime"
-version = "0.1.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-
 [[package]]
 name = "syn"
-version = "1.0.16"
+version = "1.0.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "proc-macro2 1.0.9 (registry+https://github.com/rust-lang/crates.io-index)",
- "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
+ "quote 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
  "unicode-xid 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "thiserror"
-version = "1.0.11"
+version = "1.0.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "thiserror-impl 1.0.11 (registry+https://github.com/rust-lang/crates.io-index)",
+ "thiserror-impl 1.0.13 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "thiserror-impl"
-version = "1.0.11"
+version = "1.0.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "proc-macro2 1.0.9 (registry+https://github.com/rust-lang/crates.io-index)",
- "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "syn 1.0.16 (registry+https://github.com/rust-lang/crates.io-index)",
+ "quote 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
+ "syn 1.0.17 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -559,7 +475,7 @@ name = "toml"
 version = "0.5.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.105 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -567,14 +483,6 @@ name = "unicode-xid"
 version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 
-[[package]]
-name = "uuid"
-version = "0.8.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-dependencies = [
- "rand 0.7.3 (registry+https://github.com/rust-lang/crates.io-index)",
-]
-
 [[package]]
 name = "wasi"
 version = "0.9.0+wasi-snapshot-preview1"
@@ -582,71 +490,93 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.59"
+version = "0.2.60"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen-macro 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-macro 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "wasm-bindgen-backend"
-version = "0.2.59"
+version = "0.2.60"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "bumpalo 3.2.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bumpalo 3.2.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "lazy_static 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "log 0.4.8 (registry+https://github.com/rust-lang/crates.io-index)",
  "proc-macro2 1.0.9 (registry+https://github.com/rust-lang/crates.io-index)",
- "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "syn 1.0.16 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen-shared 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "quote 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
+ "syn 1.0.17 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-shared 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "wasm-bindgen-futures"
-version = "0.4.9"
+version = "0.4.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
- "js-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
- "web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
+ "js-sys 0.3.37 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
+ "web-sys 0.3.37 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.59"
+version = "0.2.60"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen-macro-support 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "quote 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-macro-support 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.59"
+version = "0.2.60"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "proc-macro2 1.0.9 (registry+https://github.com/rust-lang/crates.io-index)",
- "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "syn 1.0.16 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen-backend 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen-shared 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "quote 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
+ "syn 1.0.17 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-backend 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-shared 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.59"
+version = "0.2.60"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 
+[[package]]
+name = "wasm-bindgen-test"
+version = "0.3.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+dependencies = [
+ "console_error_panic_hook 0.1.6 (registry+https://github.com/rust-lang/crates.io-index)",
+ "js-sys 0.3.37 (registry+https://github.com/rust-lang/crates.io-index)",
+ "scoped-tls 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-futures 0.4.10 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-test-macro 0.3.10 (registry+https://github.com/rust-lang/crates.io-index)",
+]
+
+[[package]]
+name = "wasm-bindgen-test-macro"
+version = "0.3.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+dependencies = [
+ "proc-macro2 1.0.9 (registry+https://github.com/rust-lang/crates.io-index)",
+ "quote 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
+]
+
 [[package]]
 name = "web-sys"
-version = "0.3.36"
+version = "0.3.37"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "js-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
+ "js-sys 0.3.37 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -659,10 +589,10 @@ dependencies = [
 
 [[package]]
 name = "yew"
-version = "0.14.1"
+version = "0.15.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "anyhow 1.0.26 (registry+https://github.com/rust-lang/crates.io-index)",
+ "anyhow 1.0.27 (registry+https://github.com/rust-lang/crates.io-index)",
  "anymap 0.12.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "bincode 1.2.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -670,66 +600,64 @@ dependencies = [
  "console_error_panic_hook 0.1.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "futures 0.3.4 (registry+https://github.com/rust-lang/crates.io-index)",
  "gloo 0.2.1 (registry+https://github.com/rust-lang/crates.io-index)",
- "http 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "http 0.2.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "indexmap 1.3.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "js-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
+ "js-sys 0.3.37 (registry+https://github.com/rust-lang/crates.io-index)",
  "log 0.4.8 (registry+https://github.com/rust-lang/crates.io-index)",
- "proc-macro-hack 0.5.11 (registry+https://github.com/rust-lang/crates.io-index)",
- "proc-macro-nested 0.1.3 (registry+https://github.com/rust-lang/crates.io-index)",
+ "proc-macro-hack 0.5.14 (registry+https://github.com/rust-lang/crates.io-index)",
+ "proc-macro-nested 0.1.4 (registry+https://github.com/rust-lang/crates.io-index)",
  "rmp-serde 0.14.3 (registry+https://github.com/rust-lang/crates.io-index)",
- "ryu 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)",
+ "ryu 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.105 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde_cbor 0.11.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde_json 1.0.48 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde_yaml 0.8.11 (registry+https://github.com/rust-lang/crates.io-index)",
  "slab 0.4.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "stdweb 0.4.20 (registry+https://github.com/rust-lang/crates.io-index)",
- "thiserror 1.0.11 (registry+https://github.com/rust-lang/crates.io-index)",
+ "thiserror 1.0.13 (registry+https://github.com/rust-lang/crates.io-index)",
  "toml 0.5.6 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen-futures 0.4.9 (registry+https://github.com/rust-lang/crates.io-index)",
- "web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
- "yew-macro 0.14.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-futures 0.4.10 (registry+https://github.com/rust-lang/crates.io-index)",
+ "web-sys 0.3.37 (registry+https://github.com/rust-lang/crates.io-index)",
+ "yew-macro 0.15.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "yew-macro"
-version = "0.14.0"
+version = "0.15.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "boolinator 2.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "lazy_static 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
- "proc-macro-hack 0.5.11 (registry+https://github.com/rust-lang/crates.io-index)",
+ "proc-macro-hack 0.5.14 (registry+https://github.com/rust-lang/crates.io-index)",
  "proc-macro2 1.0.9 (registry+https://github.com/rust-lang/crates.io-index)",
- "quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "syn 1.0.16 (registry+https://github.com/rust-lang/crates.io-index)",
+ "quote 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
+ "syn 1.0.17 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "yew_styles"
-version = "0.2.0"
+version = "0.3.0"
 dependencies = [
- "stdweb 0.4.20 (registry+https://github.com/rust-lang/crates.io-index)",
- "uuid 0.8.1 (registry+https://github.com/rust-lang/crates.io-index)",
- "wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)",
- "web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)",
- "yew 0.14.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "getrandom 0.1.14 (registry+https://github.com/rust-lang/crates.io-index)",
+ "rand 0.7.3 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen-test 0.3.10 (registry+https://github.com/rust-lang/crates.io-index)",
+ "web-sys 0.3.37 (registry+https://github.com/rust-lang/crates.io-index)",
+ "yew 0.15.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [metadata]
-"checksum anyhow 1.0.26 (registry+https://github.com/rust-lang/crates.io-index)" = "7825f6833612eb2414095684fcf6c635becf3ce97fe48cf6421321e93bfbd53c"
+"checksum anyhow 1.0.27 (registry+https://github.com/rust-lang/crates.io-index)" = "013a6e0a2cbe3d20f9c60b65458f7a7f7a5e636c5d0f45a5a6aee5d4b1f01785"
 "checksum anymap 0.12.1 (registry+https://github.com/rust-lang/crates.io-index)" = "33954243bd79057c2de7338850b85983a44588021f8a5fee574a8888c6de4344"
 "checksum autocfg 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)" = "f8aac770f1885fd7e387acedd76065302551364496e46b3dd00860b2f8359b9d"
-"checksum base-x 0.2.6 (registry+https://github.com/rust-lang/crates.io-index)" = "1b20b618342cf9891c292c4f5ac2cde7287cc5c87e87e9c769d617793607dec1"
 "checksum bincode 1.2.1 (registry+https://github.com/rust-lang/crates.io-index)" = "5753e2a71534719bf3f4e57006c3a4f0d2c672a4b676eec84161f763eca87dbf"
 "checksum boolinator 2.4.0 (registry+https://github.com/rust-lang/crates.io-index)" = "cfa8873f51c92e232f9bac4065cddef41b714152812bfc5f7672ba16d6ef8cd9"
-"checksum bumpalo 3.2.0 (registry+https://github.com/rust-lang/crates.io-index)" = "1f359dc14ff8911330a51ef78022d376f25ed00248912803b58f00cb1c27f742"
+"checksum bumpalo 3.2.1 (registry+https://github.com/rust-lang/crates.io-index)" = "12ae9db68ad7fac5fe51304d20f016c911539251075a214f8e663babefa35187"
 "checksum byteorder 1.3.4 (registry+https://github.com/rust-lang/crates.io-index)" = "08c48aae112d48ed9f069b33538ea9e3e90aa263cfa3d1c24309612b1f7472de"
 "checksum bytes 0.5.4 (registry+https://github.com/rust-lang/crates.io-index)" = "130aac562c0dd69c56b3b1cc8ffd2e17be31d0b6c25b61c96b76231aa23e39e1"
 "checksum cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)" = "4785bdd1c96b2a846b2bd7cc02e86b6b3dbf14e7e53446c4f54c92a361040822"
 "checksum cfg-match 0.2.1 (registry+https://github.com/rust-lang/crates.io-index)" = "8100e46ff92eb85bf6dc2930c73f2a4f7176393c84a9446b3d501e1b354e7b34"
 "checksum console_error_panic_hook 0.1.6 (registry+https://github.com/rust-lang/crates.io-index)" = "b8d976903543e0c48546a91908f21588a680a8c8f984df9a5d69feccb2b2a211"
-"checksum discard 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)" = "212d0f5754cb6769937f4501cc0e67f4f4483c8d2c3e1e922ee9edbe4ab4c7c0"
 "checksum dtoa 0.4.5 (registry+https://github.com/rust-lang/crates.io-index)" = "4358a9e11b9a09cf52383b451b49a169e8d797b68aa02301ff586d70d9661ea3"
 "checksum fnv 1.0.6 (registry+https://github.com/rust-lang/crates.io-index)" = "2fad85553e09a6f881f739c29f0b00b0f01357c743266d478b68951ce23285f3"
 "checksum futures 0.3.4 (registry+https://github.com/rust-lang/crates.io-index)" = "5c329ae8753502fb44ae4fc2b622fa2a94652c41e795143765ba0927f92ab780"
@@ -747,58 +675,52 @@ dependencies = [
 "checksum gloo-events 0.1.1 (registry+https://github.com/rust-lang/crates.io-index)" = "088514ec8ef284891c762c88a66b639b3a730134714692ee31829765c5bc814f"
 "checksum gloo-file 0.1.0 (registry+https://github.com/rust-lang/crates.io-index)" = "8f9fecfe46b5dc3cc46f58e98ba580cc714f2c93860796d002eb3527a465ef49"
 "checksum gloo-timers 0.2.1 (registry+https://github.com/rust-lang/crates.io-index)" = "47204a46aaff920a1ea58b11d03dec6f704287d27561724a4631e450654a891f"
-"checksum half 1.4.1 (registry+https://github.com/rust-lang/crates.io-index)" = "20d6a47d6e4b8559729f58287efa8e6f767e603c068fea7a5e4d9f1cebe2bebb"
-"checksum http 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)" = "b708cc7f06493459026f53b9a61a7a121a5d1ec6238dee58ea4941132b30156b"
+"checksum half 1.5.0 (registry+https://github.com/rust-lang/crates.io-index)" = "f36b5f248235f45773d4944f555f83ea61fe07b18b561ccf99d7483d7381e54d"
+"checksum http 0.2.1 (registry+https://github.com/rust-lang/crates.io-index)" = "28d569972648b2c512421b5f2a405ad6ac9666547189d0c5477a3f200f3e02f9"
 "checksum indexmap 1.3.2 (registry+https://github.com/rust-lang/crates.io-index)" = "076f042c5b7b98f31d205f1249267e12a6518c1481e9dae9764af19b707d2292"
 "checksum itoa 0.4.5 (registry+https://github.com/rust-lang/crates.io-index)" = "b8b7a7c0c47db5545ed3fef7468ee7bb5b74691498139e4b3f6a20685dc6dd8e"
-"checksum js-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)" = "1cb931d43e71f560c81badb0191596562bafad2be06a3f9025b845c847c60df5"
+"checksum js-sys 0.3.37 (registry+https://github.com/rust-lang/crates.io-index)" = "6a27d435371a2fa5b6d2b028a74bbdb1234f308da363226a2854ca3ff8ba7055"
 "checksum lazy_static 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)" = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646"
-"checksum libc 0.2.67 (registry+https://github.com/rust-lang/crates.io-index)" = "eb147597cdf94ed43ab7a9038716637d2d1bf2bc571da995d0028dec06bd3018"
+"checksum libc 0.2.68 (registry+https://github.com/rust-lang/crates.io-index)" = "dea0c0405123bba743ee3f91f49b1c7cfb684eef0da0a50110f758ccf24cdff0"
 "checksum linked-hash-map 0.5.2 (registry+https://github.com/rust-lang/crates.io-index)" = "ae91b68aebc4ddb91978b11a1b02ddd8602a05ec19002801c5666000e05e0f83"
 "checksum log 0.4.8 (registry+https://github.com/rust-lang/crates.io-index)" = "14b6052be84e6b71ab17edffc2eeabf5c2c3ae1fdb464aae35ac50c67a44e1f7"
 "checksum memchr 2.3.3 (registry+https://github.com/rust-lang/crates.io-index)" = "3728d817d99e5ac407411fa471ff9800a778d88a24685968b36824eaf4bee400"
 "checksum num-traits 0.2.11 (registry+https://github.com/rust-lang/crates.io-index)" = "c62be47e61d1842b9170f0fdeec8eba98e60e90e5446449a0545e5152acd7096"
 "checksum pin-utils 0.1.0-alpha.4 (registry+https://github.com/rust-lang/crates.io-index)" = "5894c618ce612a3fa23881b152b608bafb8c56cfc22f434a3ba3120b40f7b587"
 "checksum ppv-lite86 0.2.6 (registry+https://github.com/rust-lang/crates.io-index)" = "74490b50b9fbe561ac330df47c08f3f33073d2d00c150f719147d7c54522fa1b"
-"checksum proc-macro-hack 0.5.11 (registry+https://github.com/rust-lang/crates.io-index)" = "ecd45702f76d6d3c75a80564378ae228a85f0b59d2f3ed43c91b4a69eb2ebfc5"
-"checksum proc-macro-nested 0.1.3 (registry+https://github.com/rust-lang/crates.io-index)" = "369a6ed065f249a159e06c45752c780bda2fb53c995718f9e484d08daa9eb42e"
+"checksum proc-macro-hack 0.5.14 (registry+https://github.com/rust-lang/crates.io-index)" = "fcfdefadc3d57ca21cf17990a28ef4c0f7c61383a28cb7604cf4a18e6ede1420"
+"checksum proc-macro-nested 0.1.4 (registry+https://github.com/rust-lang/crates.io-index)" = "8e946095f9d3ed29ec38de908c22f95d9ac008e424c7bcae54c75a79c527c694"
 "checksum proc-macro2 1.0.9 (registry+https://github.com/rust-lang/crates.io-index)" = "6c09721c6781493a2a492a96b5a5bf19b65917fe6728884e7c44dd0c60ca3435"
-"checksum quote 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)" = "053a8c8bcc71fcce321828dc897a98ab9760bef03a4fc36693c231e5b3216cfe"
+"checksum quote 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)" = "2bdc6c187c65bca4260c9011c9e3132efe4909da44726bad24cf7572ae338d7f"
 "checksum rand 0.7.3 (registry+https://github.com/rust-lang/crates.io-index)" = "6a6b1679d49b24bbfe0c803429aa1874472f50d9b363131f0e89fc356b544d03"
 "checksum rand_chacha 0.2.2 (registry+https://github.com/rust-lang/crates.io-index)" = "f4c8ed856279c9737206bf725bf36935d8666ead7aa69b52be55af369d193402"
 "checksum rand_core 0.5.1 (registry+https://github.com/rust-lang/crates.io-index)" = "90bde5296fc891b0cef12a6d03ddccc162ce7b2aff54160af9338f8d40df6d19"
 "checksum rand_hc 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)" = "ca3129af7b92a17112d59ad498c6f81eaf463253766b90396d39ea7a39d6613c"
 "checksum rmp 0.8.9 (registry+https://github.com/rust-lang/crates.io-index)" = "0f10b46df14cf1ee1ac7baa4d2fbc2c52c0622a4b82fa8740e37bc452ac0184f"
 "checksum rmp-serde 0.14.3 (registry+https://github.com/rust-lang/crates.io-index)" = "4c1ee98f14fe8b8e9c5ea13d25da7b2a1796169202c57a09d7288de90d56222b"
-"checksum rustc_version 0.2.3 (registry+https://github.com/rust-lang/crates.io-index)" = "138e3e0acb6c9fb258b19b67cb8abd63c00679d2851805ea151465464fe9030a"
-"checksum ryu 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)" = "bfa8506c1de11c9c4e4c38863ccbe02a305c8188e85a05a784c9e11e1c3910c8"
-"checksum semver 0.9.0 (registry+https://github.com/rust-lang/crates.io-index)" = "1d7eb9ef2c18661902cc47e535f9bc51b78acd254da71d375c2f6720d9a40403"
-"checksum semver-parser 0.7.0 (registry+https://github.com/rust-lang/crates.io-index)" = "388a1df253eca08550bef6c72392cfe7c30914bf41df5269b68cbd6ff8f570a3"
-"checksum serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)" = "414115f25f818d7dfccec8ee535d76949ae78584fc4f79a6f45a904bf8ab4449"
+"checksum ryu 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)" = "535622e6be132bccd223f4bb2b8ac8d53cda3c7a6394944d3b2b33fb974f9d76"
+"checksum scoped-tls 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)" = "ea6a9290e3c9cf0f18145ef7ffa62d68ee0bf5fcd651017e586dc7fd5da448c2"
+"checksum serde 1.0.105 (registry+https://github.com/rust-lang/crates.io-index)" = "e707fbbf255b8fc8c3b99abb91e7257a622caeb20a9818cbadbeeede4e0932ff"
 "checksum serde_cbor 0.11.1 (registry+https://github.com/rust-lang/crates.io-index)" = "1e18acfa2f90e8b735b2836ab8d538de304cbb6729a7360729ea5a895d15a622"
-"checksum serde_derive 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)" = "128f9e303a5a29922045a830221b8f78ec74a5f544944f3d5984f8ec3895ef64"
+"checksum serde_derive 1.0.105 (registry+https://github.com/rust-lang/crates.io-index)" = "ac5d00fc561ba2724df6758a17de23df5914f20e41cb00f94d5b7ae42fffaff8"
 "checksum serde_json 1.0.48 (registry+https://github.com/rust-lang/crates.io-index)" = "9371ade75d4c2d6cb154141b9752cf3781ec9c05e0e5cf35060e1e70ee7b9c25"
 "checksum serde_yaml 0.8.11 (registry+https://github.com/rust-lang/crates.io-index)" = "691b17f19fc1ec9d94ec0b5864859290dff279dbd7b03f017afda54eb36c3c35"
-"checksum sha1 0.6.0 (registry+https://github.com/rust-lang/crates.io-index)" = "2579985fda508104f7587689507983eadd6a6e84dd35d6d115361f530916fa0d"
 "checksum slab 0.4.2 (registry+https://github.com/rust-lang/crates.io-index)" = "c111b5bd5695e56cffe5129854aa230b39c93a305372fdbb2668ca2394eea9f8"
-"checksum stdweb 0.4.20 (registry+https://github.com/rust-lang/crates.io-index)" = "d022496b16281348b52d0e30ae99e01a73d737b2f45d38fed4edf79f9325a1d5"
-"checksum stdweb-derive 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)" = "c87a60a40fccc84bef0652345bbbbbe20a605bf5d0ce81719fc476f5c03b50ef"
-"checksum stdweb-internal-macros 0.2.9 (registry+https://github.com/rust-lang/crates.io-index)" = "58fa5ff6ad0d98d1ffa8cb115892b6e69d67799f6763e162a1c9db421dc22e11"
-"checksum stdweb-internal-runtime 0.1.5 (registry+https://github.com/rust-lang/crates.io-index)" = "213701ba3370744dcd1a12960caa4843b3d68b4d1c0a5d575e0d65b2ee9d16c0"
-"checksum syn 1.0.16 (registry+https://github.com/rust-lang/crates.io-index)" = "123bd9499cfb380418d509322d7a6d52e5315f064fe4b3ad18a53d6b92c07859"
-"checksum thiserror 1.0.11 (registry+https://github.com/rust-lang/crates.io-index)" = "ee14bf8e6767ab4c687c9e8bc003879e042a96fd67a3ba5934eadb6536bef4db"
-"checksum thiserror-impl 1.0.11 (registry+https://github.com/rust-lang/crates.io-index)" = "a7b51e1fbc44b5a0840be594fbc0f960be09050f2617e61e6aa43bef97cd3ef4"
+"checksum syn 1.0.17 (registry+https://github.com/rust-lang/crates.io-index)" = "0df0eb663f387145cab623dea85b09c2c5b4b0aef44e945d928e682fce71bb03"
+"checksum thiserror 1.0.13 (registry+https://github.com/rust-lang/crates.io-index)" = "e3711fd1c4e75b3eff12ba5c40dba762b6b65c5476e8174c1a664772060c49bf"
+"checksum thiserror-impl 1.0.13 (registry+https://github.com/rust-lang/crates.io-index)" = "ae2b85ba4c9aa32dd3343bd80eb8d22e9b54b7688c17ea3907f236885353b233"
 "checksum toml 0.5.6 (registry+https://github.com/rust-lang/crates.io-index)" = "ffc92d160b1eef40665be3a05630d003936a3bc7da7421277846c2613e92c71a"
 "checksum unicode-xid 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)" = "826e7639553986605ec5979c7dd957c7895e93eabed50ab2ffa7f6128a75097c"
-"checksum uuid 0.8.1 (registry+https://github.com/rust-lang/crates.io-index)" = "9fde2f6a4bea1d6e007c4ad38c6839fa71cbb63b6dbf5b595aa38dc9b1093c11"
 "checksum wasi 0.9.0+wasi-snapshot-preview1 (registry+https://github.com/rust-lang/crates.io-index)" = "cccddf32554fecc6acb585f82a32a72e28b48f8c4c1883ddfeeeaa96f7d8e519"
-"checksum wasm-bindgen 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)" = "3557c397ab5a8e347d434782bcd31fc1483d927a6826804cec05cc792ee2519d"
-"checksum wasm-bindgen-backend 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)" = "e0da9c9a19850d3af6df1cb9574970b566d617ecfaf36eb0b706b6f3ef9bd2f8"
-"checksum wasm-bindgen-futures 0.4.9 (registry+https://github.com/rust-lang/crates.io-index)" = "457414a91863c0ec00090dba537f88ab955d93ca6555862c29b6d860990b8a8a"
-"checksum wasm-bindgen-macro 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)" = "0f6fde1d36e75a714b5fe0cffbb78978f222ea6baebb726af13c78869fdb4205"
-"checksum wasm-bindgen-macro-support 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)" = "25bda4168030a6412ea8a047e27238cadf56f0e53516e1e83fec0a8b7c786f6d"
-"checksum wasm-bindgen-shared 0.2.59 (registry+https://github.com/rust-lang/crates.io-index)" = "fc9f36ad51f25b0219a3d4d13b90eb44cd075dff8b6280cca015775d7acaddd8"
-"checksum web-sys 0.3.36 (registry+https://github.com/rust-lang/crates.io-index)" = "721c6263e2c66fd44501cc5efbfa2b7dfa775d13e4ea38c46299646ed1f9c70a"
+"checksum wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "2cc57ce05287f8376e998cbddfb4c8cb43b84a7ec55cf4551d7c00eef317a47f"
+"checksum wasm-bindgen-backend 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "d967d37bf6c16cca2973ca3af071d0a2523392e4a594548155d89a678f4237cd"
+"checksum wasm-bindgen-futures 0.4.10 (registry+https://github.com/rust-lang/crates.io-index)" = "7add542ea1ac7fdaa9dc25e031a6af33b7d63376292bd24140c637d00d1c312a"
+"checksum wasm-bindgen-macro 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "8bd151b63e1ea881bb742cd20e1d6127cef28399558f3b5d415289bc41eee3a4"
+"checksum wasm-bindgen-macro-support 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "d68a5b36eef1be7868f668632863292e37739656a80fc4b9acec7b0bd35a4931"
+"checksum wasm-bindgen-shared 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "daf76fe7d25ac79748a37538b7daeed1c7a6867c92d3245c12c6222e4a20d639"
+"checksum wasm-bindgen-test 0.3.10 (registry+https://github.com/rust-lang/crates.io-index)" = "648da3460c6d2aa04b715a936329e2e311180efe650b2127d6267f4193ccac14"
+"checksum wasm-bindgen-test-macro 0.3.10 (registry+https://github.com/rust-lang/crates.io-index)" = "cf2f86cd78a2aa7b1fb4bb6ed854eccb7f9263089c79542dca1576a1518a8467"
+"checksum web-sys 0.3.37 (registry+https://github.com/rust-lang/crates.io-index)" = "2d6f51648d8c56c366144378a33290049eafdd784071077f6fe37dae64c1c4cb"
 "checksum yaml-rust 0.4.3 (registry+https://github.com/rust-lang/crates.io-index)" = "65923dd1784f44da1d2c3dbbc5e822045628c590ba72123e1c73d3c230c4434d"
-"checksum yew 0.14.1 (registry+https://github.com/rust-lang/crates.io-index)" = "29d4669e99b3ab4473eb8337c4c2f0c5e1ad6230ee704d6460bdf40084480db1"
-"checksum yew-macro 0.14.0 (registry+https://github.com/rust-lang/crates.io-index)" = "fb25d91f16265dd1643497ac3252be6c21c169d9cf3babcae32325c74200499f"
+"checksum yew 0.15.0 (registry+https://github.com/rust-lang/crates.io-index)" = "7532a83ec6c2173cd72888bb3ac0e3656d0dd152476f71631f4b465481855391"
+"checksum yew-macro 0.15.0 (registry+https://github.com/rust-lang/crates.io-index)" = "28cf0535e956932124a66721a0f91a1f65a1654ab509c43c3b5d71eb10f20089"
diff --git a/crate/yew_styles/Cargo.toml b/crate/yew_styles/Cargo.toml
index 44d8239..488c432 100644
--- a/crate/yew_styles/Cargo.toml
+++ b/crate/yew_styles/Cargo.toml
@@ -1,21 +1,23 @@
 [package]
 name = "yew_styles"
-version = "0.2.1"
+version = "0.3.0"
 description = "Framework styles for yew"
-authors = ["spieljs <spieljs@gmail.com>"]
+documentation = "https://docs.rs/crate/yew_styles/0.3.0"
+authors = ["Francisco Jesus Navarro Cortes <spieljs@gmail.com>"]
 edition = "2018"
 license = "MIT"
 repository = "https://github.com/spielrs/yew-styles-page/tree/master/crate/yew_styles"
+readme = "README.md"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
-[features]
-std_web = ["stdweb", "yew/std_web"]
-web_sys = ["web-sys", "yew/web_sys"]
+[lib]
+crate-type = ["cdylib", "rlib"]
 
 [dependencies]
-wasm-bindgen = "0.2"
-yew = { version = "0.14", features = ["toml", "yaml", "msgpack", "cbor"], optional = true}
-stdweb = { version = "0.4", optional = true}
-web-sys = {version = "0.3", features = ["HtmlDocument", "HtmlCollection", "CssStyleDeclaration", "HtmlElement"], optional=true}
-uuid = {version= "0.8", features=["v4", "wasm-bindgen", "stdweb"]}
+wasm-bindgen = "0.2.60"
+yew = { version="0.15", features = ["toml", "yaml", "msgpack", "cbor", "web_sys"] }
+web-sys = {version = "0.3.36", features = ["HtmlDocument", "HtmlCollection", "CssStyleDeclaration", "HtmlElement", "Node"]}
+rand = {version="0.7", features = ["getrandom"]}
+getrandom = {version = "0.1", features= ["wasm-bindgen"]}
+wasm-bindgen-test = "0.3"
diff --git a/crate/yew_styles/LICENSE b/crate/yew_styles/LICENSE
new file mode 100644
index 0000000..cf246f1
--- /dev/null
+++ b/crate/yew_styles/LICENSE
@@ -0,0 +1,25 @@
+Copyright (c) 2020 Francisco Jesus Navarro Cortes
+
+Permission is hereby granted, free of charge, to any
+person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the
+Software without restriction, including without
+limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software
+is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice
+shall be included in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT
+SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
+IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.
diff --git a/crate/yew_styles/README.md b/crate/yew_styles/README.md
new file mode 100644
index 0000000..f52007b
--- /dev/null
+++ b/crate/yew_styles/README.md
@@ -0,0 +1,26 @@
+# Yew Styles
+Yew Styles is a style framework for yew
+
+## Motivation
+The purpose of developing this project is first,
+provide a style framework for yew because there isn't not many options currently,
+also to create a layout system which is not far of the flexbox concept, and,
+to take the rust benefits and implement a properties selected by enumeration
+in the most of the cases which makes fast for developing applications and avoids the practice try and error
+
+## How it works
+Each component is splited in two parts, the logical yew component and its sass module,
+however, it is not necessary to worry about the sass module only it needs to be include in the project
+
+### How install it
+1. Install the sass module: `npm install yew-styles`
+2. Add the yew_style crate in Cargo.toml file: `yew_styles = "0.3.0"`
+3. Import the main.css file in you main javascript/typescript file project: 
+```typescript
+    import 'node_modules/yew-styles/main.css';
+```
+4. Ready to import and use in your project 🚀
+
+## Development phase
+Yew style is in early phase, currently doesn't have enough components to cover all the requirements that could need a website/web application.
+All contributions are appreciated.
\ No newline at end of file
diff --git a/crate/yew_styles/build.rs b/crate/yew_styles/build.rs
deleted file mode 100644
index bbe0527..0000000
--- a/crate/yew_styles/build.rs
+++ /dev/null
@@ -1,9 +0,0 @@
-pub fn main() {
-    let using_web_sys = cfg!(feature = "web_sys");
-    let using_std_web = cfg!(feature = "std_web");
-    if using_web_sys && using_std_web {
-        panic!("Yew does not allow the `web_sys` and `std_web` cargo features to be used simultaneously");
-    } else if !using_web_sys && !using_std_web {
-        panic!("Yew requires selecting either the `web_sys` or `std_web` cargo feature");
-    }
-}
diff --git a/crate/yew_styles/src/assets.rs b/crate/yew_styles/src/assets.rs
index 879c524..9829e3c 100644
--- a/crate/yew_styles/src/assets.rs
+++ b/crate/yew_styles/src/assets.rs
@@ -1,4 +1,3 @@
-#[cfg(any(feature = "std_web", feature = "web_sys"))]
 use yew::prelude::*;
 
 #[derive(Clone)]
@@ -31,6 +30,10 @@ impl Component for Assets {
         false
     }
 
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        false
+    }
+
     fn view(&self) -> Html {
         get_icon(self.props.asset.clone(), self.props.class_name.clone())
     }
diff --git a/crate/yew_styles/src/components/button.rs b/crate/yew_styles/src/components/button.rs
index 0d7499a..6e75030 100644
--- a/crate/yew_styles/src/components/button.rs
+++ b/crate/yew_styles/src/components/button.rs
@@ -1,25 +1,9 @@
 use crate::styles::{get_pallete, get_style, Palette, Style};
+use wasm_bindgen_test::*;
+use web_sys::window;
 use yew::prelude::*;
 
-#[derive(Clone)]
-pub enum ButtonType {
-    Primary,
-    Secondary,
-    Success,
-    Info,
-    Link,
-    Warning,
-    Danger,
-    Standard,
-}
-
-#[derive(Clone)]
-pub enum ButtonStyle {
-    Regular,
-    Light,
-    Outline,
-}
-
+/// The standard sizes for button
 #[derive(Clone)]
 pub enum Size {
     Small,
@@ -27,6 +11,65 @@ pub enum Size {
     Big,
 }
 
+/// # Button component
+///
+/// ## Example
+///
+/// ```rust
+/// use yew::prelude::*;
+/// use yew::services::ConsoleService;
+/// use yew_styles::{
+///     button::{Button, Size},
+///     styles::{Palette, Style},
+/// };
+///
+/// pub struct App {
+///   link: ComponentLink<Self>,
+/// }
+///
+/// pub enum Msg {
+///   Clicked(String),
+/// }
+/// #[derive(Clone, Properties)]
+/// pub struct Props {}
+///
+/// impl Component for App {
+///     type Message = Msg;
+///     type Properties = Props;
+///
+///     fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
+///         App {
+///             link
+///         }
+///     }
+///
+///     fn update(&mut self, msg: Self::Message) -> ShouldRender {
+///         match msg {
+///             Msg::Clicked(greeting) => {
+///                 let mut console = ConsoleService::new();
+///                 console.log(format!("{}", greeting))
+///             }
+///         }
+///         false
+///     }
+///
+///     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+///         false
+///     }
+///
+///     fn view(&self) -> Html {
+///        html! {
+///          <Button
+///             onsignal=link.callback(move |_| Msg::Clicked("Hello world"))
+///             class_name="hello-world"
+///             button_type=Pallete::Standard
+///             button_style=Style::Light
+///             size=Size::Medium
+///          >{"Greeting"}</Button>
+///        }
+///     }
+/// }
+/// ```
 pub struct Button {
     link: ComponentLink<Self>,
     props: ButtonProps,
@@ -56,14 +99,19 @@ impl From<Props> for ButtonProps {
 
 #[derive(Clone, Properties)]
 pub struct Props {
+    /// Type botton style. Options included in `Pallete`
     #[prop_or(Palette::Standard)]
     pub button_type: Palette,
+    /// General property to add custom class styles
     #[prop_or_default]
     pub class_name: String,
+    /// Three diffent button standard sizes. Options included in `Size`
     #[prop_or(Size::Medium)]
     pub size: Size,
+    /// Button styles. Options included in `Style`
     #[prop_or(Style::Regular)]
     pub button_style: Style,
+    /// Click event for button
     pub onsignal: Callback<()>,
     pub children: Children,
 }
@@ -103,7 +151,7 @@ impl Component for Button {
 
     fn change(&mut self, props: Self::Properties) -> ShouldRender {
         self.props = ButtonProps::from(props);
-        true
+        false
     }
 
     fn view(&self) -> Html {
@@ -120,3 +168,109 @@ impl Component for Button {
         }
     }
 }
+
+wasm_bindgen_test_configure!(run_in_browser);
+
+#[wasm_bindgen_test]
+fn should_trigger_action_when_button_clicked() {
+    let body = window().unwrap().document().unwrap().body().unwrap();
+
+    let element = window()
+        .unwrap()
+        .document()
+        .unwrap()
+        .create_element("div")
+        .unwrap();
+    element.set_text_content(Some("home"));
+    element.set_id("menu");
+
+    body.append_child(&element).unwrap();
+
+    let onchange_name = Callback::from(|_| {
+        let content = window()
+            .unwrap()
+            .document()
+            .unwrap()
+            .get_element_by_id("menu")
+            .unwrap();
+
+        content.set_text_content(Some("about"));
+    });
+
+    let props = Props {
+        class_name: String::from("test-button"),
+        size: Size::Medium,
+        button_style: Style::Regular,
+        onsignal: onchange_name,
+        button_type: Palette::Standard,
+        children: Children::new(vec![html! {<div id="submenu">{"another menu"}</div>}]),
+    };
+
+    let link = ComponentLink::new();
+
+    let mut button = Button::create(props.clone(), link);
+
+    props.onsignal.emit(());
+
+    button.change(props);
+
+    let updated_content = window()
+        .unwrap()
+        .document()
+        .unwrap()
+        .get_element_by_id("menu")
+        .unwrap()
+        .text_content()
+        .unwrap();
+
+    assert_eq!(updated_content, String::from("about"));
+}
+
+#[wasm_bindgen_test]
+fn should_create_button_component() {
+    let on_add_child = Callback::from(|_| {
+        let body = window().unwrap().document().unwrap().body().unwrap();
+
+        let child_element = window()
+            .unwrap()
+            .document()
+            .unwrap()
+            .create_element("div")
+            .unwrap();
+
+        child_element.set_text_content(Some("child"));
+        child_element.set_id("child");
+        body.append_child(&child_element).unwrap();
+    });
+
+    let props = Props {
+        class_name: String::from("test-button"),
+        size: Size::Medium,
+        button_style: Style::Regular,
+        onsignal: on_add_child,
+        button_type: Palette::Standard,
+        children: Children::new(vec![html! {<div id="parent">{"parent"}</div>}]),
+    };
+
+    let link = ComponentLink::new();
+
+    let mut button = Button::create(props.clone(), link.clone());
+
+    props.onsignal.emit(());
+
+    button.change(props);
+
+    let button_vnode = button.render();
+
+    let vnode_expected = html! {
+        <button
+            onclick=link.callback(|_| Msg::Clicked)
+            class="button standard medium regular test-button">
+            <>
+                <div id="parent">{"parent"}</div>
+            </>
+        </button>
+    };
+
+    assert_eq!(button_vnode, vnode_expected);
+}
diff --git a/crate/yew_styles/src/components/item.rs b/crate/yew_styles/src/components/item.rs
deleted file mode 100644
index d4f9f01..0000000
--- a/crate/yew_styles/src/components/item.rs
+++ /dev/null
@@ -1,165 +0,0 @@
-#[cfg(any(feature = "web_sys", feature = "std_web"))]
-use crate::utils::create_style;
-use yew::prelude::*;
-
-#[derive(Clone)]
-pub enum ItemLayout {
-    ItXs(i8),
-    ItS(i8),
-    ItM(i8),
-    ItL(i8),
-    ItXl(i8),
-}
-
-#[derive(Clone)]
-pub enum AlignSelf {
-    Auto,
-    FlexStart,
-    FlexEnd,
-    Center,
-    Baseline,
-    Stretch,
-}
-
-pub enum Msg {
-    Clicked,
-}
-
-pub struct Item {
-    link: ComponentLink<Self>,
-    props: Props,
-}
-
-#[derive(Clone)]
-struct ItemProps {
-    layouts_classes: String,
-    name: String,
-    index: i16,
-    class_name: String,
-}
-
-#[derive(Clone, Copy)]
-struct ItemModel;
-
-#[derive(Clone, Properties)]
-pub struct Props {
-    pub layouts: Vec<ItemLayout>,
-    #[prop_or(AlignSelf::Auto)]
-    pub align_self: AlignSelf,
-    #[prop_or_default]
-    pub name: String,
-    #[prop_or_default]
-    pub class_name: String,
-    #[prop_or_default]
-    pub index: i16,
-    #[prop_or(Callback::noop())]
-    pub onsignal: Callback<()>,
-    pub children: Children,
-}
-
-impl Component for Item {
-    type Message = Msg;
-    type Properties = Props;
-
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        Item { link, props }
-    }
-
-    fn mounted(&mut self) -> ShouldRender {
-        ItemModel.init(self.props.clone());
-
-        true
-    }
-
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
-        match msg {
-            Msg::Clicked => {
-                self.props.onsignal.emit(());
-            }
-        };
-
-        false
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        self.props = props;
-        true
-    }
-
-    fn view(&self) -> Html {
-        let item_props = ItemProps::from(self.props.clone());
-
-        html! {
-            <div
-                class=if item_props.name == "" {
-                    format!("item item-{} {} {}", item_props.index, item_props.layouts_classes, item_props.class_name)
-                } else {
-                    format!("item item-{}-{} {} {}", item_props.name, item_props.index, item_props.layouts_classes, item_props.class_name)
-                }
-
-                onclick=self.link.callback(|_| Msg::Clicked)
-            >
-                {self.props.children.render()}
-            </div>
-        }
-    }
-}
-
-impl From<Props> for ItemProps {
-    fn from(props: Props) -> Self {
-        ItemProps {
-            layouts_classes: ItemModel.get_layout_classes(props.layouts),
-            name: props.name,
-            index: props.index,
-            class_name: props.class_name,
-        }
-    }
-}
-
-impl ItemModel {
-    fn init(self, props: Props) {
-        self.get_item_align(props.align_self, props.index, props.name);
-    }
-
-    fn get_layout_classes(self, layouts_prop: Vec<ItemLayout>) -> String {
-        let mut layouts = layouts_prop
-            .into_iter()
-            .map(|layout| self.get_layout(layout))
-            .collect::<String>();
-
-        layouts.truncate(layouts.len() - 1);
-        layouts
-    }
-
-    fn get_layout(self, item_layout: ItemLayout) -> String {
-        match item_layout {
-            ItemLayout::ItXs(size) => format!("it-xs-{} ", size),
-            ItemLayout::ItS(size) => format!("it-s-{} ", size),
-            ItemLayout::ItM(size) => format!("it-m-{} ", size),
-            ItemLayout::ItL(size) => format!("it-l-{} ", size),
-            ItemLayout::ItXl(size) => format!("it-xl-{} ", size),
-        }
-    }
-
-    fn get_item_align(self, align: AlignSelf, index: i16, name: String) {
-        let value = match align {
-            AlignSelf::Auto => format!("auto"),
-            AlignSelf::Baseline => format!("baseline"),
-            AlignSelf::Center => format!("center"),
-            AlignSelf::FlexStart => format!("flex-start"),
-            AlignSelf::FlexEnd => format!("flex-end"),
-            AlignSelf::Stretch => format!("stretch"),
-        };
-
-        #[cfg(any(feature = "web_sys", feature = "std_web"))]
-        create_style(
-            String::from("align-self"),
-            value,
-            if name == "" {
-                format!("item-{}", index)
-            } else {
-                format!("item-{}-{}", name, index)
-            },
-        );
-    }
-}
diff --git a/crate/yew_styles/src/components/container.rs b/crate/yew_styles/src/components/layouts/container.rs
similarity index 54%
rename from crate/yew_styles/src/components/container.rs
rename to crate/yew_styles/src/components/layouts/container.rs
index 26b8847..5a17d68 100644
--- a/crate/yew_styles/src/components/container.rs
+++ b/crate/yew_styles/src/components/layouts/container.rs
@@ -1,13 +1,74 @@
-use crate::utils::create_style;
+use crate::utils::{create_style, get_random_string};
+use wasm_bindgen_test::*;
 use yew::prelude::*;
 
+/// # Container component
+///
+/// ## Example
+///
+/// The layouts in yew styles is base in flexbox
+/// you can fine more information about the properties options
+/// [here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
+///
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_styles::{
+///     layouts::{
+///         container::{Wrap, Direction},
+///         item::{ItenLayout, AlignSelf}
+///     }
+/// };
+///
+/// pub struct App {
+///   link: ComponentLink<Self>,
+/// }
+///
+/// pub enum Msg {
+///   Clicked(String),
+/// }
+/// #[derive(Clone, Properties)]
+/// pub struct Props {}
+///
+/// impl Component for App {
+///     type Message = Msg;
+///     type Properties = Props;
+///
+///     fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
+///         App {
+///             link
+///         }
+///     }
+///
+///     fn update(&mut self, msg: Self::Message) -> ShouldRender {
+///         false
+///     }
+///
+///     fn view(&self) -> Html {
+///        html! {
+///          <Container direction=Direction::Row wrap=Wrap::Wrap class_name="align-item">
+///                <Item name="align" layouts=vec!(ItemLayout::ItXs(4)) align_self=AlignSelf::FlexStart>
+///                    <h3>{"start"}</h3>
+///                </Item>
+///                <Item name="align" layouts=vec!(ItemLayout::ItXs(4)) align_self=AlignSelf::Center>
+///                    <h3>{"center"}</h3>
+///                </Item>
+///                <Item name="align" layouts=vec!(ItemLayout::ItXs(4)) align_self=AlignSelf::FlexEnd>
+///                    <h3>{"end"}</h3>
+///                </Item>
+///           </Container>
+///        }
+///     }
+/// }
+/// ```
 pub struct Container {
     props: Props,
+    pub key: String,
 }
 
 #[derive(Clone, Copy)]
 struct ContainerModel;
 
+/// Which direction are placing the items
 #[derive(Clone)]
 pub enum Direction {
     Row,
@@ -16,6 +77,7 @@ pub enum Direction {
     ColumnReverse,
 }
 
+/// Set a wrap for the items
 #[derive(Clone)]
 pub enum Wrap {
     Nowrap,
@@ -30,6 +92,7 @@ pub enum Mode {
     NoMode,
 }
 
+/// Set how will be justified the content
 #[derive(Clone)]
 pub enum JustifyContent {
     FlexStart(Mode),
@@ -44,6 +107,7 @@ pub enum JustifyContent {
     Rigth(Mode),
 }
 
+/// Set how will be aligned the items
 #[derive(Clone)]
 pub enum AlignItems {
     Stretch(Mode),
@@ -59,6 +123,7 @@ pub enum AlignItems {
     SelfEnd(Mode),
 }
 
+/// set how will be aligned the content
 #[derive(Clone)]
 pub enum AlignContent {
     FlexStart(Mode),
@@ -79,20 +144,22 @@ pub enum Msg {}
 
 #[derive(Clone, Properties)]
 pub struct Props {
+    /// Which direction are placing the items
     pub direction: Direction,
+    /// Set a wrap for the items
     pub wrap: Wrap,
-    #[prop_or_default]
-    pub index: i16,
+    /// Set how will be justified the content
     #[prop_or(JustifyContent::FlexStart(Mode::NoMode))]
     pub justify_content: JustifyContent,
+    /// Set how will be aligned the content
     #[prop_or(AlignContent::Stretch(Mode::NoMode))]
     pub align_content: AlignContent,
+    /// Set how will be aligned the items
     #[prop_or(AlignItems::Stretch(Mode::NoMode))]
     pub align_items: AlignItems,
+    /// General property to add custom class styles
     #[prop_or_default]
     pub class_name: String,
-    #[prop_or_default]
-    pub name: String,
     pub children: Children,
 }
 
@@ -101,32 +168,28 @@ impl Component for Container {
     type Properties = Props;
 
     fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Container { props }
-    }
+        let key = get_random_string(10);
 
-    fn mounted(&mut self) -> ShouldRender {
-        ContainerModel.init(self.props.clone());
+        Container { props, key }
+    }
 
-        true
+    fn rendered(&mut self, first_render: bool) {
+        if first_render {
+            ContainerModel.init(self.props.clone(), self.key.clone());
+        }
     }
 
     fn update(&mut self, _msg: Self::Message) -> ShouldRender {
         false
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        self.props = props;
-        true
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        false
     }
 
     fn view(&self) -> Html {
         html! {
-            <div class=if self.props.name == ""
-                {
-                    format!("container container-{} {}", self.props.index, self.props.class_name)
-                } else {
-                    format!("container container-{}-{} {}", self.props.name, self.props.index, self.props.class_name)
-                }
+            <div class=format!("container container-{} {}", self.key, self.props.class_name)
             >
                 {self.props.children.render()}
             </div>
@@ -135,25 +198,25 @@ impl Component for Container {
 }
 
 impl ContainerModel {
-    fn init(self, props: Props) {
-        self.get_flow(props.direction, props.wrap, props.index, props.name.clone());
-        self.get_justify_content(props.justify_content, props.index, props.name.clone());
-        self.get_align_content(props.align_content, props.index, props.name.clone());
-        self.get_align_items(props.align_items, props.index, props.name);
+    fn init(self, props: Props, key: String) {
+        self.get_flow(props.direction, props.wrap, key.clone());
+        self.get_justify_content(props.justify_content, key.clone());
+        self.get_align_content(props.align_content, key.clone());
+        self.get_align_items(props.align_items, key);
     }
 
-    fn get_flow(self, direction: Direction, wrap: Wrap, index: i16, name: String) {
+    fn get_flow(self, direction: Direction, wrap: Wrap, key: String) {
         let direction = match direction {
-            Direction::Row => format!("row"),
-            Direction::RowReverse => format!("row-reverse"),
-            Direction::Column => format!("column"),
-            Direction::ColumnReverse => format!("column-reverse"),
+            Direction::Row => "row".to_string(),
+            Direction::RowReverse => "row-reverse".to_string(),
+            Direction::Column => "column".to_string(),
+            Direction::ColumnReverse => "column-reverse".to_string(),
         };
 
         let wrap = match wrap {
-            Wrap::Nowrap => format!("nowrap"),
-            Wrap::Wrap => format!("wrap"),
-            Wrap::WrapReverse => format!("wrap-reverse"),
+            Wrap::Nowrap => "nowrap".to_string(),
+            Wrap::Wrap => "wrap".to_string(),
+            Wrap::WrapReverse => "wrap-reverse".to_string(),
         };
 
         let value = format!("{} {}", direction, wrap);
@@ -161,23 +224,19 @@ impl ContainerModel {
         create_style(
             String::from("flex-flow"),
             value,
-            if name == "" {
-                format!("container-{}", index)
-            } else {
-                format!("container-{}-{}", name, index)
-            },
+            format!("container-{}", key),
         );
     }
 
     fn get_mode(self, mode: Mode) -> String {
         match mode {
-            Mode::NoMode => format!(""),
-            Mode::SafeMode => format!(" safe"),
-            Mode::UnsafeMode => format!(" unsafe"),
+            Mode::NoMode => "".to_string(),
+            Mode::SafeMode => " safe".to_string(),
+            Mode::UnsafeMode => " unsafe".to_string(),
         }
     }
 
-    fn get_justify_content(self, justify_content: JustifyContent, index: i16, name: String) {
+    fn get_justify_content(self, justify_content: JustifyContent, key: String) {
         let value = match justify_content {
             JustifyContent::FlexStart(mode) => format!("flex-start{}", self.get_mode(mode)),
             JustifyContent::FlexEnd(mode) => format!("flex-end{}", self.get_mode(mode)),
@@ -194,15 +253,11 @@ impl ContainerModel {
         create_style(
             String::from("justify-content"),
             value,
-            if name == "" {
-                format!("container-{}", index)
-            } else {
-                format!("container-{}-{}", name, index)
-            },
+            format!("container-{}", key),
         );
     }
 
-    fn get_align_content(self, align_content: AlignContent, index: i16, name: String) {
+    fn get_align_content(self, align_content: AlignContent, key: String) {
         let value = match align_content {
             AlignContent::Stretch(mode) => format!("stretch{}", self.get_mode(mode)),
             AlignContent::FlexStart(mode) => format!("flex-start{}", self.get_mode(mode)),
@@ -221,15 +276,11 @@ impl ContainerModel {
         create_style(
             String::from("align-content"),
             value,
-            if name == "" {
-                format!("container-{}", index)
-            } else {
-                format!("container-{}-{}", name, index)
-            },
+            format!("container-{}", key),
         );
     }
 
-    fn get_align_items(self, align_items: AlignItems, index: i16, name: String) {
+    fn get_align_items(self, align_items: AlignItems, key: String) {
         let value = match align_items {
             AlignItems::Stretch(mode) => format!("stretch{}", self.get_mode(mode)),
             AlignItems::Baseline(mode) => format!("baseline{}", self.get_mode(mode)),
@@ -247,11 +298,40 @@ impl ContainerModel {
         create_style(
             String::from("align-items"),
             value,
-            if name == "" {
-                format!("container-{}", index)
-            } else {
-                format!("container-{}-{}", name, index)
-            },
+            format!("container-{}", key),
         );
     }
 }
+
+wasm_bindgen_test_configure!(run_in_browser);
+
+#[wasm_bindgen_test]
+fn should_create_a_container() {
+    let props_container = Props {
+        direction: Direction::Row,
+        wrap: Wrap::Wrap,
+        justify_content: JustifyContent::Center(Mode::NoMode),
+        align_content: AlignContent::Center(Mode::NoMode),
+        align_items: AlignItems::Center(Mode::NoMode),
+        class_name: String::from("layout-test"),
+        children: Children::new(vec![html! {
+            <div id="container">{"Container"}</div>
+        }]),
+    };
+
+    let link = ComponentLink::new();
+
+    let container = Container::create(props_container, link);
+
+    let container_vnode = container.render();
+
+    let vnode_expected = html! {
+        <div class=format!("container container-{} layout-test", container.key)>
+            <>
+                <div id="container">{"Container"}</div>
+            </>
+        </div>
+    };
+
+    assert_eq!(container_vnode, vnode_expected);
+}
diff --git a/crate/yew_styles/src/components/layouts/item.rs b/crate/yew_styles/src/components/layouts/item.rs
new file mode 100644
index 0000000..dd5536f
--- /dev/null
+++ b/crate/yew_styles/src/components/layouts/item.rs
@@ -0,0 +1,285 @@
+use crate::utils::{create_style, get_random_string};
+use wasm_bindgen_test::*;
+use web_sys::window;
+use yew::prelude::*;
+
+/// Percent of the layout that will take the item.
+#[derive(Clone)]
+pub enum ItemLayout {
+    ItXs(i8),
+    ItS(i8),
+    ItM(i8),
+    ItL(i8),
+    ItXl(i8),
+}
+
+/// Align the item itself
+#[derive(Clone)]
+pub enum AlignSelf {
+    Auto,
+    FlexStart,
+    FlexEnd,
+    Center,
+    Baseline,
+    Stretch,
+}
+
+pub enum Msg {
+    Clicked,
+}
+
+/// # Item component
+///
+/// The layouts in yew styles is base in flexbox
+/// you can fine more information about the properties options
+/// [here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
+///
+/// ## Example
+///
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_styles::{
+///     layouts::{
+///         container::{Wrap, Direction},
+///         item::{ItenLayout, AlignSelf}
+///     }
+/// };
+///
+/// pub struct App {
+///   link: ComponentLink<Self>,
+/// }
+///
+/// pub enum Msg {
+///   Clicked(String),
+/// }
+/// #[derive(Clone, Properties)]
+/// pub struct Props {}
+///
+/// impl Component for App {
+///     type Message = Msg;
+///     type Properties = Props;
+///
+///     fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
+///         App {
+///             link
+///         }
+///     }
+///
+///     fn update(&mut self, msg: Self::Message) -> ShouldRender {
+///         false
+///     }
+///
+///     fn view(&self) -> Html {
+///        html! {
+///          <Container direction=Direction::Row wrap=Wrap::Wrap class_name="align-item">
+///                <Item name="align" layouts=vec!(ItemLayout::ItXs(4)) align_self=AlignSelf::FlexStart>
+///                    <h3>{"start"}</h3>
+///                </Item>
+///                <Item name="align" layouts=vec!(ItemLayout::ItXs(4)) align_self=AlignSelf::Center>
+///                    <h3>{"center"}</h3>
+///                </Item>
+///                <Item name="align" layouts=vec!(ItemLayout::ItXs(4)) align_self=AlignSelf::FlexEnd>
+///                    <h3>{"end"}</h3>
+///                </Item>
+///           </Container>
+///        }
+///     }
+/// }
+/// ```
+pub struct Item {
+    link: ComponentLink<Self>,
+    props: Props,
+    pub key: String,
+}
+
+#[derive(Clone)]
+struct ItemProps {
+    layouts_classes: String,
+    class_name: String,
+}
+
+#[derive(Clone, Copy)]
+struct ItemModel;
+
+#[derive(Clone, Properties)]
+pub struct Props {
+    /// Percent of the layout that will take the item.
+    pub layouts: Vec<ItemLayout>,
+    #[prop_or(AlignSelf::Auto)]
+    /// Align the item itself
+    pub align_self: AlignSelf,
+    /// General property to add custom class styles
+    #[prop_or_default]
+    pub class_name: String,
+    /// Click event for the item
+    #[prop_or(Callback::noop())]
+    pub onsignal: Callback<()>,
+    pub children: Children,
+}
+
+impl Component for Item {
+    type Message = Msg;
+    type Properties = Props;
+
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        let key = get_random_string(10);
+
+        Item { link, props, key }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::Clicked => {
+                self.props.onsignal.emit(());
+            }
+        };
+
+        false
+    }
+
+    fn rendered(&mut self, first_render: bool) {
+        if first_render {
+            ItemModel.init(self.props.align_self.clone(), self.key.clone());
+        }
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        let item_props = ItemProps::from(self.props.clone());
+
+        html! {
+            <div
+                class=format!("item item-{} {} {}", self.key, item_props.layouts_classes, item_props.class_name)
+
+                onclick=self.link.callback(|_| Msg::Clicked)
+            >
+                {self.props.children.render()}
+            </div>
+        }
+    }
+}
+
+impl From<Props> for ItemProps {
+    fn from(props: Props) -> Self {
+        ItemProps {
+            layouts_classes: ItemModel.get_layout_classes(props.layouts),
+            class_name: props.class_name,
+        }
+    }
+}
+
+impl ItemModel {
+    fn init(self, align_self: AlignSelf, key: String) {
+        self.get_item_align(align_self, key);
+    }
+
+    fn get_layout_classes(self, layouts_prop: Vec<ItemLayout>) -> String {
+        let mut layouts = layouts_prop
+            .into_iter()
+            .map(|layout| self.get_layout(layout))
+            .collect::<String>();
+
+        layouts.truncate(layouts.len() - 1);
+        layouts
+    }
+
+    fn get_layout(self, item_layout: ItemLayout) -> String {
+        match item_layout {
+            ItemLayout::ItXs(size) => format!("it-xs-{} ", size),
+            ItemLayout::ItS(size) => format!("it-s-{} ", size),
+            ItemLayout::ItM(size) => format!("it-m-{} ", size),
+            ItemLayout::ItL(size) => format!("it-l-{} ", size),
+            ItemLayout::ItXl(size) => format!("it-xl-{} ", size),
+        }
+    }
+
+    fn get_item_align(self, align: AlignSelf, key: String) {
+        let value = match align {
+            AlignSelf::Auto => "auto".to_string(),
+            AlignSelf::Baseline => "baseline".to_string(),
+            AlignSelf::Center => "center".to_string(),
+            AlignSelf::FlexStart => "flex-start".to_string(),
+            AlignSelf::FlexEnd => "flex-end".to_string(),
+            AlignSelf::Stretch => "stretch".to_string(),
+        };
+
+        create_style(String::from("align-self"), value, format!("item-{}", key));
+    }
+}
+
+wasm_bindgen_test_configure!(run_in_browser);
+
+#[wasm_bindgen_test]
+fn should_create_item() {
+    let props_item = Props {
+        layouts: vec![ItemLayout::ItXs(12)],
+        align_self: AlignSelf::Center,
+        class_name: "item-test".to_string(),
+        onsignal: Callback::noop(),
+        children: Children::new(vec![html! {
+            <div id="item">{"Item"}</div>
+        }]),
+    };
+
+    let link = ComponentLink::new();
+
+    let item = Item::create(props_item, link);
+
+    let item_vnode = item.render();
+
+    let vnode_expected = html! {
+        <div
+            onclick=Callback::noop()
+            class=format!("item item-{} it-xs-12 item-test", item.key)>
+            <>
+                <div id="item">{"Item"}</div>
+            </>
+        </div>
+    };
+
+    assert_eq!(item_vnode, vnode_expected);
+}
+
+#[wasm_bindgen_test]
+fn should_create_clickable_item() {
+    let on_add_item_div = Callback::from(|_| {
+        let body = window().unwrap().document().unwrap().body().unwrap();
+
+        let child_element = window()
+            .unwrap()
+            .document()
+            .unwrap()
+            .create_element("div")
+            .unwrap();
+
+        child_element.set_text_content(Some("item2"));
+        child_element.set_id("item2");
+        body.append_child(&child_element).unwrap();
+    });
+
+    let props_item = Props {
+        layouts: vec![ItemLayout::ItXs(12)],
+        align_self: AlignSelf::Center,
+        class_name: "item-test".to_string(),
+        onsignal: on_add_item_div,
+        children: Children::new(vec![html! {
+            <div id="item">{"Item"}</div>
+        }]),
+    };
+
+    props_item.onsignal.emit(());
+
+    let updated_content = window()
+        .unwrap()
+        .document()
+        .unwrap()
+        .get_element_by_id("item2")
+        .unwrap()
+        .text_content()
+        .unwrap();
+
+    assert_eq!(updated_content, "item2".to_string());
+}
diff --git a/crate/yew_styles/src/components/layouts/mod.rs b/crate/yew_styles/src/components/layouts/mod.rs
new file mode 100644
index 0000000..d8b2350
--- /dev/null
+++ b/crate/yew_styles/src/components/layouts/mod.rs
@@ -0,0 +1,2 @@
+pub mod container;
+pub mod item;
diff --git a/crate/yew_styles/src/components/mod.rs b/crate/yew_styles/src/components/mod.rs
index d211a41..6af846b 100644
--- a/crate/yew_styles/src/components/mod.rs
+++ b/crate/yew_styles/src/components/mod.rs
@@ -1,5 +1,4 @@
-extern crate uuid;
+extern crate getrandom;
 pub mod button;
-pub mod container;
-pub mod item;
+pub mod layouts;
 pub mod navbar;
diff --git a/crate/yew_styles/src/components/navbar/mod.rs b/crate/yew_styles/src/components/navbar/mod.rs
index 46d9ec9..eb367d3 100644
--- a/crate/yew_styles/src/components/navbar/mod.rs
+++ b/crate/yew_styles/src/components/navbar/mod.rs
@@ -1,7 +1,3 @@
-pub mod navbar;
+pub mod navbar_component;
 pub mod navbar_container;
 pub mod navbar_item;
-
-pub use navbar::{Fixed, Navbar};
-pub use navbar_container::NavbarContainer;
-pub use navbar_item::NavbarItem;
diff --git a/crate/yew_styles/src/components/navbar/navbar.rs b/crate/yew_styles/src/components/navbar/navbar_component.rs
similarity index 58%
rename from crate/yew_styles/src/components/navbar/navbar.rs
rename to crate/yew_styles/src/components/navbar/navbar_component.rs
index a1f4dca..93b0756 100644
--- a/crate/yew_styles/src/components/navbar/navbar.rs
+++ b/crate/yew_styles/src/components/navbar/navbar_component.rs
@@ -1,11 +1,12 @@
 use super::navbar_container::NavbarContainer;
 use super::navbar_item::NavbarItem;
 use crate::assets::{Assets, Icon};
-use crate::container::{Direction, JustifyContent, Mode};
+use crate::layouts::container::{Direction, JustifyContent, Mode};
 use crate::styles::{get_pallete, get_style, Palette, Style};
 use crate::utils::create_style;
 use yew::prelude::*;
 
+/// the location of the navbar which is fixed
 #[derive(Clone, PartialEq)]
 pub enum Fixed {
     None,
@@ -17,6 +18,93 @@ pub enum Msg {
     TroggleMenu,
 }
 
+/// # Navbar component
+///
+/// ## Example
+///
+/// ```rust
+/// use yew::prelude::*;
+/// use yew::services::ConsoleService;
+/// use yew_styles::{
+///     navbar::{
+///         navbar_component::{Fixed, Navbar},
+///         navbar_container::NavbarContainer,
+///         navbar_item::NavbarItem,
+///     },
+///     styles::{Palette, Style},
+///     layouts::{
+///         container::{JustifyContent, Mode},
+///     },
+/// };
+///
+/// pub struct App {
+///   link: ComponentLink<Self>,
+/// }
+///
+/// pub enum Msg {
+///   ChangeMenu(String),
+/// }
+/// #[derive(Clone, Properties)]
+/// pub struct Props {}
+///
+/// impl Component for App {
+///     type Message = Msg;
+///     type Properties = Props;
+///
+///     fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
+///         App {
+///             link
+///         }
+///     }
+///
+///     fn update(&mut self, msg: Self::Message) -> ShouldRender {
+///         match msg {
+///             Msg::ChangeMenu(menu) => {
+///                 let mut console = ConsoleService::new();
+///                 console.log(format!("{}", menu))
+///             }
+///         }
+///         false
+///     }
+///
+///     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+///         false
+///     }
+///
+///     fn view(&self) -> Html {
+///        html! {
+///            <Navbar
+///                fixed=Fixed::None
+///                navbar_style=Style::Light
+///                navbar_type=Palette::Info
+///                branch=html!{<img src="/assets/spielrs_logo.png"></img>}>
+///                    <NavbarContainer justify_content=JustifyContent::FlexStart(Mode::NoMode)>
+///                        <NavbarItem
+///                            onsignal=link.callback(move |_| Msg::ChangeMenu(String::from("Home")))>
+///                            <span>{"Home"}</span>
+///                        </NavbarItem>
+///                        <NavbarItem
+///                            onsignal=link.callback(move |_| Msg::ChangeMenu(String::from("Shop")))>
+///                            <span>{"Shop"}</span>
+///                        </NavbarItem>
+///                        <NavbarItem
+///                            onsignal=link.callback(move |_| Msg::ChangeMenu(String::from("Shop")))>
+///                            <span>{"Shop"}</span>
+///                        </NavbarItem>
+///                        <NavbarItem
+///                            onsignal=link.callback(move |_| Msg::ChangeMenu(String::from("About us")))>   
+///                            <span>{"About us"}</span>
+///                        </NavbarItem>
+///                        <NavbarItem
+///                            onsignal=link.callback(move |_| Msg::ChangeMenu(String::from("Contact")))>   
+///                            <span>{"Contact"}</span>
+///                        </NavbarItem>
+///                    </NavbarContainer>
+///              </Navbar>
+///         }
+///     }
+/// }
+/// ```
 pub struct Navbar {
     pub link: ComponentLink<Self>,
     pub props: NavbarProps,
@@ -27,14 +115,19 @@ struct NavbarModel;
 
 #[derive(Clone, Properties)]
 pub struct Props {
+    /// Type navbar style
     #[prop_or(Palette::Standard)]
     pub navbar_type: Palette,
+    /// Navbar styles
     #[prop_or(Style::Regular)]
     pub navbar_style: Style,
+    /// General property to add custom class styles
     #[prop_or_default]
     pub class_name: String,
+    /// The location of the navbar which is fixed
     #[prop_or(Fixed::Top)]
     pub fixed: Fixed,
+    /// Vnode embedded in the beginning of the navbar, useful to include a branch logo
     #[prop_or_default]
     pub branch: Html,
     pub children: Children,
@@ -75,12 +168,6 @@ impl Component for Navbar {
         }
     }
 
-    fn mounted(&mut self) -> ShouldRender {
-        NavbarModel.init(self.props.clone());
-
-        true
-    }
-
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
         match msg {
             Msg::TroggleMenu => {
@@ -91,10 +178,16 @@ impl Component for Navbar {
         true
     }
 
+    fn rendered(&mut self, first_render: bool) {
+        if first_render {
+            NavbarModel.init(self.props.clone());
+        }
+    }
+
     fn change(&mut self, props: Self::Properties) -> ShouldRender {
         NavbarModel.init(self.props.clone());
         self.props = NavbarProps::from(props);
-        true
+        false
     }
 
     fn view(&self) -> Html {
@@ -104,12 +197,12 @@ impl Component for Navbar {
                     class=format!("navbar-mobile {} {} {}", self.props.navbar_style, self.props.navbar_type, self.props.class_name)
                 >
                     <div class="navbar-dropdown">
-                        <NavbarContainer justify_content=JustifyContent::Start(Mode::NoMode)
+                        <NavbarContainer justify_content=JustifyContent::FlexStart(Mode::NoMode)
                         direction=Direction::Row
                         class_name="navbar-container-mobile">
                         {get_branch(self.props.branch.clone())}
                         </NavbarContainer>
-                        <NavbarContainer justify_content=JustifyContent::End(Mode::NoMode)
+                        <NavbarContainer justify_content=JustifyContent::FlexEnd(Mode::NoMode)
                             direction=Direction::Row
                             class_name="navbar-container-mobile">
                             <NavbarItem
diff --git a/crate/yew_styles/src/components/navbar/navbar_container.rs b/crate/yew_styles/src/components/navbar/navbar_container.rs
index a220a43..bdadf98 100644
--- a/crate/yew_styles/src/components/navbar/navbar_container.rs
+++ b/crate/yew_styles/src/components/navbar/navbar_container.rs
@@ -1,23 +1,111 @@
-use crate::container::{Container, Direction, JustifyContent, Mode, Wrap};
+use crate::layouts::container::{Container, Direction, JustifyContent, Mode, Wrap};
 use yew::prelude::*;
 
-use uuid::Uuid;
-
 pub enum Msg {
     Clicked,
 }
 
 #[derive(Clone, Properties)]
 pub struct Props {
+    /// set how will be justified the navbar items
     #[prop_or(JustifyContent::FlexStart(Mode::NoMode))]
     pub justify_content: JustifyContent,
+    /// which direction are placing the navbar items
     #[prop_or(Direction::Row)]
     pub direction: Direction,
     pub children: Children,
     #[prop_or_default]
+    /// General property to add custom class styles
     pub class_name: String,
 }
 
+/// # Navbar Container component
+///
+/// ## Example
+///
+/// ```rust
+/// use yew::prelude::*;
+/// use yew::services::ConsoleService;
+/// use yew_styles::{
+///     navbar::{
+///         navbar_component::{Fixed, Navbar},
+///         navbar_container::NavbarContainer,
+///         navbar_item::NavbarItem,
+///     },
+///     styles::{Palette, Style},
+///     layouts::{
+///         container::{JustifyContent, Mode},
+///     },
+/// };
+///
+/// pub struct App {
+///   link: ComponentLink<Self>,
+/// }
+///
+/// pub enum Msg {
+///   ChangeMenu(String),
+/// }
+/// #[derive(Clone, Properties)]
+/// pub struct Props {}
+///
+/// impl Component for App {
+///     type Message = Msg;
+///     type Properties = Props;
+///
+///     fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
+///         App {
+///             link
+///         }
+///     }
+///
+///     fn update(&mut self, msg: Self::Message) -> ShouldRender {
+///         match msg {
+///             Msg::ChangeMenu(menu) => {
+///                 let mut console = ConsoleService::new();
+///                 console.log(format!("{}", menu))
+///             }
+///         }
+///         false
+///     }
+///
+///     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+///         false
+///     }
+///
+///     fn view(&self) -> Html {
+///        html! {
+///            <Navbar
+///                fixed=Fixed::None
+///                navbar_style=Style::Light
+///                navbar_type=Palette::Info
+///                branch=html!{<img src="/assets/spielrs_logo.png"></img>}>
+///                    <NavbarContainer justify_content=JustifyContent::FlexStart(Mode::NoMode)>
+///                        <NavbarItem
+///                            onsignal=link.callback(move |_| Msg::ChangeMenu(String::from("Home")))>
+///                            <span>{"Home"}</span>
+///                        </NavbarItem>
+///                        <NavbarItem
+///                            onsignal=link.callback(move |_| Msg::ChangeMenu(String::from("Shop")))>
+///                            <span>{"Shop"}</span>
+///                        </NavbarItem>
+///                        <NavbarItem
+///                            onsignal=link.callback(move |_| Msg::ChangeMenu(String::from("Shop")))>
+///                            <span>{"Shop"}</span>
+///                        </NavbarItem>
+///                        <NavbarItem
+///                            onsignal=link.callback(move |_| Msg::ChangeMenu(String::from("About us")))>   
+///                            <span>{"About us"}</span>
+///                        </NavbarItem>
+///                        <NavbarItem
+///                            onsignal=link.callback(move |_| Msg::ChangeMenu(String::from("Contact")))>   
+///                            <span>{"Contact"}</span>
+///                        </NavbarItem>
+///                    </NavbarContainer>
+///              </Navbar>
+///         }
+///     }
+/// }
+/// ```
 pub struct NavbarContainer {
     pub props: Props,
 }
@@ -27,21 +115,24 @@ impl Component for NavbarContainer {
     type Properties = Props;
 
     fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        NavbarContainer { props: props }
+        NavbarContainer { props }
     }
 
     fn update(&mut self, _msg: Self::Message) -> ShouldRender {
         false
     }
 
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        true
+    }
+
     fn view(&self) -> Html {
         html! {
             <Container
                 class_name=format!("navbar-container {}", self.props.class_name)
                 direction=self.props.direction.clone()
                 wrap=Wrap::Wrap
-                justify_content=self.props.justify_content.clone()
-                name=format!("{}", Uuid::new_v4())>
+                justify_content=self.props.justify_content.clone()>
                     {self.props.children.render()}
             </Container>
         }
diff --git a/crate/yew_styles/src/components/navbar/navbar_item.rs b/crate/yew_styles/src/components/navbar/navbar_item.rs
index f21a6f5..f17d077 100644
--- a/crate/yew_styles/src/components/navbar/navbar_item.rs
+++ b/crate/yew_styles/src/components/navbar/navbar_item.rs
@@ -1,20 +1,109 @@
+use wasm_bindgen_test::*;
+use web_sys::window;
 use yew::prelude::*;
 
 pub enum Msg {
     Clicked,
 }
 
+/// # Navbar Item component
+///
+/// ## Example
+///
+/// ```rust
+/// use yew::prelude::*;
+/// use yew::services::ConsoleService;
+/// use yew_styles::{
+///     navbar::{
+///         navbar_component::{Fixed, Navbar},
+///         navbar_container::NavbarContainer,
+///         navbar_item::NavbarItem,
+///     },
+///     styles::{Palette, Style},
+///     layouts::{
+///         container::{JustifyContent, Mode},
+///     },
+/// };
+///
+/// pub struct App {
+///   link: ComponentLink<Self>,
+/// }
+///
+/// pub enum Msg {
+///   ChangeMenu(String),
+/// }
+/// #[derive(Clone, Properties)]
+/// pub struct Props {}
+///
+/// impl Component for App {
+///     type Message = Msg;
+///     type Properties = Props;
+///
+///     fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
+///         App {
+///             link
+///         }
+///     }
+///
+///     fn update(&mut self, msg: Self::Message) -> ShouldRender {
+///         match msg {
+///             Msg::ChangeMenu(menu) => {
+///                 let mut console = ConsoleService::new();
+///                 console.log(format!("{}", menu))
+///             }
+///         }
+///         false
+///     }
+///
+///     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+///         false
+///     }
+///
+///     fn view(&self) -> Html {
+///        html! {
+///            <Navbar
+///                fixed=Fixed::None
+///                navbar_style=Style::Light
+///                navbar_type=Palette::Info
+///                branch=html!{<img src="/assets/spielrs_logo.png"></img>}>
+///                    <NavbarContainer justify_content=JustifyContent::FlexStart(Mode::NoMode)>
+///                        <NavbarItem
+///                            onsignal=link.callback(move |_| Msg::ChangeMenu(String::from("Home")))>
+///                            <span>{"Home"}</span>
+///                        </NavbarItem>
+///                        <NavbarItem
+///                            onsignal=link.callback(move |_| Msg::ChangeMenu(String::from("Shop")))>
+///                            <span>{"Shop"}</span>
+///                        </NavbarItem>
+///                        <NavbarItem
+///                            onsignal=link.callback(move |_| Msg::ChangeMenu(String::from("Shop")))>
+///                            <span>{"Shop"}</span>
+///                        </NavbarItem>
+///                        <NavbarItem
+///                            onsignal=link.callback(move |_| Msg::ChangeMenu(String::from("About us")))>   
+///                            <span>{"About us"}</span>
+///                        </NavbarItem>
+///                        <NavbarItem
+///                            onsignal=link.callback(move |_| Msg::ChangeMenu(String::from("Contact")))>   
+///                            <span>{"Contact"}</span>
+///                        </NavbarItem>
+///                    </NavbarContainer>
+///              </Navbar>
+///         }
+///     }
+/// }
+/// ```
 pub struct NavbarItem {
     link: ComponentLink<Self>,
     props: Props,
 }
 
-pub struct NavbarItemModel;
-
 #[derive(Clone, Properties)]
 pub struct Props {
+    /// General property to add custom class styles
     #[prop_or_default]
     pub class_name: String,
+    /// click event for navbar item
     #[prop_or(Callback::noop())]
     pub onsignal: Callback<()>,
     pub children: Children,
@@ -28,10 +117,6 @@ impl Component for NavbarItem {
         NavbarItem { link, props }
     }
 
-    fn mounted(&mut self) -> ShouldRender {
-        true
-    }
-
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
         match msg {
             Msg::Clicked => {
@@ -45,7 +130,7 @@ impl Component for NavbarItem {
     fn change(&mut self, props: Self::Properties) -> ShouldRender {
         self.props = props;
 
-        true
+        false
     }
 
     fn view(&self) -> Html {
@@ -59,3 +144,73 @@ impl Component for NavbarItem {
         }
     }
 }
+
+wasm_bindgen_test_configure!(run_in_browser);
+
+#[wasm_bindgen_test]
+fn should_create_navbar_item() {
+    let navbar_item_props = Props {
+        class_name: "navbar-item-test".to_string(),
+        onsignal: Callback::noop(),
+        children: Children::new(vec![html! {
+            <div id="item">{"Item"}</div>
+        }]),
+    };
+
+    let link = ComponentLink::new();
+    let navbar_item = NavbarItem::create(navbar_item_props, link);
+    let navbar_item_vnode = navbar_item.render();
+
+    let vnode_expected = html! {
+        <div
+            onclick=Callback::noop()
+            class="navbar-item navbar-item-test">
+            <>
+                <div id="item">
+                    {"Item"}
+                </div>
+            </>
+        </div>
+    };
+
+    assert_eq!(navbar_item_vnode, vnode_expected);
+}
+
+#[wasm_bindgen_test]
+fn should_create_clickable_navbar_item() {
+    let on_add_item_div = Callback::from(|_| {
+        let body = window().unwrap().document().unwrap().body().unwrap();
+
+        let child_element = window()
+            .unwrap()
+            .document()
+            .unwrap()
+            .create_element("div")
+            .unwrap();
+
+        child_element.set_text_content(Some("item2"));
+        child_element.set_id("item2");
+        body.append_child(&child_element).unwrap();
+    });
+
+    let navbar_item_props = Props {
+        class_name: "navbar-item-test".to_string(),
+        onsignal: on_add_item_div,
+        children: Children::new(vec![html! {
+            <div id="item">{"Item"}</div>
+        }]),
+    };
+
+    navbar_item_props.onsignal.emit(());
+
+    let updated_content = window()
+        .unwrap()
+        .document()
+        .unwrap()
+        .get_element_by_id("item2")
+        .unwrap()
+        .text_content()
+        .unwrap();
+
+    assert_eq!(updated_content, "item2".to_string());
+}
diff --git a/crate/yew_styles/src/lib.rs b/crate/yew_styles/src/lib.rs
index bf21834..cc90152 100644
--- a/crate/yew_styles/src/lib.rs
+++ b/crate/yew_styles/src/lib.rs
@@ -1,8 +1,38 @@
+//! # Yew Styles
+//!
+//! Yew Styles is a style framework for yew
+//!
+//! ## Motivation
+//!
+//! The purpose of developing this project is first,
+//! provide a style framework for yew because there isn't not many options currently,
+//! also to create a layout system which is not far of the flexbox concept, and,
+//! to take the rust benefits and implement a properties selected by enumeration
+//! in the most of the cases which makes fast for developing applications and avoids the practice try and error
+//!
+//! ## How it works
+//!
+//! Each component is splited in two parts, the logical yew component and its sass module,
+//! however, it is not necessary to worry about the sass module only it needs to be include in the project
+//!
+//! ### How install it
+//!
+//! 1. Install the sass module: `npm install yew-styles`
+//! 2. Add the yew_style crate in Cargo.toml file: `yew_styles = "0.3.0"`
+//! 3. Import the main.css file in you main javascript/typescript file project:
+//! ```typescript
+//!    import 'node_modules/yew-styles/main.css';
+//! ```
+//! 4. Ready to import and use in your project 🚀
+//!
+//! ## Development phase
+//!
+//! Yew style is in early phase, currently doesn't have enough components to cover all the requirements that could need a website/web application.
+//! All contributions are appreciated.
 #![recursion_limit = "512"]
-
 pub mod assets;
 mod components;
 pub mod styles;
-pub mod utils;
+mod utils;
 
-pub use components::{button, container, item, navbar};
+pub use components::{button, layouts, navbar};
diff --git a/crate/yew_styles/src/styles.rs b/crate/yew_styles/src/styles.rs
index beb3a26..6a98910 100644
--- a/crate/yew_styles/src/styles.rs
+++ b/crate/yew_styles/src/styles.rs
@@ -1,3 +1,4 @@
+/// Palette of styles according with the purpose
 #[derive(Clone)]
 pub enum Palette {
     Primary,
@@ -23,6 +24,7 @@ pub fn get_pallete(palette: Palette) -> String {
     }
 }
 
+/// Standars button styles
 #[derive(Clone)]
 pub enum Style {
     Regular,
diff --git a/crate/yew_styles/src/utils.rs b/crate/yew_styles/src/utils.rs
index 40abbca..08d00c0 100644
--- a/crate/yew_styles/src/utils.rs
+++ b/crate/yew_styles/src/utils.rs
@@ -1,33 +1,90 @@
-#[cfg(feature = "std_web")]
-extern crate stdweb;
+extern crate rand;
 extern crate wasm_bindgen;
-#[cfg(feature = "web_sys")]
 extern crate web_sys;
-
-#[cfg(feature = "std_web")]
-use stdweb::js;
-#[cfg(feature = "web_sys")]
+use rand::{distributions::Alphanumeric, thread_rng, Rng};
 use wasm_bindgen::JsCast;
-#[cfg(feature = "web_sys")]
+use wasm_bindgen_test::*;
 use web_sys::{window, HtmlElement};
 
 pub fn create_style(style: String, value: String, wrap: String) {
-    #[cfg(feature = "web_sys")]
-    {
-        let document = window().unwrap().document().unwrap();
-        let element = document
-            .get_elements_by_class_name(&wrap)
-            .get_with_index(0)
-            .unwrap()
-            .dyn_into::<HtmlElement>()
-            .unwrap();
-
-        element.style().set_property(&style, &value).unwrap();
+    let document = window().unwrap().document().unwrap();
+    let element = document
+        .get_elements_by_class_name(&wrap)
+        .get_with_index(0)
+        .unwrap()
+        .dyn_into::<HtmlElement>()
+        .unwrap();
+
+    element.style().set_property(&style, &value).unwrap();
+}
+
+pub fn get_random_string(len: usize) -> String {
+    thread_rng()
+        .sample_iter(&Alphanumeric)
+        .take(len)
+        .collect::<String>()
+}
+
+wasm_bindgen_test_configure!(run_in_browser);
+
+#[wasm_bindgen_test]
+fn should_set_style_prop() {
+    let body = window().unwrap().document().unwrap().body().unwrap();
+
+    let element = window()
+        .unwrap()
+        .document()
+        .unwrap()
+        .create_element("div")
+        .unwrap();
+
+    element.set_text_content(Some("item"));
+    element.set_class_name("item");
+    body.append_child(&element).unwrap();
+
+    create_style(
+        "padding".to_string(),
+        "10px".to_string(),
+        "item".to_string(),
+    );
+
+    let item = window()
+        .unwrap()
+        .document()
+        .unwrap()
+        .get_elements_by_class_name("item")
+        .get_with_index(0)
+        .unwrap()
+        .dyn_into::<HtmlElement>()
+        .unwrap();
+
+    let value = item.style().get_property_value("padding").unwrap();
+
+    assert_eq!(value, "10px");
+}
+
+#[wasm_bindgen_test]
+fn should_generate_random_string() {
+    let mut random_values: Vec<String> = vec![];
+    let mut i = 0;
+    loop {
+        random_values.push(get_random_string(10));
+        i += 1;
+
+        if i == 1000 {
+            break;
+        }
     }
 
-    #[cfg(feature = "std_web")]
-    js! {
-        const element = document.getElementsByClassName(@{wrap})[0];
-        element.style[@{style}] = @{value};
-    };
+    let mut i = 0;
+    for value in &random_values {
+        let mut index = 0;
+        let repeat = &random_values.iter().any(move |random_value| {
+            let exist = random_value == value && i != index;
+            index += 1;
+            exist
+        });
+        assert_eq!(*repeat, false);
+        i += 1;
+    }
 }
diff --git a/package-lock.json b/package-lock.json
index 2b0ac29..a2b258f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1669,6 +1669,18 @@
       "integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
+      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clone": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
@@ -2377,6 +2389,13 @@
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
       "dev": true
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "dev": true,
+      "optional": true
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -3577,6 +3596,16 @@
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
       "dev": true
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz",
@@ -5569,6 +5598,15 @@
       "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
       "dev": true
     },
+    "prismjs": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.20.0.tgz",
+      "integrity": "sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==",
+      "dev": true,
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -5973,6 +6011,13 @@
         "xmlchars": "^2.1.1"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "dev": true,
+      "optional": true
+    },
     "semver": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -6554,6 +6599,13 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "dev": true,
+      "optional": true
+    },
     "tiny-inflate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 8f7e35c..b5166a5 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,11 @@
   "devDependencies": {
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-wasm.rs": "^1.2.15",
-    "sass": "^1.26.3",
-    "typescript": "^3.8.3"
-  }
+    "prismjs": "^1.20.0",
+    "sass": "^1.26.5",
+    "typescript": "^3.8.3",
+    "minimist": "1.2.5",
+    "kind-of": "6.0.3"
+  },
+  "dependencies": {}
 }