How to prepare your site for Bootstrap 4

With Bootstrap 4 pushing towards a third alpha release we’d thought we’d share how we’re preparing ourselves for the release of Bootstrap 4 with a few simple steps.

1. Follow development on GitHub

Whether you’re a developer or a beginner you can follow Bootstrap 4 development as it progresses on GitHub.

Using a GIT UI app or tool like GitHub’s App or GitBox you can easily download the whole Bootstrap code base/repository, browser test it, switch between branches and view commit messages.

Commits are basically code changes with a related message describing the work done. Quite often commits reference to pull requests (requests to merge code or functionality into the main development branch) or URLs so you can read more detail about the changes within a given commit which is a useful way to staying up to speed with Bootstrap 4 development.

Right now, most the main Bootstrap 4 development is happening on the v4-dev branch with any Bootstrap 3 maintenance work happening on the master branch.


2. Issues, labels, milestones & ship lists

Issues

GitHub allows each code repository or project to have its own issue queue which can be used for feature requests, bug reporting and general project discussion. As mentioned you might see issue numbers referenced in commit messaged and this can be useful for understand changes made and the motives behind them.


Labels

On larger project like Bootstrap there can be thousands of issues so keeping track of them can be tricky. GitHub allows issues to be categorised using “labels” which are basically just “tags” that allow related issues to be loosely grouped together. Grouping can be by anything like code version (ie. v4 for Bootstrap 4), status of the issue (ie. on-hold) or the component it relates to (ie. CSS).

This can be useful for tracking down information related to a label area or component.

See the Bootstrap labels lists.


Milestones

To help track & maintain progress, issues can be grouped into milestones which often represent a group of issues/changes that will make up an official code releases. Bootstrap uses milestones to track release progress by tracking open & closed issues. Although milestones can be altered they are a great way of seeing what changes are planned for a given release and what’s been added since the last milestone.

Check out the Bootstrap v4.0.0-alpha.3 milestone for an example.


Ship Lists

These are less common but have been used on Bootstrap to outline and highlight significant changes made in each release. Similar to a milestone but it is created manually by the project maintainers rather than being a feature with GitHub.

These are most useful for tracking changes after a release is made but you can also track them regularly along side milestones to see progress.

Some ship list examples


Pro Tip: Using updated:>YYYY-MM-DD in the [issue queue](https://github.com/twbs/bootstrap/issues) search field allows you to see issues updated in the after the YYYY-MM-DD date. ie updated:>2016-01-01 would show all issues updated since Jan 1st 2016.

3. Documentation

As the Bootstrap 4 codebase progresses so does the documentation and if you’ve taken a look at the issue queue already you might of noticed a lot of issues are documentation related. The Bootstrap 4 documentation site has been live since the first alpha release and will be updated with each release so is a great place to follow especially if you’re a beginner not familiar with GitHub.

Bare in mind, as with the codebase the documentation is a work in progress so things might work as expected.


4. Get stuck in

There’s only so much read & following of posts and issues you can do, there comes a point when it’s best to jump in and start coding!

If you’re upgrading an existing site you first stop will need to be the Bootstrap 4 migration guide and like we did with our Flexor Lite Theme it’s probably useful to work through the HTML, then CSS followed by Javascript changes before adding in any new functionality. If you’re starting a new site you’ll have a much easier ride and can use one of the Bootstrap 4 example templates as a starting point.

No Coments

    Leave a Reply

    Your email address will not be published. Required fields are marked *