{"id":240,"date":"2017-02-09T03:21:01","date_gmt":"2017-02-09T03:21:01","guid":{"rendered":"http:\/\/www.onlypsd2html.com\/blog\/?p=240"},"modified":"2017-02-09T03:21:01","modified_gmt":"2017-02-09T03:21:01","slug":"bootstrap-4-alpha-5","status":"publish","type":"post","link":"https:\/\/www.onlypsd2html.com\/blog\/bootstrap-4-alpha-5\/","title":{"rendered":"Bootstrap 4 Alpha 5"},"content":{"rendered":"<p><a href=\"http:\/\/v4-alpha.getbootstrap.com\">Alpha 5 has arrived<\/a> just over a month after Alpha 4 with some major feature improvements and a boat load of bug fixes. We still have a lot of work to do, but we\u2019re closing the gap and getting more stable with each release. Keep reading for the highlights and plans for Alpha 6.<\/p>\n<h3 id=\"new-css-bundles\">New CSS bundles<\/h3>\n<p>We\u2019ve updated our build process to include compiled versions of all our CSS bundles. In addition to the longstanding default compiled and minified bundles, we now include compiled CSS files for our flexbox mode, grid system only, and Reboot only bundles. Each bundle includes a compiled, minified, and Sass map, just like the default compiled CSS.<\/p>\n<h3 id=\"grid-updates\">Grid updates<\/h3>\n<p>Our grid system has been updated and is more flexible than ever. New in Alpha 5 are breakpoint specific grid gutters. That\u2019s right, now you can customize the width of your gutters across each and every grid tier by modifying the Sass map.<\/p>\n<p>The <code class=\"highlighter-rouge\">.container<\/code> behaviors have changed slightly in Alpha 5. We now set the <code class=\"highlighter-rouge\">width<\/code> of each container alongside a <code class=\"highlighter-rouge\">max-width: 100%;<\/code> to ensure proper rendering across browsers in both our default and flexbox modes. Similarly, we fixed a bug in our flexbox grid where columns didn\u2019t properly collapse at lower breakpoints.<\/p>\n<p>Lastly, we\u2019ve changed a few breakpoint and container dimensions. The <code class=\"highlighter-rouge\">sm<\/code> tier\u2019s container is now smaller than it\u2019s viewport dimensions and the <code class=\"highlighter-rouge\">lg<\/code> tier has changed from <code class=\"highlighter-rouge\">940px<\/code> to <code class=\"highlighter-rouge\">960px<\/code> for grid columns that more cleanly by 12.<\/p>\n<h3 id=\"utilities-overhaul\">Utilities overhaul<\/h3>\n<p>Utility classes got a ton of attention with Alpha 5 and will continue to in Alpha 6. Major changes in this release include:<\/p>\n<ul>\n<li>Simpler <code class=\"highlighter-rouge\">margin<\/code> and <code class=\"highlighter-rouge\">padding<\/code> syntax (e.g., now <code class=\"highlighter-rouge\">mx-auto<\/code> instead of <code class=\"highlighter-rouge\">m-x-auto<\/code>).<\/li>\n<li>Renamed <code class=\"highlighter-rouge\">.pull-*-left<\/code> and <code class=\"highlighter-rouge\">.pull-*-right<\/code> to their CSS properties (e.g., now <code class=\"highlighter-rouge\">.float-*-left<\/code> and <code class=\"highlighter-rouge\">.float-*-right<\/code>).<\/li>\n<li>Separated <code class=\"highlighter-rouge\">background<\/code> and <code class=\"highlighter-rouge\">color<\/code> utilities for more explicit styling.<\/li>\n<li>Renamed image utilities, moving from <code class=\"highlighter-rouge\">.img-rounded<\/code> and <code class=\"highlighter-rouge\">.img-circle<\/code> to <code class=\"highlighter-rouge\">.rounded<\/code> and <code class=\"highlighter-rouge\">.rounded-circle<\/code>, respectively.<\/li>\n<li>Removed the <code class=\"highlighter-rouge\">display: block;<\/code> from <code class=\"highlighter-rouge\">.img-fluid<\/code> as it\u2019s unnecessary for creating responsive images (the <code class=\"highlighter-rouge\">inline-block<\/code> default works great as-is).<\/li>\n<li>Added new <code class=\"highlighter-rouge\">vertical-align<\/code> utilities with <code class=\"highlighter-rouge\">.align-top<\/code>, <code class=\"highlighter-rouge\">.align-middle<\/code>, and more.<\/li>\n<\/ul>\n<p>Be sure to scope out the open issues in <a href=\"https:\/\/github.com\/twbs\/bootstrap\/milestone\/39\">the Alpha 6 milestone<\/a>. There are more updates coming to utilities to add more responsive variations, more consistent naming, and more.<\/p>\n<h3 id=\"navbar-updates\">Navbar updates<\/h3>\n<p>We\u2019ve put a <a href=\"https:\/\/github.com\/twbs\/bootstrap\/pull\/19890\">ton of time into the navbar for Alpha 5<\/a>, but honestly it\u2019s still not done. Rather than hold back the progress we\u2019ve made for it until Alpha 6, we\u2019re including a somewhat half-baked iteration.<\/p>\n<p>Here\u2019s a look at what\u2019s new, how it works, and what might change in our next release.<\/p>\n<ul>\n<li>First up, the navbar has a <strong>brand new toggler<\/strong> that features a customizable SVG-based <code class=\"highlighter-rouge\">background-image<\/code>. With the power of Sass variables, that allows us to easily change the color of those hamburger menu icons.<\/li>\n<li>Second, the <strong>default styles for the brand and navigation have largely been tweaked<\/strong>. There\u2019s less custom styling overall and an emphasis on positioning and flexibility.<\/li>\n<li>Building on that, we <strong>overhauled the collapse plugin integration for responsive navbars<\/strong>. With the help of some utility classes and collapse classes for each grid tier, you can easily pick the breakpoint for collapsing your navbar without having to recompile your Sass. Also included is the auto restyling of dropdown menus for mobile so they no longer hide other navbar content when toggled.<\/li>\n<li>Lastly, we\u2019ve <strong>updated the styling and documentation for various navbar subcomponents<\/strong>. There\u2019s more flexibility and examples of the <code class=\"highlighter-rouge\">.navbar-brand<\/code>, better form control support, higher nav contrast, themed responsive toggles, and more.<\/li>\n<\/ul>\n<p>The navbar is a tricky one\u2014there\u2019s so much functionality and styling that can go into them. We\u2019ve <a href=\"https:\/\/github.com\/twbs\/bootstrap\/issues\/20937\">outlined the next major pieces for the navbar<\/a>, but there\u2019s likely more we\u2019re missing. Be sure to give the updated component a whirl and report back with your feedback.<\/p>\n<h3 id=\"getting-to-alpha-6\">Getting to Alpha 6<\/h3>\n<p>We\u2019re planning on one more major alpha release before getting into the slightly more stable beta ships. There\u2019s still more to do around our major components\u2014the navbar, flexbox variants, utilities, and accessibilty\u2014before we button things up.<\/p>\n<p>Once done, we\u2019ll review all on our docs and update all our example templates to the latest and greatest. From there we\u2019ll need your help to test these changes and report bugs. Stay tuned for more updates as we get closer to that release.<\/p>\n<p>Until then, have at it with Alpha 5!<\/p>\n","protected":false},"excerpt":{"rendered":"Alpha 5 has arrived just over a month after Alpha 4 with some [&hellip;]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,7,63,62],"tags":[45,43,6,40,39,85,38,41,42],"class_list":["post-240","post","type-post","status-publish","format-standard","hentry","category-psd-to-bootstrap","category-psd-to-html","category-psd-to-html5","category-psd-to-responsive","tag-convert-psd-to-html-bootstrap-online","tag-psd-2-bootstrap","tag-psd-to-bootstrap","tag-psd-to-bootstrap-3","tag-psd-to-bootstrap-conversion-online","tag-psd-to-bootstrap-conversion-service","tag-psd-to-bootstrap-converter-online-free","tag-psd-to-bootstrap-online","tag-psd-to-bootstrap-plugin"],"_links":{"self":[{"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/posts\/240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/comments?post=240"}],"version-history":[{"count":1,"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/posts\/240\/revisions"}],"predecessor-version":[{"id":241,"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/posts\/240\/revisions\/241"}],"wp:attachment":[{"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/media?parent=240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/categories?post=240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/tags?post=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}