Bird web application kit is fully based on Bootstrap framework. It includes almost all native Bootstrap components, grid system, original markup (except a few components where markup was slightly modified) and native classes. Current Bootstrap version is v4(Alpha).
About Bootstrap framework
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. The framework makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.
Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.
Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more. Bird template includes (almost) all of them:
|Glyphicons||Icon font. Includes over 250 glyphs in font format from the Glyphicon Halflings set|
|Dropdowns||Toggleable, contextual menu for displaying lists of links|
|Button groups||Group a series of buttons together on a single line with the button group|
|Button dropdowns||Use any button to trigger a dropdown menu by placing it within a
|Input groups||Extend form controls by adding text or buttons before, after, or on both sides of any text-based
|Navs||Navs available in Bootstrap have shared markup, starting with the base
|Navbar||Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases|
|Breadcrumbs||Indicate the current page's location within a navigational hierarchy|
|Pagination||Provide pagination links for your site or app with the multi-page pagination component|
|Badges||Easily highlight new or unread items by adding a
|Page header||A simple shell for
|Alerts||Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages|
|Progress bars||Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars|
|Media object||Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content|
|Cards||While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the card component|
|Responsive embed||Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device. Rules are directly applied to
Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.:
|Transitions||Transition.js is a basic helper for
|Modals||Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults|
|Dropdowns||Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills|
|Togglable tabs||Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Nested tabs are not supported|
|Tooltips||Inspired by the excellent
|Popovers||Add small overlays of content, like those on the iPad, to any element for housing secondary information. Popovers whose both title and content are zero-length are never displayed|
|Alert messages||Add dismiss functionality to all alert messages with this plugin. When using a
|Buttons||Do more with buttons. Control button states or create groups of buttons for more components like toolbars|
|Collapse||Flexible plugin that utilizes a handful of classes for easy toggle behavior|
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
<!-- Markup --> <!DOCTYPE html> <html lang="en"> ... </html>
To get started, include 6 CSS files: native bootstrap styling and Bird template overrides. File ordering matters:
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="lib/css/bootstrap.css"> <link rel="stylesheet" href="lib/css/animate.min.css"> <!-- Bird overrides --> <link rel="stylesheet" href="lib/css/main.css">
Then include jQuery library and Bootstrap itself. File ordering matters:
Now you are up and running. All template files MUST contain these 9 files in your page's
<head> element. All other files are optional, except
app.js, which contains template's JS base. Also keep correct load ordering: first - dependencies, then - components. You can place JS paths either in
<head> or before
<body> closing tag, it's up to you. I prefer 1st option.