index.pug

section
  .container
    nav.navbar
      h1.hidden Navbar
      .columns
        button.column.has-text-centered
          a.link.is-info(href="#modals") Modal
        button.column.has-text-centered
          a.link.is-info(href="#tabs") Tabs
        button.column.has-text-centered
          img.shadowed(
            src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/170881/Logo.png",
            style="max-height: 90px; margin: 0; border-radius: 6px"
          )
        button.column.has-text-centered
          a.link.is-info(href="#grid") Grid
        button.column.has-text-centered
          a.link.is-info(href="#sizes") Sizes

section
  .container
    .row
      .column
        h1#into Less Flexbox
    .row
      .column
        h2#modals.title Modals Example
        p Less Flexbox handles models without needing to use any javascript. This simplifies the process of using our syle framework with any any JavaScript framework you want.    
    .modal-container
      label.has-text-centered(for='button_1') Click me
      input.modal-toggle#button_1(type="checkbox", notchecked)
      .modal-backdrop
        .modal-content
          label.modal-close(for="button_1") x
          h3 Modal title
          hr
          p Simple Responsive CSS-Only Modal Demo
          a.donation(href="#/donate/") Donate Now
          label.modal-close.button(for="button_1") OK            
  .container 
    .columns
      .column
        h2#tabs.title Tabs Example
        p
        | A CSS-only tab system that has some advantages. The css is id agnostic, so the HTML can be generated server-side scripts like WordPress shortcodes for example !!!
        p
          | You only need the list of radio button ids and names.
        .tabbed
          input#tab1(type='radio' name='css-tabs' checked)
          input#tab2(type='radio' name='css-tabs')
          input#tab3(type='radio' name='css-tabs')
          ul.tabs
            li.tab
              label(for='tab1') Bitcoin News
            li.tab
              label(for='tab2') Zombie lipsum
            li.tab
              label(for='tab3') Django Crypto
          .tab-content
            .row
              .column.is-2
                img.circular--square(src='https://source.unsplash.com/300x300/?bitcoin')
              .column
                h4 Bitcoin News
                p Bitcoin-U.S dollar are higher in early trading Tuesday, after hitting a six 
                  | week low overnight and then rebounding today to show resilience against bears' 
                  | attempts at pushing prices lower with their selling pressure from earlier this 
                  | month as shown by an exhaustion tail on the daily chart suggesting that these 
                  | battles may be nearing end until momentum can shift back into favor of bulls 
                  | which would create additional demand for bitcoins due its stability over time 
                  | despite recent fluctuations .
          .tab-content
            .row
              .column.is-2
                img.circular--square(src='https://source.unsplash.com/300x300/?face,mature')
              .column
                h4 Achilles Gaston Sévère
                p
                  | Achilles Gaston Sévère as adjunct professor at Harvard University.  Thier research 
                  | deals with mass communication and culture, as well as AI relations on college campuses. 
                  | They have written more than two dozen books about these topics which have been translated 
                  | into numerous languages around the world including Mandarin Chinese by Professor Xie 
                  | Lianfeng from Fudan University of Beijing.
          .tab-content
            .row
              .column.is-2
                img.circular--square(src='https://source.unsplash.com/300x300/?python,code')
              .column
                h4 Django Crypto
                p
                  | Ready to take your crypto investing game up a notch? Introducing the Django-cryptocurrencies 
                  | web wallet for Bitcoin and a few other cryptocurrencies. This sleek, intuitive site will have 
                  | you invested in no time!
                p
                  | Have a 9-to-5 but still want access to your cryptocurrency? No problem! The interface of our 
                  | site has been optimized for mobile devices so checking balances, sending coins, or withdrawing 
                  | them from your account can be done anytime anywhere--and quickly too.
        p
          | These tabs are quite easy to use as they dont need absolute positioning and min-heights. They can 
          | also be used multiple times in one document without any influence on CSS!

        .tabbed
          input#tab21(type='radio' name='css-tabs2')
          input#tab22(type='radio' name='css-tabs2')
          input#tab23(type='radio' name='css-tabs2' checked)
          ul.tabs
            li.tab
              label(for='tab21') Bitcoin News
            li.tab
              label(for='tab22') Zombie lipsum
            li.tab
              label(for='tab23') Django Crypto

          .tab-content
            .row
              .column.is-2
                img.circular--square(src='https://source.unsplash.com/200x200/?bitcoin')
              .column
                h4 Bitcoin News
                p
                  | Bitcoin-U.S dollar are higher in early trading Tuesday, after hitting a six 
                  | week low overnight and then rebounding today to show resilience against bears' 
                  | attempts at pushing prices lower with their selling pressure from earlier this 
                  | month as shown by an exhaustion tail on the daily chart suggesting that these 
                  | battles may be nearing end until momentum can shift back into favor of bulls 
                  | which would create additional demand for bitcoins due its stability over time 
                  | despite recent fluctuations.

          .tab-content
            .row
              .column.is-3
                img.circular--square(src='https://source.unsplash.com/200x200/?face,mature')
                h4 Achilles Gaston Sévère
                p
                  | Achilles Gaston Sévère as adjunct professor at Harvard University.  Thier research 
                  | deals with mass communication and culture, as well as AI relations on college 
                  | campuses. They have written more than two dozen books about these topics which have 
                  | been translated into numerous languages around the world including Mandarin Chinese 
                  | by Professor Xie Lianfeng from Fudan University of Beijing.

              .column.is-3
                img.circular--square(src='https://source.unsplash.com/200x201/?face,mature')
                h4 Achilles Gaston Sévère
                p
                  | Achilles Gaston Sévère as adjunct professor at Harvard University.  Thier research 
                  | deals with mass communication and culture, as well as AI relations on college 
                  | campuses. They have written more than two dozen books about these topics which have 
                  | been translated into numerous languages around the world including Mandarin Chinese 
                  | by Professor Xie Lianfeng from Fudan University of Beijing.

              .column.is-3
                img.circular--square(src='https://source.unsplash.com/201x200/?face,mature')
                h4 Achilles Gaston Sévère
                p
                  | Achilles Gaston Sévère as adjunct professor at Harvard University.  Thier research 
                  | deals with mass communication and culture, as well as AI relations on college 
                  | campuses. They have written more than two dozen books about these topics which have 
                  | been translated into numerous languages around the world including Mandarin Chinese 
                  | by Professor Xie Lianfeng from Fudan University of Beijing.

              .column.is-3
                img.circular--square(src='https://source.unsplash.com/200x200/?face')
                h4 Achilles Gaston Sévère
                p
                  | Achilles Gaston Sévère as adjunct professor at Harvard University.  Thier research 
                  | deals with mass communication and culture, as well as AI relations on college 
                  | campuses. They have written more than two dozen books about these topics which have 
                  | been translated into numerous languages around the world including Mandarin Chinese 
                  | by Professor Xie Lianfeng from Fudan University of Beijing.

          .tab-content
            .row
              .column.is-2
                img.circular--square(src='https://source.unsplash.com/200x200/?python,code')
              .column
                h4 Django Crypto
                p
                  | Ready to take your crypto investing game up a notch? Introducing the Django-cryptocurrencies 
                  | web wallet for Bitcoin and a few other cryptocurrencies. This sleek, intuitive site will have 
                  | you invested in no time!
                p
                  | Have a 9-to-5 but still want access to your cryptocurrency? No problem! The interface of our 
                  | site has been optimized for mobile devices so checking balances, sending coins, or withdrawing 
                  | them from your account can be done anytime anywhere--and quickly too.
          p
          | Unfortunately, these tabs have one minor downside: they only come with the limited tab count set at 
          | @number_of_tabs . However this isn't necessarily an issue as you can easily change it by editing 
          | your the LESS variable.
          hr

section 
  .container 
    h1#accordion.title Accordion
    h2.subtitle Clean collapsing accordions 
    p using only html and css
    details
      summary What's this thing!
      p It's a detail and summary box!
      ul
        li We can put any html in here. Even our earlier tabs

    details
      summary Summary
      ul
        li 1

    details
      summary Summary
      ul
        li 1
        li 2

    details
      summary Summary
      ul
        li 1
        li 2

    details
      summary Summary
      ul
        li 1
        li 2
        li 3

section
  h1#grid.title Grid
  h2.subtitle A simple way to build columns
  h3 a h3 example
  p TODO Add vertical flexboxes, fillsize, dropdowns, and modals
  hr
  .content
    p
      | To build a 
      strong grid
      | , just:
    ol
      li
        | Add a
        code columns
        | container
      li
        | Add as many
        code column
        | elements
        span.highlight as you want
  .columns
    .column
      p.notification.is-info First column
    .column
      p.notification.is-success.shadowed Second column
    .column
      p.notification.is-warning Third column
    .column
      p.notification.is-danger Fourth column
  figure.highlight highlight example 
  pre.code # Code Example

  hr
  h3#sizes.title Sizes
  .content
    p
      | If you want to change the
      strong size
      |
      | of a single column, you can use one the following classes:
    ul
      li
        code is-half
      li
        code is-third
      li
        code is-quarter
    p
      | The
      em other
      |
      | columns will fill up the
      strong remaining
      |
      | space automatically.
  .columns
    .column.is-half
      p.notification.is-info
        code.html is-half
    .column
      p.notification.is-warning Auto
    .column
      p.notification.is-danger Auto
  .columns
    .column.is-third
      p.notification.is-info.shadowed
        code.html is-third
    .column
      p.notification.is-success Auto
    .column
      p.notification.is-warning Auto
    .column
      p.notification.is-success Auto
    .column
      p.notification.is-warning Auto
  .columns
    .column.is-quarter
      p.notification.is-info
        code.html is-quarter
    .column
      p.notification.is-success Auto
  h3.title 12 columns
  .columns
    .column.is-2
      p.notification.is-info
        code is-2
    .column
      p.notification.is-warning.is-centered 1
    .column
      p.notification.is-success.is-centered 1
    .column
      p.notification.is-warning.is-centered 1
    .column
      p.notification.is-success.is-centered 1
    .column
      p.notification.is-warning.is-centered 1
    .column
      p.notification.is-success.is-centered 1
    .column
      p.notification.is-warning.is-centered 1
    .column
      p.notification.is-success.is-centered 1
    .column
      p.notification.is-warning.is-centered 1
    .column
      p.notification.is-success.is-centered 1
  hr
  h3#hides.title Hidden Example
  .columns
    .column
      p.notification.is-info First column
    .column.hidden
      p.notification.is-success Second column
    .column
      p.notification.is-warning Third column
  hr

  h3#forms.title Form Example
  .columns
    .column.is-half
      form.notification.is-info(
        method="get",
        action="/html/codes/html_form_handler.cfm"
      )
        h2 Info
        p
          label
            | Name
            input(type="text", name="customer_name", required="")
        p
          label
            | Phone
            input(type="tel", name="phone_number")
        p
          label
            | Email
            input(type="email", name="email_address")
        fieldset
          legend Which taxi do you require?
          p
            label
              input(type="radio", name="taxi", required="", value="car")
              |
              | Car
          p
            label
              input(type="radio", name="taxi", required="", value="van")
              |
              | Van
          p
            label
              input(type="radio", name="taxi", required="", value="tuktuk")
              |
              | Tuk Tuk
        fieldset
          legend Extras
          p
            label
              input(type="checkbox", name="extras", value="baby")
              |
              | Baby Seat
          p
            label
              input(type="checkbox", name="extras", value="wheelchair")
              |
              | Wheelchair Access
          p
            label
              input(type="checkbox", name="extras", value="tip")
              |
              | Stock Tip
        p
          label
            | Pickup Date/Time
            input(type="datetime-local", name="pickup_time", required="")
        p
          label
            | Pickup Place
            select#pickup_place(name="pickup_place")
              option(value="", selected="selected") Select One
              option(value="office") Taxi Office
              option(value="town_hall") Town Hall
              option(value="telepathy") We'll Guess!
        p
          label
            | Dropoff Place
            input(
              type="text",
              name="dropoff_place",
              required="",
              list="destinations"
            )
          datalist#destinations
            option(value="Airport")
            option(value="Beach")
            option(value="Fred Flinstone's House")
        p
          label
            | Special Instructions
            textarea(name="comments", maxlength="500")
        p
          button Submit Booking
    .column.hidden
      p.notification.is-success Second column
    .column
      p.notification.is-warning Third column
  .columns
    .column.has-text-centered
      .price-item.text-center.bg-white.win-shadow
        .price-item-header.p-6
          h1.mb-0 Starter
          div for small teams
          small $ 29
          div monthly per user
        .price-item-detail
          div Unlimited projects
          div Unlimited pages
          div Unlimited disk space
          div 24 / 7 Free support
        .price-item-actions
          button.button.info STARTED FOR FREE
          p.text-small.text-muted 7 days free trial

    .column.has-text-centered
      .price-item.text-center.shadowed
        .price-item-header.p-6
          h1.mb-0 Pro
          div for larger teams
        .price-item-price.bg-darkSteel.p-5
          .display3.m-0.text-medium.fg-white
            small $
            | 59
          .fg-white monthly per user
        .price-item-detail.p-5
          div Unlimited projects
          div Unlimited pages
          div Unlimited disk space
          div 24 / 7 Free support
          div Advanced reporting
          div Customizable interface
          div CRM Integration
        .price-item-actions.p-5
          button.button.alert.drop-shadow STARTED FOR FREE
          p.text-small.text-muted 30 days free trial
    .column.has-text-centered
      .price-item.text-center.bg-white.win-shadow
        .price-item-header.p-6
          h1.mb-0.has-text-centered Enterprise
          div for big teams
        .price-item-price.bg-lightSteel.p-5
          .display3.m-0.text-medium.fg-white
            small $
            | 99
          .fg-white monthly per user
        .price-item-detail.p-5
          div Unlimited projects
          div Unlimited pages
          div Unlimited disk space
          div For full feature list, call us
        .price-item-actions.p-5
          button.button.info STARTED FOR FREE
          p.text-small.text-muted 90 days free trial