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 CSS Framework 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/kingajax/spectre-dark/releases', target='_blank') Spectre CSS file
      |  (core ~10KB min+gzip):
    p
      a.btn.btn-primary(href='https://github.com/kingajax/spectre-dark/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