yoyo-bootstrap
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 justyo-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 = documentbody
or a Grid/Column/Row:
const Common = const Grid = const Row = const Col = documentbody
or a form:
const Common = const Form = const FormControl = const Option = documentbody
how about a modal:
const yo = const Common = const Button = const Modal = const connect = const update = youpdate const Dialog = { var id show = false { id = _id } { show = !show; } { return yo` <div> </div> ` } return } documentbody
how about a date picker:
const yo = const Common = const InputGroup = const FormControl = const DatePicker = const connect = const update = youpdate const DateField = { var id open = false selected = ; { id = _id } { open = false } { open = true } { selected = dateObj } { return } return } documentbody
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' {} // 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: "08/12/2013" // dates are disabled daysOfWeekDisabled: 0 2 4 // <= this will disable Sunday, Tuesday, Thursday defaultViewDate: // 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.