shop.pug

section
  .container
    nav.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
    .columns
      .column
        h3#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
          h2 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
        h3#tabs.title Tabs Example
        p
        | I've created 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
            img.circular--square(src='https://source.unsplash.com/200x200/?bitcoin')
            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
            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.
          .tab-content
            img.circular--square(src='https://source.unsplash.com/200x200/?python,code')
            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
            img.circular--square(src='https://source.unsplash.com/200x200/?bitcoin')
            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
            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.
          .tab-content
            img.circular--square(src='https://source.unsplash.com/200x200/?python,code')
            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 Thing
      ul
        li 1

    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