Never Patronize Mothers

    yoyo-bootstrap

    0.0.24 • Public • Published

    yoyo-bootstrap

    js-standard-style

    Bootstrap components for the actual DOM (built with yo-yo)

    npm install --save yoyo-boostrap
    

    Features

    • Returns pure DOM components
    • Completely modularized and compartmentalized (i.e. require("yoyo-bootstrap/button"))
    • LESS baked into each module (only include the CSS/LESS you need)
    • Use custom Bootstrap themes (i.e. bootswatch)
    • Follows the React Bootstrap documentation
    • Almost 90% coverage of all bootstrap components
    • Easily extensible
    • Built with yo-yo, the lightest UI framework
    • Minimal dependencies (average 4.1kb minified + g-zipped, usually just yo-yo)
    • Uses Bootstrap 3.3.6-stable LESS
    • ES6 import compatible (i.e. import Alert, Button from 'yoyo-bootstrap')

    About

    Basically React Bootstrap but for the actual DOM with Bootstrap less baked in. Include only the Bootstrap components and CSS you need in pure JS with proper argument nesting. All modules are actual DOM elements that can be directly appended and used in the DOM. All base level scaffolding and common CSS is included in helper modules (e.g. yoyo-bootstrap/common).

    Usage

    If you want a button:

    const Button = require("yoyo-bootstrap/button")
     
    document.body.appendChild(Button({bsStyle: "primary", bsSize: "medium"}, "Some Inner Content"))

    or a Grid/Column/Row:

    const Common = require("yoyo-bootstrap/common")
    const Grid = require("yoyo-boostrap/grid")
    const Row = require("yoyo-bootstrap/row")
    const Col = require("yoyo-bootstrap/col")
     
    document.body.appendChild(Grid({},
        Row({},
          Col({sm: 12, md: 8, lg: 3}, "Column 1 Content"),
          Col({sm: 12, md: 4, lg: 9}, "Column 2 Content")
          ),
        Row({},
          Col({sm: 3, md: 4}, "Column 1 Content"),
          Col({sm: 3, md: 4}, "Column 2 Content"),
          Col({sm: 3, md: 4}, "Column 3 Content")
          )
      )
    )

    or a form:

    const Common = require("yoyo-bootstrap/common")
    const Form = require("yoyo-bootstrap/form")
    const FormControl = require("yoyo-bootstrap/form-control")
    const Option = require("yoyo-bootstrap/option")
     
    document.body.appendChild(Form({},
        FormControl(componentClass: "select", placeholder: "select",
          Option({value: "SomeVal"}, "Some Value"),
          Option({value: "SomeOtherVal", selected: 1}, "Some Other Value!")
        ),
        FormControl(id: "field1", placeholder: "Some Text Field")
      )
    )

    how about a modal:

    const yo = require("yo-yo")
    const Common = require("yoyo-bootstrap/common")
    const Button = require("yoyo-bootstrap/button")
    const Modal = require("yoyo-bootstrap/modal")
    const connect = require("throw-down/connect")
    const update = require("throw-down/update")(yo.update)
     
    const Dialog = function(){
      var id, show = false
     
      function init (_id) {
        id = _id
      }
     
      function toggle () {
        show = !show;
        update(id, render())
      }
     
      function render() {
        return yo`
        <div>
          ${Button({bsStyle: "primary", bsSize: "large", onClick: toggle}, "Nicks Button")}
          ${Modal({show: show, onHide: toggle},
            Modal.Header({}, "Some Header"),
            Modal.Body({}, "The Body"),
            Modal.Footer({},
              Button({bsStyle: "default", onClick: toggle}, "Close"),
              Button({bsStyle: "primary"}, "Send")
            )
          )}
        </div>
        `
      }
     
      return connect(render, init)
    }
     
    document.body.appendChild(Dialog())

    how about a date picker:

    const yo = require("yo-yo")
    const Common = require("yoyo-bootstrap/common")
    const InputGroup = require("yoyo-bootstrap/input-group")
    const FormControl = require("yoyo-bootstrap/form-control")
    const DatePicker = require("yoyo-bootstrap/date-picker")
    const connect = require("throw-down/connect")
    const update = require("throw-down/update")(yo.update)
     
    const DateField = function () {
      var id, open = false, selected = new Date();
     
      function init (_id) {
        id = _id
      }
     
      function blur () {
        open = false
        update(id, render())
      }
     
      function focus () {
        open = true
        update(id, render())
      }
     
      function change (dateObj) {
        selected = dateObj
        blur()
      }
     
      function render () {
        return InputGroup({className: 'dropdown ' + (open && 'open' || '')},
          FormControl({onFocus:focus, onBlur: blur, value: String(selected), placeholder: "Pick a date.."}),
          DatePicker({defaultViewDate: selected, onChange: change})
        )
      }
     
      return connect(render, init)
    }
     
    document.body.appendChild(DateField())

    Notice, all component properties are notated the same as React Bootstrap. Use the React Bootstrap manual to walk through the various available properties for each component.

    Manual available here: https://react-bootstrap.github.io/components.html

    Note, some properties are not available, if a component property isn't working, check the actual component in yoyo-bootstrap to see if your desired property is available.

    Available Components

    const Common = require("yoyo-bootstrap/common") // requires css for scaffolding/type/print/normalize/code
    
    const Alert = require("yoyo-bootstrap/alert")
    const Badge = require("yoyo-bootstrap/badge")
    const ButtonGroup = require("yoyo-bootstrap/button-group")
    const ButtonToolbar = require("yoyo-bootstrap/button-toolbar")
    const Button = require("yoyo-bootstrap/button")
    const Checkbox = require("yoyo-bootstrap/checkbox")
    const Clearfix = require("yoyo-bootstrap/clearfix")
    const Col = require("yoyo-bootstrap/col")
    const Collapse = require("yoyo-bootstrap/collapse")
    const ControlLabel = require("yoyo-bootstrap/control-label")
    const DropdownButton = require("yoyo-bootstrap/dropdown-button")
    const Fade = require("yoyo-bootstrap/fade")
    const FormControl = require("yoyo-bootstrap/form-control")
    const FormGroup = require("yoyo-bootstrap/form-group")
    const Form = require("yoyo-bootstrap/form")
    const Glyphicon = require("yoyo-bootstrap/glyphicon")
    const Grid = require("yoyo-bootstrap/grid")
    const HelpBlock = require("yoyo-bootstrap/help-block")
    const Image = require("yoyo-bootstrap/image")
    const InputGroup = require("yoyo-bootstrap/input-group")
    const Input = require("yoyo-bootstrap/input")
    const Jumbotron = require("yoyo-bootstrap/jumbotron")
    const Label = require("yoyo-bootstrap/label")
    const ListGroupItem = require("yoyo-bootstrap/list-group-item")
    const ListGroup = require("yoyo-bootstrap/list-group")
    const Media = require("yoyo-bootstrap/media")
    const MenuItem = require("yoyo-bootstrap/menu-item")
    const PageHeader = require("yoyo-bootstrap/page-header")
    const PanelGroup = require("yoyo-bootstrap/panel-group")
    const Panel = require("yoyo-bootstrap/panel")
    const ProgressBar = require("yoyo-bootstrap/prograss-bar")
    const Radio = require("yoyo-bootstrap/radio")
    const ResponsiveEmbed = require("yoyo-bootstrap/responsive-embed")
    const Row = require("yoyo-bootstrap/row")
    const Table = require("yoyo-bootstrap/table")
    const Thumbnail = require("yoyo-bootstrap/thumbnail")
    const Well = require("yoyo-bootstrap/well")
    const Children = require("yoyo-bootstrap/children")
    const Option = require("yoyo-bootstrap/option")
    const Modal = require("yoyo-bootstrap/modal")
    const Navbar = require("yoyo-bootstrap/navbar")
    const NavItem = require("yoyo-bootstrap/nav-item")
    const Nav = require("yoyo-bootstrap/nav")
    const Breadcrumb = require("yoyo-bootstrap/breadcrumb")
    const Modal = require("yoyo-bootstrap/modal")
    const Pagination = require("yoyo-bootstrap/pagination")
    const DatePicker = require("yoyo-bootstrap/date-picker")
    

    Customizing LESS/Bootstrap

    You can completely customize yoyo-bootstrap LESS with your own overrides, mixins and variables. yoyo-boostrap looks for a .bootstrap file in your app root (in other words, place the .bootstrap config file beside your node_modules directory).

    You can override every aspect of the LESS architecture in your config LESS file. Here is an example .bootstrap config file. You can specify the variables folder path, mixin folder path, component folder path. You may also just override the variables/mixings/components with some custom mixins (that way you dont need to rebuilt all your own LESS).

    // .bootstrap 
     
    // set the variables path 
    @variables-path:            "./bootstrap/variables.less";
     
    // set the override variables path, used to just override specific functionality 
    @variables-override-path:   "../../../style/variables.less";
     
    // set the mixins path 
    @mixins-path:               "./bootstrap/mixins.less";
     
    // override mixins before the reach components 
    @mixins-override-path:      "../../../style/mixins.less";
     
    // set the component less path 
    @component-path:            "./bootstrap/";
     
    // set the override component less path to override specific components Less 
    @component-override-path:   "../../../style/components/";
     
    // example component override "../../../style/components/buttons.less" =D 
    // the above would override just the buttons less (used by the Button component) 
    // that way you can change just the aspects of the Button component you want 
    // without providing your own bootstrap less, or changing everything ! 

    Note, overriding (i.e. @variables-override-path) will allow you to change/mixin specific variables or classes without totally changing everything whereas setting (i.e. @variables-path) the actual variables/mixins/or component paths will require you to provide the LESS files.

    I would recommend using the overrides over completely setting new paths. This was you can change certain aspects of the components or base without having to change or provide all of bootstrap again.

    The Manual/Guide

    yoyo-boostrap uses the same conventions as the React Bootstrap package. Use their manual for property coverage on Bootstrap components. This way I don't need to write documentation =D

    Here: https://react-bootstrap.github.io/components.html

    DatePicker

    yoyo-bootstrap comes with its own date picker which merges the jQuery Bootstrap DatePicker options and the React Bootstrap date picker options. Because of this, I'll provide the DatePicker options below:

    {
      i18n: {
        months: ['January','February','March','April','May','June','July','August','September','October','November','December'],
        monthsShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        days: ['Su','Mo','Tu','We','Th','Fr','Sa']
      },
     
      onChange: function (dateObject) {}, // fired when a date has been selected
     
      showToday: true, // highlight the current date
     
      autoClose: true, // allows onFinished to be fired when the date is selected
     
      viewMode: 'days', // days, months, years
     
      datesDisabled: [new Date("08/12/2013")], // dates are disabled
     
      daysOfWeekDisabled: [0, 2, 4], // <= this will disable Sunday, Tuesday, Thursday
     
      defaultViewDate: new Date() // the default selected date
    }

    Note, the DatePicker uses and handles like a Bootstrap drop down button/menu. So use it in an InputGroup. See the example above. Treat it like a drop down menu in your code.

    dom101 - for basic DOM tooling

    For some components where DOM analysis or manipulation is required, yoyo-bootstrap uses DOM101 - a completely modularized DOM helper package. It's essentially jquery without the mess, that is properly compartmentalized.

    Note, dom101 is only really used in the Collapse module.

    Checkout dom101

    throw-down - life cycle management

    For some components such as Collapse some basic life cycle management is needed for the component. We chose to use throw-down to manage this. A small DOM life-cycle management package that weighs .5kb minified and g-zipped.

    Checkout throw-down

    fast.js - method child processing (built in DSL/nesting)

    yoyo-bootstrap uses fast.js based method argument processing to create fast built in DSL and nesting. See ./children.js for more details.

    See fast.js for more details

    Pitfall: Glyphicons/SVG

    SVG components just as glyphicon data must be imported separately, this is due to the limitations of requiring CSS in JS.

    License

    The MIT License (MIT)
    
    Copyright (c) 2016 Nick Dodson
    
    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.
    

    Install

    npm i yoyo-bootstrap

    DownloadsWeekly Downloads

    5

    Version

    0.0.24

    License

    MIT

    Last publish

    Collaborators

    • silentcicero