adaptive web design Agiya Product Offers agriya christmas offer 2015 2016 Agriya Coupon Code agriya discount Agriya Discounts 2016 agriya event booking Agriya Flash Sale Agriya getlancer Agriya Offer Agriya Product Launch agriya product offer agriya product upgrade Agriya Readymade Solution agriya services Android Apps Development Angular 2 Angular 2 Advantages Angularjs Basics AngularJS Developers AngularJS Development AngularJS Development Company AngularJS Development Services Angularjs vs Angular 2 app development discount appointment booking script appointment booking script update aura php best cms in 2016 best css frameworks best css frameworks pros and cons Blaber Chat BlaberChat App Script Bootstrap 4 Alpha 3 Features Bootstrap 4 Features Bootstrap Angular 2 Differences Bootstrap Angular 2 Similarities bootstrap framework Bootstrap Latest News Bootstrap Updates Bootstrap vs Angular 2 bootstrap vs foundation vs skeleton Bootstrap Web Development Bootstrap with Angular 2 Build Classified Ads Marketplace build elearning platform build html5 mobile apps Build Service Marketplace cake php Canvas Advantages Canvas Disadvantages Canvas vs SVG card based web design christmas coupon code 2015 christmas offer Classfieds Marketplace Solution Classified Ads Solution clone script clone script discount codeigniter comparison between react vs angular vs vue js Content Management System(CMS) create online learning platform Cross platform mobile app development custom elearning solution Custom Mobile Application Development custom social networking platform Custom Web Development Company custom website development develop social media platform developer mistakes doctor appointment booking script drupal developers mistakes elearning solution from agriya event booking software event booking solution event management software event management solution event management system event ticketing solution featured food delivery script food delivery software food delivery system food ordering platform food ordering script food ordering solution freelance clone script freelance marketplace platform Freelance platform freelance platform script freelance software freelance website using php script fuelphp getlancer product upgrade html 5 html 5 vs html 6 html 6 HTML5 Web Design Instant Messaging App Script iOS App Development Company just eat clone just eat clone script laravel launch taxi booking app magento make attractive signup form material design material design with bootstrap Mobile App Design Mistakes Mobile Application Development Company mobile apps development Mobile Design Mistakes mvc framework node.js 6 release date Node.js developers Node.js Development Company Node.js Development Services node.js v6 features node.js version 6 nodejs nodejs cms frameworks nodejs developers nodejs development nodejs development company nodejs frameworks nodejs pros and cons nodejs tutorials october cms october cms features Offers This Month on-demand fleet solution On-demand Service Booking on-demand taxi booking solution Online Chatting App Script Online Classified Ads Solution Online Classifieds Marketplace online event booking online food delivery solution online food ordering system online learning solution online tutoring solution open source cms 2016 open source cms vs custom cms Open Source Development Open Source Development Company open source development tools Open Source Website Builder phalcon php php 7 php 7 issues with wordpress php 7 release date php 7 vs hhvm php developers mistakes php frameworks php frameworks pros and cons php vs nodejs php vs python php web development php web development tools phpixie python react js vs angular js vs vue js ReactJS responsive vs adaptive design responsive web design restaurant ordering system sass sass vs scss scss Service Booking Platform Service Booking Software Service Booking Solution Service Marketplace Software Service Marketplace Solution Shopify Shopify vs Magento social media website development social networking software social networking solution social networking website development SVG Advantages SVG Disadvantages symfony taxi app for business taxi app solution taxi booking solution TypeScript pros and cons Typescript vs Angularjs UI Design ui designer differences ui designer similarities UI/UX Mistakes UI/UX tools using every php version ux UX Design ux design vs ui design ux vs ui designer web design and development trends 2015 web design and web development web design predictions 2016 web designer skills 2015 web designer vs web developer Web Development Company India web development offer What is Xamarin WhatsApp Clone WhatsApp Clone Script why choose nodejs Why to choose TypeScript Why we choose Angular 2 Why we choose Xamarin wordpress wordpress development mistakes wordpress features wordpress theme frameworks wordpress vs magento wordpress web development Xamarin features Xamarin mobile aops development yii framework zend zocdoc clone script

Bootstrap 4 Features


Download - Bootstrap 4.0.0-alpha 3 here


1. Sass Instead of LESS


Until now Bootstrap has used LESS as its main CSS prepocessor, but for the new major release, the style rules will be refactored to Sass, which is much more popular among frontend developers, has a huge contributor base, generally easier to use and offers more possibilities. Thanks to the powerful Libsass Sass Complier written in C/C++ Bootstrap 4 will compile much faster than before.


2. New Grid Tier for Smaller Screens


Bootstrap has a sophisticated responsive grid system that allows developers to target devices with different viewports. Bootstrap 3 currently has 4 grid classes for columns, .col-xs-XX for mobile phones, .col-sm-XX for tablets, .col-md-XX for desktops, and .col-lg-XX for larger desktops. Bootstrap 4 will enhance the grid system with a fifth one that will facilitate developers to target smaller devices under 480px viewport width.

The new grid class has taken the name of the previous smallest one, and pushed the current names of the grid tiers upwards by one notch. In Bootstrap 4 the large desktops will use the .col-xl-XX class selector. It’s important to know that despite the new name they didn’t add a new class for extra large screens but for extra small ones.

3. Introduces Relative CSS Units


Bootstrap 4 finally drops the support for Internet Explorer 8. That’s really a smart step as it allows them to get rid of pesky polyfills, and convert to relative CSS units. Instead of pixels, the new major release will use REMs and EMs that make it possible to implement responsive typography on Bootstrap sites. This will also increase readability, and make sites more accessible for disabled users.

If you want to try out how relative units work with the new Bootstrap 4, check out this demo on Codepen.


4. Brand New Bootstrap Cards


The development team decided to unify some previous elements of Bootstrap’s user interface, so they decided to introduce a new UI component called Cards. Cards will replace the former wells, thumbnails and panels, and will provide users with a more streamlined workflow. Don’t worry, cards will keep familiar elements, such as titles, headers and footers of wells, thumbnails and panels.

As cards will be more flexible than the current UI components, they will allow a bigger space for creative implementations. There are some pioneers out there who have already conducted experiments on Codepen with Bootstrap Cards. You can check them out, or create your own cards.


5. New Reboot Module


The new Reboot module replaces the previous normalize.css reset file. It doesn’t ditch it; on the contrary, it builds more rules upon it. The goal of the move was to include all generic CSS selectors and reset styles in a single, easy-to-use SCSS file. You can take a look at the source code here if you want to better understand how the new module works.

It’s good to know that the new reset styles smartly set the box-sizing CSS property to border-box on the <html> element, which is therefore inherited by each child element on the page. The new style rule makes responsive layouts more manageable. If you want to experience the difference between the content-box and border-box layout types, take a look at this handy demo provided by CSS-Tricks.com (it wasn’t created for Bootstrap 4, it just shows how box-sizing generally works).


6. Opt-in Flexbox Support


Bootstrap 4 makes it possible to take leverage of CSS3’s Flexbox Layout, however – as Internet Explorer 9 doesn’t support the flexbox module – the default version of Bootstrap 4 rather makes use of the float and display CSS properties to implement a fluid layout.

Flexbox has an easy-to-use layout that can be excellently utilized in responsive design, as it provides a flexible container that either expands or shrinks itself to fill the available space the best way. Only use the opt-in flexbox feature if you don’t need to provide support for IE9.


7. Streamlined Variable Customization


All Sass variables used in the new Bootstrap release are included in a single file called _variables.scss, that will significantly streamline the development process. You don’t have to do anything else apart from copying the settings from this file into another one called _custom.scss to change the default values.

You can customize many things such as colours, spacing, link styles, typography, tables, grid breakpoints and containers, column number and gutter width, and many others.


8. New Utility Classes for Spacing


Bootstrap 3 already has many practical utility classes such as the ones that change floating or the clearfix, but Bootstrap 4 adds even more. The new spacing classes allow developers to quickly change paddings and margins on their sites.

The syntax for the new classes is quite straightforward, for example adding the .m-a-0 class links a style rule that sets margins to 0 on all sides of the given element (margin-all-0). While margins use the m- prefix, paddings are styled with the p- prefix. In the development docs you can take a look at all the new spacing utility classes.


9. Tooltips and Popovers Powered By Tether


In Bootstrap 4 tooltips and popovers makes use of the super cool Tether library, a positioning engine that makes it possible to keep an absolutely positioned element right next to another element on the same page. This means tooltips and popovers will be automatically placed properly on Bootstrap 4 websites.

Don’t forget that as Tether is a third party JavaScript library, you need to separately include it in the HTML before your bootstrap.js file.


10. Refactored JavaScript Plugins


The development team refactored each JavaScript plugin for the new release using EcmaScript 6. With the smart utilization of the latest specifications and the newest enhancements, they intend to improve the frontend experience.

The new Bootstrap 4 has also undergone through other JavaScript improvements, such as option type checking, generic teardown methods, and UMD support, that will all work together to make the most popular frontend framework run more smoothly than ever before.

This article was taken from HONGKIAT. The whole purpose of sharing this article is to convey the news for my readers.

Contact Form

Name

Email *

Message *

Powered by Blogger.