Merge pull request #522 from picturepan2/0.5.5 v0.5.5

0.5.5

1 files changed, 84 insertions, 0 deletions

diff --git a/docs/src/getting-started/installation.pug b/docs/src/getting-started/installation.pug
new file mode 100644
index 0000000..387e7bf
--- /dev/null
+++ b/docs/src/getting-started/installation.pug
@@ -0,0 +1,84 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'installation'
+  - var parent = 'getting-started'
+  - var title = 'Installation - Getting started - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('installation', 'Installation')
+    include ../_layout/_ad-g.pug
+    
+    p
+      | There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.
+
+    +docs-subheading('install-manually', 'Install manually')
+    p
+      | Download the compiled and minified 
+      a(href='https://github.com/picturepan2/spectre/releases', target='_blank') Spectre CSS file
+      |  (core ~10KB min+gzip):
+    p
+      a.btn.btn-primary(href='https://github.com/picturepan2/spectre/releases', target='_blank') Download Spectre.css
+    p
+      | Include 
+      code spectre.css
+      |  located in 
+      strong /dist
+      |  in your website or Web app <head>. Also, you can add 
+      code spectre-icons.css
+      |  and 
+      code spectre-exp.css
+      |  accordingly.
+
+    //- install manually
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <link rel="stylesheet" href="spectre.min.css">
+          <link rel="stylesheet" href="spectre-exp.min.css">
+          <link rel="stylesheet" href="spectre-icons.min.css">
+      
+    +docs-subheading('install-cdn', 'Install from CDN')
+    p
+      | Alternatively, you can use the 
+      a(href='https://unpkg.com/', target='_blank') unpkg
+      |  or 
+      a(href='https://cdnjs.com/libraries/spectre.css', target='_blank') cdnjs
+      |  CDN to load compiled Spectre.css.
+
+    //- install from CDN
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
+          <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
+          <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
+
+    +docs-subheading('install-npm', 'Install with NPM')
+
+    //- install with npm
+    pre.code.c-select-all(data-lang='Bash')
+      code
+        :highlight(lang="Bash")
+          npm install spectre.css --save
+
+    +docs-subheading('install-yarn', 'Install with Yarn')
+
+    //- install with yarn
+    pre.code.c-select-all(data-lang='Bash')
+      code
+        :highlight(lang="bash")
+          yarn add spectre.css
+
+    +docs-subheading('install-bower', 'Install from Bower')
+
+    //- install with bower
+    pre.code.c-select-all(data-lang='Bash')
+      code
+        :highlight(lang="bash")
+          bower install spectre.css --save
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file