bootstrap

What is bootstrap?

Bootstrap is a powerful front-end framework for faster and easier web development. It includes HTML, CSS, and JavaScript components for building responsive and mobile-first websites.

What are bootstrap's main functionalities?

Responsive Grid System

Bootstrap's grid system allows you to create responsive layouts that adapt to the screen size of devices.

<div class='container'>
  <div class='row'>
    <div class='col-md-4'>.col-md-4</div>
    <div class='col-md-4'>.col-md-4</div>
    <div class='col-md-4'>.col-md-4</div>
  </div>
</div>

Pre-styled Components

Bootstrap provides a wide range of pre-styled components such as buttons, forms, modals, etc., that can be easily customized and used in web projects.

<button type='button' class='btn btn-primary'>Primary Button</button>

JavaScript Plugins

Bootstrap comes with several jQuery plugins that add interactive features such as modals, dropdowns, and carousels.

<script>
  $(document).ready(function(){
    $('#myModal').modal('toggle');
  });
</script>

Utility Classes

Bootstrap includes utility classes for spacing, text alignment, display properties, and more, which help in fine-tuning the layout and design.

<div class='text-center mt-3 mb-4'>Centered text with margin top and bottom</div>

Other packages similar to bootstrap

foundation-sites

Foundation is a responsive front-end framework similar to Bootstrap but with a more semantic approach to the grid system and components.

bulma

Bulma is a modern CSS framework based on Flexbox. It is lightweight compared to Bootstrap as it doesn't include JavaScript components.

tailwindcss

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without writing CSS from scratch. It differs from Bootstrap's component-based approach.

semantic-ui

Semantic UI is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. It offers a different philosophy with a focus on semantics and readability.

uikit

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. It offers a comprehensive collection of HTML, CSS, and JS components which are simple to use, easy to customize, and extendable.

README

bootstrap allows you to create a new node.js app with a few things already setup to get you started. It takes a lot of inspiration from the express app executable.

You can use Javascript or Coffescript by following the prompts.

Usage

$ npm install -g bootstrap
$ bootstrap yourappname
$ cd yourappname
$ npm install

If you are using Heroku and Foreman you can now do

$ foreman start

If you want to start it with node you can do

$ node app.js

If you are using CoffeeScript then you can do

$ coffee app.coffee

TODO:

• Add support for .scss
• Add support for Mustache and Icanhaz.js templates