why you need to switch to bootstrap 4.0?

24
Why you need to switch to Bootstrap 4.0? www.markupbox.com

Upload: markup-box

Post on 23-Jul-2016

216 views

Category:

Documents


0 download

DESCRIPTION

At MarkupBox, a team of developers has been using Bootstrap frameworks for application developments since the very inception of this framework.

TRANSCRIPT

Page 1: Why you need to switch to bootstrap 4.0?

Why you need to switch to

Bootstrap 4.0?

www.markupbox.com

Page 2: Why you need to switch to bootstrap 4.0?

Content

1. Major upgrades in Bootstrap 4.0

a. Rems based grid system

b. Optional support for flexbox

c. Enhanced media queries

d. Addition of cards

e. Inclusion of Reboot.css

f. Saas variables

g. Javascript enhancement

2. How it will improve website performance?

3. How markupbox.com can help you in switching your website?

Page 3: Why you need to switch to bootstrap 4.0?
Page 4: Why you need to switch to bootstrap 4.0?

Major upgrades in Bootstrap 4.0

When Mark Otto and Jacob Thornton had launched Bootstrap 1.0 four years ago, it wasn’t

responsive and hence was less popular among developers. But over the years, the Bootstrap

frameworks have set new standards, particularly in the field of mobile application

development.

And the latest Bootstrap 4.0 indicates several awesome features that can encourage the

developer community to switch to this new framework.

There are several key enhancements that one can witness in this latest Bootstrap framework.

Read next slides for more information..

Page 5: Why you need to switch to bootstrap 4.0?

1. Rems based Grid System:

Although Bootstrap 4.0 comes with the same HTML syntax, but the grid system

architecture has changed significantly.

Users can use the advanced 12-column grids or container-fluid or even nested rows.

With the rems based grid system, everything becomes dynamic.

This is also going to support application development for devices of different sizes.

Page 6: Why you need to switch to bootstrap 4.0?

For example, you still can create your advance 12-columns grids like so:

Page 7: Why you need to switch to bootstrap 4.0?

For example, Or, use container-fluid for full-width rows:

Page 8: Why you need to switch to bootstrap 4.0?

For example nested rows:

Page 9: Why you need to switch to bootstrap 4.0?

2. Optional Support for Flexbox:

Bootstrap 4.0 supports Flexbox and which can allow complex gridding.

It can quickly allow switching of grid components without the need of adjusting the HTML

syntax.

There is no need to use the Match Height feature when you opt in for the Flexbox support.

Page 10: Why you need to switch to bootstrap 4.0?

3. Enhanced Media Queries:

In Bootstrap 4.0, media queries are configurable with Sass.

It gives you a better control with the flexibility of choosing your own break-points.

Page 11: Why you need to switch to bootstrap 4.0?

example : media queries are configurable with Sass

Page 12: Why you need to switch to bootstrap 4.0?

Continue Reading From Next Slide...

USA: +1 404 857 1565

UK: +44 192 360 6144

markupbox.com

[email protected]

Page 13: Why you need to switch to bootstrap 4.0?

4. Addition of Cards:

If you were using panels and wells in Bootstrap 3.0, it’s time to forget them now.

In Bootstrap 4.0, you will find Cards instead that are nothing but content container.

Cards includes options of modifying content of:

header,

footer,

background color

a host of other types of contents

Page 14: Why you need to switch to bootstrap 4.0?

5. Inclusion of Reboot.css:

Previously, Bootstrap used Normalize.css as its CSS reset.

Normalize is awesome and well-respected.

With Bootstrap 4, they actually just take normalize.css, and add some Bootstrap things

to it.

Bootstrap 4.0 has this new reboot component, allowing to combine the reset and the

base styles into a single file.

Now, you can use just Reboot.css and add some Bootstrap components to it.

Page 15: Why you need to switch to bootstrap 4.0?

6. Sass Variables:

Bootstrap 4.0 offers better customization opportunities, and the inclusion of the Sass

variables in a single file can make your customization task effortless.

You can custom things like:

Colors

Options (Flex Box, transitions, rounded, shadows, etc.)

Spacing

Body (defaults)

Link Styles

And more…

Page 16: Why you need to switch to bootstrap 4.0?

7. JavaScript Enhancement:

JavaScript is all set to be the future of the web development, and in Bootstrap 4.0, one

can witness more of the script.

For example, all plugins are powered with the JavaScript with the codes written in ES6.

Page 17: Why you need to switch to bootstrap 4.0?

Continue Reading From Next Slide...

USA: +1 404 857 1565

UK: +44 192 360 6144

markupbox.com

[email protected]

Page 18: Why you need to switch to bootstrap 4.0?

How it will help in improving a website’s overall performance?

1. Fast Compilation:

The developer community is particularly excited about the new Bootstrap version’s Sass

orientation, which allows them to a faster compilation. Moreover, the customization

opportunity of Sass variables can encourage custom developments.

2. Flexible Layouts:

With an enhanced grid system and the Flexbox support in Bootstrap 4.0, it allows users to

create simple layouts in CSS. It also allows content alignment in the columns of equal

heights for the optimization of the layout.

Page 19: Why you need to switch to bootstrap 4.0?

How it will help in improving a website’s overall performance?

3. Easy Content Modification:

With the inclusion of Cards in this latest Bootstrap version, the content modification task

has got a lot easier. One can now easily modify the header, footer, images, background

color using this new feature.

4. Mobile First Framework:

Bootstrap 4.0 is truly meant for the mobile application development with its improved

grid system. By using small size tiers, a developer can target the application development

for devices of different screen sizes, particularly mobile devices.

Page 20: Why you need to switch to bootstrap 4.0?

How it will help in improving a website’s overall performance?

5. User Friendly:

With the improved auto-placement of tools and an improved library, developers find Bootstrap 4.0 as a more user-friendly framework for creating responsive designs.

6. Custom Development:

Bootstrap 4.0 helps customize a number of components, such as colors, spacing, link style, typography, tables etc. Moreover, the Sass variables bring a greater customization opportunity.

7. Better Use of Plugins:

In Bootstrap 4.0, plugins are written in ES6 and are compiled with Babel. This helps users to maintain plugins more easily and one can use a number of plugins for feature enhancement.

Page 21: Why you need to switch to bootstrap 4.0?

How markupbox has an edge in this field?

At MarkupBox, a team of developers has been using Bootstrap frameworks for

application developments since the very inception of this framework.

With the release of the Alpha version of Bootstrap 4.0, the team is gearing up to

leverage on its new features and capabilities.

The developers are learning about the new inclusions in this latest Bootstrap version

and are ready to use the improvements to create more responsive designs.

Page 22: Why you need to switch to bootstrap 4.0?

About MarkupBox

We are a focussed markup services firm offering quality and affordable PSD to HTML

conversion services to our clients from all over the world. We have been in the business for

approximately 8 years now and have delivered over 4000 projects successfully for various

business houses, digital agencies and freelances from all over the world.

More than 70% of our business comes from our existing customers who have enjoyed using

our services at an affordable cost.

We would feel privileged to know your requirements. Get in touch today

Page 23: Why you need to switch to bootstrap 4.0?

USA: +1 404 857 1565

UK: +44 192 360 6144

markupbox.com

[email protected]

Page 24: Why you need to switch to bootstrap 4.0?

Thanks :)