(public).sospep.subjects ~ view article ~ bootstrap-3-versus-bootstrap-4

<h1 style="text-align: center;">bootstrap 4 versus bootstrap 3</h1>
<h2>[WHAT]</h2>
<ol>
<li>] by Don Sagrott, founder @ sospep.com - ] a cumulative analysis of multiple documents( ref # 4, # 5,, # 6 ) &nbsp;comparing these 2 CSS framework versions</li>
</ol>
<h2>[WHY]</h2>
<ol>
<li>] whats new in bootstrap 4,&nbsp;</li>
<li>] what changes from bootstrap 3,</li>
</ol>
<h2>[WHERE]</h2>
<ol>
<li><strong>] READ THE FULL ARTICLE</strong></li>
<ol>
<li>]&nbsp;</li>
</ol></ol>
<h2>[WHEN]</h2>
<ol>
<li>] 2016-11-26 x</li>
</ol>
<h2>[EXAMPLE]</h2>
<ol>
<li><strong>[new] grid has changed, 5 tiers VS 4</strong></li>
<ol>
<li><strong>] bs 3 grid = large(lg 1200 +), medium(md 1024x768), small(sm 768x1024), extra small (xs 768 -)</strong></li>
<li>] in Bootstrap 3, the smallest breakpoint has a wide range of devices less than 768px in width. As a result, there&rsquo;s no simple way to create different grid layouts for typical smartphone screens (~375px). There is also no way to distinguish between portrait and landscape mode on mobile devices.</li>
<li><strong>] bs 4 grid = extra large(xl 1200+ desktops and laptops), large(lg 1024x768 tablet landscape), medium(md 768 x1024 tablets portrait, phablets landscap), small(sm 667x375 phablets, smartphone landscape) and extra small(xs 375x667 smartphone portrait)&nbsp;</strong></li>
<li>] the additional tier allows us to target smaller devices less than 544 px, and create layouts specifically for this screen width</li>
<li>] REF# 4</li>
</ol>
<li><strong>[new] flexbox</strong></li>
<ol>
<li>]&nbsp;Thanks to flexbox (and display:table when flexbox is not enabled) we now have equal height cards!</li>
<li>]&nbsp;Flexbox provides simpler, more flexible layout options like vertical centering. Simply set the $enable-flex variable to enable flexbox in Bootstrap 4. Introduced in CSS3, flexbox won't work in older browsers like IE9, REF# 4.1&nbsp;</li>
<li>] REF# 4</li>
</ol>
<li><strong>[new] CARDS -&nbsp;</strong></li>
<ol>
<li>] What you notice first in Bootstrap 4 is that .panel and .well have been replaced by the .card. This makes a lot of sense as "cards" are one of the more well known trends in responsive design. The Bootstrap 4 Cards can be singular, grouped together (as shown) or equal height. There are many different layout and content options.&nbsp;</li>
<li>] much easier to create groups of same height cards&hellip;</li>
<li>] REF# 4</li>
</ol>
<li><strong>[new] tag</strong></li>
<ol>
<li>] replaces label</li>
<li>] REF# 4</li>
</ol>
<li><strong>[new] fonts</strong></li>
<ol>
<li>]&nbsp;The new native font stack is now the default.</li>
<li>] The default font size went from 14px to 16px in the new Bootstrap 4.&nbsp;</li>
<li><span style="background-color: #ffff00;">] All of the font sizing in Bootstrap 4 is completely based on `rem` units so that all font sizes are relative to the root element.</span></li>
<li>] REF# 4&nbsp;</li>
</ol>
<li><strong>[new] buttons</strong></li>
<ol>
<li>] now come in a new outline flavour</li>
<li>] REF# 4</li>
</ol>
<li><strong>[new] utility classes</strong></li>
<ol>
<li>]&nbsp;the addition of responsive floats that enable you to float an element (left, right, etc..) based on the grid tier.&nbsp;</li>
<li>] very handy spacing utility classes that enable better control of horizontal &amp; vertical space using variable margins and padding around elements.</li>
<li>] REF# 4</li>
</ol>
<li><strong>[new] source code is now SASS</strong></li>
<ol>
<li>] previously used less,&nbsp;</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] improved grid system using rems</strong></li>
<ol>
<li>]&nbsp;Using the Bootstrap grid still follows the same HTML syntax, but the underlining architecture changed quite a bit.</li>
<li>] EX container, row col,&nbsp;</li>
<li>] EX container-fluid, row, col ( for full width rows )</li>
<li>] EX ( nested rows)</li>
<li>] The main difference is the way the spacing is done. A container now has max-width set in rems. A row now has default negative left and right margin of -.9375rem, while columns have default left and right padding of 0.9375rem. These values were previously 15px in Bootstrap 3. These new rem values are almost the same as that.&nbsp;</li>
<li>]&nbsp;We&rsquo;ll explain rem a little bit more later, but the main thing to take-away is everything is dynamic and relative to the root HTML tag.</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] opt in flexbox grid</strong></li>
<ol>
<li>]&nbsp;</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] improved media queries</strong></li>
<ol>
<li>]&nbsp;&nbsp;Bootstrap 4 hit the nail on the head with media queries.</li>
<li>*] boostrap 3 media queries EXAMPLE -&nbsp;</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] cards</strong></li>
<ol>
<li>]&nbsp;They&rsquo;re essentially individual content blocks with a ton of out-of-the-box options.&nbsp;</li>
<li>] The big thing to take away here is you get a ton of new component options to basically build these little card blocks however you want.&nbsp;</li>
<li>] It&rsquo;s also worth looking into the Card Groups and Card Decks in the demo. You&rsquo;ll notice that even though their contents are different sizes, they&rsquo;re all equal in height without JavaScript.</li>
<li>] REF# 5&nbsp;</li>
</ol>
<li><strong>[new] reset component</strong></li>
<ol>
<li>]&nbsp;</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] SASS variables for customizing</strong></li>
<ol>
<li>]&nbsp;</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] no IE8 support</strong></li>
<ol>
<li>]&nbsp;</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] JS improvements</strong></li>
<ol>
<li>] es6 support</li>
<li>] jq 2.0 good to go</li>
<li>] UMD/AMD issues resolved</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] quickstart options</strong></li>
<ol>
<li>]&nbsp;</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] new units(REMs) for typography</strong></li>
<ol>
<li>]&nbsp;</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] display headings</strong></li>
<ol>
<li>]&nbsp;</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] inverse tables</strong></li>
<ol>
<li>]&nbsp;</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] 30% smaller footprint</strong></li>
<ol>
<li>] 88kb VS 123kb for v3</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] outline buttons, ] CC #7</strong></li>
<ol>
<li>]&nbsp;</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] no glyphicons</strong></li>
<ol>
<li>]&nbsp;</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] spacing utility class, ] CC # 8</strong></li>
<ol>
<li>]&nbsp;</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] WTF forms integration</strong></li>
<ol>
<li>]&nbsp;</li>
<li>] REF# 5</li>
</ol>
<li><strong>[new] additional responsive embeds</strong></li>
<ol>
<li>]&nbsp;</li>
<li>] REF# 5</li>
</ol></ol>
<h2>[HOW-TO]</h2>
<ol>
<li><strong>[00:00] why we choose bs</strong></li>
<ol>
<li>] we have experince with bs</li>
<li>] bs is widely adopted&nbsp;</li>
<li>] there are lots of 3rd party themes, ..., available for bs</li>
<li>[ &nbsp;</li>
</ol>
<li><strong>[00:00] bs 4 - conclusions</strong></li>
<ol>
<li>] &nbsp;Even though Bootstrap 4 is only in alpha, it&rsquo;s still really exciting. Bootstrap has come along way. There is currently no planned release date for Bootstrap 4, but you can <a href="https://github.com/twbs/bootstrap/pull/17021" target="_blank">follow along with the action</a>&nbsp;.</li>
<li>] REF# 5</li>
</ol>
<li><strong>[] how to - instruction</strong></li>
<ol>
<li>] checkout latest v from github repo</li>
<li>]&nbsp;</li>
</ol></ol>
<h2>[REFERENCE]</h2>
<ol>
<li>] # 6575 <a href="/view/task?id=6575" target="_blank">CREATE-article# 5433</a>&nbsp;(this) - whats new in bootstrap 4 || bootstrap 4 vs bootstrap 3</li>
<li>] <a href="https://medium.com/wdstack/bootstrap-4-whats-new-visual-guide-c84dd81d8387#.wdctgqubv%20" target="_blank">Bootstrap 4 a visual guide</a> - by Carol Skelly ON medium.com - Skelly illustrates the differences between the upcoming bootstrap version 4 and the current bootstrap version 3</li>
<ol>
<li>]&nbsp;<a href="http://bootstrap4.guide/" target="_blank">http://bootstrap4.guide/</a>&nbsp;- site demonstrating the newest bootstrap features</li>
</ol>
<li>x] r# # - ]&nbsp;<a href="https://scotch.io/bar-talk/whats-new-in-bootstrap-4" target="_blank">What&rsquo;s New in&nbsp;Bootstrap&nbsp;4</a>,SRC=best-of-hn-2015-08-25(184)/<a href="https://news.ycombinator.com/item?id=10116916" target="_blank">comments</a>(43) ] by Nicholas Cerminara @scotch.io - &nbsp;from a developer perspective</li>
<li>] r# # -&nbsp;<a href="http://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm" target="_blank">http://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm</a>&nbsp;- feature table comparing bootstrap 4 features vs bootstrap 3 features,&nbsp;</li>
</ol>
<h2>[RELATED]</h2>
<div><ol>
<li>] https://v4-alpha.getbootstrap.com/ - the official bootstrap site&nbsp;</li>
<li>]&nbsp;<a href="https://devdocs.io/bootstrap~4/" target="_blank">https://devdocs.io/bootstrap~4/</a></li>
<li>x] td]&nbsp;<a href="http://hackerthemes.com/bootstrap-cheatsheet#dropdown" target="_blank">BootStrap 4 cheatsheet</a>&nbsp;(hackerthemes.com), SRC=best-of-hn-2016-04-21 (311)/<a href="https://news.ycombinator.com/item?id=11541992" target="_blank">comments</a>(130)&nbsp;</li>
<li>x] td]&nbsp;<a href="http://blog.getbootstrap.com/2016/09/05/bootstrap-4-alpha-4/" target="_blank">Bootstrap 4 Alpha 4 Released</a>&nbsp;(getbootstrap.com),SRC=best-of-hn-2016-09-05(142)/<a href="https://news.ycombinator.com/item?id=12432136" target="_blank">comments</a>(76) - 4th alpha version release, announces that development on bootstrap v 3 will be stopped in order to advance v 4 more quickly&nbsp;</li>
<li>x] r# # - td]&nbsp;<a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" target="_blank">Bootstrap 4 Alpha</a>&nbsp;(getbootstrap.com),SRC=best-of-hn-2015-08-19(655)/<a href="https://news.ycombinator.com/item?id=10086651" target="_blank">comments</a>(208) - initial announcement of upcoming alpha version release</li>
<li>] # 5439 -&nbsp;<a href="/view/article?id=5439" target="_blank">bootstrap</a>&nbsp;- an overview of this front end framework</li>
<li>] # # - TOC - CSS&nbsp;</li>
<li>] # # - ART&nbsp;<a href="https://medium.com/wdstack/responsive-design-6-bootstrap-alternatives-e9889470c355#.3ke67dllz" target="_blank">bootstrap alternatives</a>&nbsp;- &nbsp;] by Carol Skelly @ wdstack - Skelly looks at 6 bootstrap alternatives including foundation, skeleton, purecss, uikit,&nbsp;<a href="http://semantic-ui.com/" target="_blank">semantic-ui</a>&nbsp;and&nbsp;<a href="http://materializecss.com/" target="_blank">materialize</a>&nbsp;</li>
</ol></div>

~ view article ~ Chapter] ch-007-css-frameworks FROM [ Book] css IN [ libraries] technology-developer-www