{"id":925,"date":"2014-03-19T23:56:19","date_gmt":"2014-03-19T23:56:19","guid":{"rendered":"http:\/\/blog.alexandremagno.net\/?p=925"},"modified":"2014-03-20T22:54:40","modified_gmt":"2014-03-20T22:54:40","slug":"mobile-first-bootstrap-book-released","status":"publish","type":"post","link":"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/","title":{"rendered":"Mobile First Bootstrap book released at time"},"content":{"rendered":"<figure id=\"attachment_926\" aria-describedby=\"caption-attachment-926\" style=\"width: 300px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/www.packtpub.com\/mobile-first-bootstrap\/book\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-926  \" title=\"Mobile First Bootstrap\" src=\"http:\/\/blog.alexandremagno.net\/wp-content\/uploads\/2014\/01\/gabriel_buy_my_book-300x300.jpg\" alt=\"Mobiel First Bootstrap Book\" width=\"300\" height=\"300\" srcset=\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2014\/01\/gabriel_buy_my_book-300x300.jpg 300w, https:\/\/alexandremagno.net\/wp-content\/uploads\/2014\/01\/gabriel_buy_my_book-150x150.jpg 150w, https:\/\/alexandremagno.net\/wp-content\/uploads\/2014\/01\/gabriel_buy_my_book-100x100.jpg 100w, https:\/\/alexandremagno.net\/wp-content\/uploads\/2014\/01\/gabriel_buy_my_book.jpg 640w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-926\" class=\"wp-caption-text\">A sample of the Bootstrap Mobile First Book written by Alexandre Magno, from Packt Publishing<\/figcaption><\/figure>\n<p>I would like to happily announce the release of the <a title=\"Mobile First Boostrap Book by Packt written by Alexandre Magno\" href=\"http:\/\/www.packtpub.com\/mobile-first-bootstrap\/book?tag=ps\/mobilefirstbootstrap-abr1\/1213\" target=\"_blank\">Mobile First Bootstrap Book<\/a>. This books aims to introduce the new <a title=\"Get Bootstrap\" href=\"http:\/\/getbootstrap.com\/\" target=\"_blank\">Bootstrap version 3<\/a>, developed using <a title=\"Mobile First definition by Luke Wroblewski\" href=\"http:\/\/www.lukew.com\/ff\/entry.asp?933\" target=\"_blank\">Mobile First<\/a>.<\/p>\n<p><a title=\"Mobile First definition by Luke Wroblewski\" href=\"http:\/\/www.lukew.com\/ff\/entry.asp?933\" target=\"_blank\">Mobile First<\/a>\u00a0is a development workflow that focus on mobile as first device. It&#8217;s a new paradigm of webdesign and the Bootstrap framework revisited all the codebase to this new development process.<\/p>\n<p>The three core benefit it was:<\/p>\n<ul>\n<li>Bootstrap now has mobile support for default, not using optional media queries anymore<\/li>\n<li>Now is 50% smaller and faster<\/li>\n<li>It was developed using <a title=\"Mobile First definition by Luke Wroblewski\" href=\"http:\/\/www.lukew.com\/ff\/entry.asp?933\" target=\"_blank\">Mobile First<\/a><\/li>\n<li><\/li>\n<\/ul>\n<p>It was a lot of effort to make a release the Booking following the Bootstrap big changing picture. One of the reasons is write about a framework that it was in time when still in release candidate. That&#8217;s why this book it was launched at time to market, because it was started even before the official Bootstrap 3 release.<\/p>\n<p>But why Mobile First? Why did Bootstrap completely change its course from Desktop First to Mobile First to get into this new way to develop more suitable websites and web applications? Why did the most popular frontend framework embrace this change at a time when responsive web design is continuously growing with better suited and standard techniques such as media-queries, fluid layout, and JavaScript on demand?<\/p>\n<p>Mobile browsers are increasing support for the brand new HTML5 and CSS3, with the philosophy to offer, for older browsers, a less stylized but fully functional component, and for capable browsers a rich and full experience that comes from mobiles to larger screens such as TVs.<\/p>\n<p>For older browsers (such as IE 8 and IE 9), Bootstrap has functional support, but enhanced features such as rounded corners and a placeholder attribute for tips in input fields are not supported for these browsers. To see the full details on browser support, check the Bootstrap documentation from the <strong>Getting started<\/strong> section (<a title=\"Mobile First bootstrap\" href=\"http:\/\/getbootstrap.com\/getting-started\/#browsers\" target=\"_blank\">http:\/\/getbootstrap.com\/getting-started\/#browsers<\/a>).<\/p>\n<p>We are living at a time when mobile use is increasing at a pace that will soon surpass desktop usage (<a title=\"Mobile First bootstrap\" href=\"http:\/\/www.businessinsider.com\/mobile-will-eclipse-desktop-by-2014-2012-6?IR=T\" target=\"_blank\">http:\/\/www.businessinsider.com\/mobile-will-eclipsedesktop-by-2014-2012-6<\/a>). Apart from the statistics, one thing we can presume is that the web scenario is changing so fast that we have to embrace the certainty of devices getting better and smarter.<\/p>\n<p>In this article, we will explore the main changes in Bootstrap 3. If you are already familiar with Bootstrap 2, check the migration guide (<a title=\"Mobile First bootstrap\" href=\"http:\/\/getbootstrap.com\/getting-started\/#migration\" target=\"_blank\">http:\/\/getbootstrap.com\/getting-started\/#migration<\/a>) to have a practical overview about what has changed. If you&#8217;re not familiar with Bootstrap, there&#8217;s nothing that&#8217;s too difficult for you to understand directly from this article about this new version. The only thing you need to have in mind is the Mobile First approach, which is covered well in this article.<\/p>\n<p>You will be guided to design with Mobile First, discover why Mobile First is so important, and how to make Bootstrap a powerful frontend platform to make your site friendly for a wider range of devices.<\/p>\n<p>We can take a step further and add to your previous Bootstrap knowledge by thinking of a concrete way to design processes as a continuous layer of capabilities and embrace the constraints and not fight with them. Mobile First with Bootstrap is an elegant solution for front-end development. Combined with server-side techniques, we get a full bag of solutions to get your product better suited to different users and needs in different platforms.<\/p>\n<h2>Bootstrap reviewed<\/h2>\n<p>In the third era of Bootstrap that is coming, the developers have redesigned the whole framework with a different approach. Let&#8217;s get started building interface components of small and simple screens, instead of adapting the existent UI components to fit in a constrained environment. From mobile, we will then go to desktop. However, we will not adapt the experience as we usually do with responsive design going from desktop to mobile. Now with Mobile First we will enhance accordingly as we increase the device screens.<\/p>\n<p>Why should I do this if my target audience will be using desktops? Going to mobile indirectly benefits desktop users. But how? To better understand this, let&#8217;s recap Bootstrap history for a while.<\/p>\n<p>In 2011, Bootstrap was launched to serve as a live and agnostic style guide that was used by Twitter to create their products. It became an open source framework at that time. It was a time when we worked in pixel-perfect layouts and explored CSS3 animations, and we found in Bootstrap a well-documented and standardized set of features.<\/p>\n<p>Bootstrap creates a new design for the browsers because you don&#8217;t need to define basic interface elements from scratch, such as buttons. At the same time, you have utility elements like badges to cover the most common interface elements. Bootstrap does what a framework is supposed to do: Bootstrapping! The term means the act of taking off a new project; it&#8217;s like saying, &#8220;give me the tools that I will need to start developing my application for different needs&#8221;. Bootstrap is a toolkit belt with standard conventions from well-defined classes with clean and practical documentation to live code that is ready to use and be customized for your needs. It&#8217;s not a magic solution to solve the interface element reuse issue, but it&#8217;s a kick-start. It fits in so many scenarios that developers are increasing its use with their own tools.<\/p>\n<blockquote><p>&#8220;CSS moved beyond type, forms and grids. People get tired to create the same stuffs&#8221;<br \/>\n\u2014 Mark Otto, one of Bootstrap&#8217;s creators, in the Desktop First to Mobile First Bootstrap presentation (<a title=\"Mobile First bootstrap\" href=\"https:\/\/speakerdeck.com\/mdo\/desktop-firstto-%20with-bootstrap\" target=\"_blank\">https:\/\/speakerdeck.com\/mdo\/desktop-firstto- with-bootstrap<\/a>)<\/p><\/blockquote>\n<p>A must-have from this breeding ground of possibilities is the Bootstrap extension font-awesome (<a title=\"Mobile First bootstrap\" href=\"http:\/\/fortawesome.github.io\/Font-Awesome\/\" target=\"_blank\">http:\/\/fortawesome.github.io\/Font-Awesome\/<\/a>). It uses font-face, which is widely supported and flexible, instead of sprites for icons. With a single CSS file and font resources used to render the custom fonts, you have a tool that can handle all your icons. This shows the flexibility of Bootstrap tools; for example, font-awesome is independent, works as a standalone project, and is a great fit with Bootstrap.<\/p>\n<p>There are a lot of ways to use Bootstrap. You can customize and extend components, from editing the source code in LESS variables or customize via the Bootstrap download page (<a title=\"Mobile First bootstrap\" href=\"http:\/\/getbootstrap.com\/customize\/\" target=\"_blank\">http:\/\/getbootstrap.com\/customize\/<\/a>).<\/p>\n<p>At the time of this writing, Bootstrap is the most popular project on Github, so it&#8217;s just one more reason to consider its importance. There&#8217;s now an official Bootstrap Expo (<a title=\"Mobile First bootstrap\" href=\"http:\/\/getbootstrap.com\/customize\/\" target=\"_blank\">http:\/\/expo.getbootstrap.com\/<\/a>). This is one of the changes in this new version. Bootstrap Expo is the official directory for websites and web applications that are being developed using this framework.<\/p>\n<p>A lot of developers get their first touch with the capabilities of HTML5 and CSS3 with this framework. Bootstrap has amazing capabilities such as offering a responsive grid, dozens of JavaScript components, and a customizer in a web interface or through the LESS variables, if you&#8217;re an experienced developer. It&#8217;s suitable for any level of developer and designers because it has solutions that suit both scenarios. This is the second of Bootstrap&#8217;s main philosophies\u2014it&#8217;s made for everyone.<\/p>\n<h1>Desktop to responsive<\/h1>\n<p>With the rise of smart phones, there is a need for responsive content to cover the growing demand. It&#8217;s possible to add an optional file with media queries and a bunch of CSS code and be adapted to mobile needs.<\/p>\n<p>Media queries, a CSS3 module introduced in June 2012, is a basic structure that gives a namespace with a bunch of CSS rules and declarations according to the user resolution, density, and screen capabilities. So, with CSS files, it is possible to manage the ongoing rise of smartphones. It was possible with just one stylesheet file with good support to adapt according with the device and make a website mobile friendly.<\/p>\n<p>In Bootstrap Version 2, we used to have an optional file (<em>responsive.less<\/em>) that used to have all the media queries necessary for Bootstrap to work well with mobiles.<\/p>\n<p>Another good news is that we can adapt to tablets as a bonus. We have breakpoints for the most common mobile resolutions\u2014this means we have a range of width (768 px to 979 px) that can represent tablet devices. A breakpoint is the extreme point (minimum and\/or maximum) where you can define CSS rules specific to that range and change your layout. This could be achieved with a simple declaration of media queries in your CSS:<\/p>\n<p><code>@media (min-width: 768px) and (max-width: 979px) { ... }<\/code><\/p>\n<p>But sometimes it&#8217;s indispensable to rethink some elements\u2014some of those already developed only for desktops\u2014in a pixel-perfect scenario. There&#8217;s no flexibility in a pixel-width accommodation. No matter how much the screen is different, the website will behave like you were using a desktop when we work with fixed units. This is when we can use a bunch of media queries to get more flexible. Even with this solution, redefining dimensions and CSS rules according to the device using media queries will solve screen flexibility issues but not solve performance issues on mobiles.<\/p>\n<p>Performance is one of the main concerns when we go mobile. We have to consider scenarios where the Internet connection is slow and it is a recurrent issue. You will have to perform reverse engineering to make your JavaScript optimize loading, and combine it with server-side solutions. A worse solution would be to just hide content after considering what could be painful for your page load; for example, images have a deep impact on the final performance. Lower page response time is equivalent to more money spent, as we can see in this article about page loading versus user patience (<a title=\"Mobile First bootstrap\" href=\"http:\/\/blog.kissmetrics.com\/loading-time\/\" target=\"_blank\">http:\/\/blog.kissmetrics.com\/loading-time\/<\/a>). One of the curious things this research points to is that mobile Internet users expect their browsing experience in phones to be comparable to what they get on their desktops.<\/p>\n<p>We are living at a time when the Web is filled with rich content and we have faster Internet connections. We have to be prepared to offer the closest thing to a fast and optimized loading, at least for our most important content.<\/p>\n<p>This does not involve just the use of CSS to hide content and show content depending on the device, as we can do using media queries. It&#8217;s all about keeping the concepts simple and focused and developing each interface component thoughtfully from scratch\u2014the primary use, with the constraints and its enhanced capabilities. It&#8217;s not just about adapting, it&#8217;s exploring the device&#8217;s capabilities and delivering the best user experience across platforms.<\/p>\n<p>Sounds familiar? Yes, for sure, the same concept as progressive enhancement, you might think. You&#8217;re not wrong. Progressive enhancement was a term widely used at a time when we talked about HTML page dependency on JavaScript to be functional. Progressive enhancement is a strategy for web design that relies on semantic markup and technologies such as JavaScript. Nowadays, progressive enhancement is a longer term for Mobile First because it&#8217;s not just about JavaScript disabled, as it was vastly talked before. A hundred of articles tried to show its benefits in a no JavaScript environment scenarios. Now progressive enhancement is about to be faster (<a title=\"Mobile First bootstrap\" href=\"http:\/\/coding.smashingmagazine.com\/2013\/09\/03\/progressive-enhancement-is-faster\/\" target=\"_blank\">http:\/\/coding.smashingmagazine.com\/2013\/09\/03\/progressive-enhancement-is-faster\/<\/a>).<\/p>\n<p>Progressive enhancement is one of the three keys of Mobile First, together with responsive design and giving priority to content over navigation. So, these three rationales are at the background of all the details of Bootstrap 3, from your CSS components to your grid structure.<\/p>\n<p>I hope you enjoy the book and it could be helpful, because I tried for you get the message and it has a complementary collection of tip and guidelines to use the framework the right way with the book followed by the <a title=\"Getting started with Bootstrap\" href=\"http:\/\/getbootstrap.com\/getting-started\/\" target=\"_blank\">official Bootstrap documentation<\/a>.<\/p>\n<p>Buy the book at <a title=\"Buy Mobile First Boostrap Book\" href=\"http:\/\/www.packtpub.com\/article\/bootstrap-3-0-is-mobile-first\" target=\"_blank\">Packt website<\/a> or <a title=\"Mobile First Bootstrap Book at Amazon\" href=\"http:\/\/www.amazon.com\/Mobile-First-Bootstrap-Alexandre-Magno\/dp\/1783285796\/ref=sr_1_1?ie=UTF8&amp;qid=1395272599&amp;sr=8-1&amp;keywords=mobile+first+bootstrap\" target=\"_blank\">Amazon<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I would like to happily announce the release of the Mobile First Bootstrap Book. This books aims to introduce the new Bootstrap version 3, developed using Mobile First. Mobile First\u00a0is a development workflow that focus on mobile as first device. It&#8217;s a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":926,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[138,72,77,71],"tags":[139,42,140,88,74,142,141],"class_list":["post-925","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap-en","category-htmlcss-en","category-html5-css","category-ux-en","tag-book","tag-bootstrap","tag-code","tag-css3","tag-html5","tag-packt","tag-publishing"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mobile First Bootstrap book released at time - Webpoint<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mobile First Bootstrap book released at time - Webpoint\" \/>\n<meta property=\"og:description\" content=\"I would like to happily announce the release of the Mobile First Bootstrap Book. This books aims to introduce the new Bootstrap version 3, developed using Mobile First. Mobile First\u00a0is a development workflow that focus on mobile as first device. It&#8217;s a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/\" \/>\n<meta property=\"og:site_name\" content=\"Webpoint\" \/>\n<meta property=\"article:published_time\" content=\"2014-03-19T23:56:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-03-20T22:54:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2014\/01\/gabriel_buy_my_book.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"640\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"alexanmtz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"alexanmtz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/\"},\"author\":{\"name\":\"alexanmtz\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af\"},\"headline\":\"Mobile First Bootstrap book released at time\",\"datePublished\":\"2014-03-19T23:56:19+00:00\",\"dateModified\":\"2014-03-20T22:54:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/\"},\"wordCount\":1991,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/alexandremagno.net\/#organization\"},\"keywords\":[\"Book\",\"bootstrap\",\"code\",\"css3\",\"html5\",\"packt\",\"publishing\"],\"articleSection\":[\"Bootstrap @en\",\"HTML\/CSS\",\"HTML5\",\"UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/\",\"url\":\"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/\",\"name\":\"Mobile First Bootstrap book released at time - Webpoint\",\"isPartOf\":{\"@id\":\"https:\/\/alexandremagno.net\/#website\"},\"datePublished\":\"2014-03-19T23:56:19+00:00\",\"dateModified\":\"2014-03-20T22:54:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/alexandremagno.net\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mobile First Bootstrap book released at time\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/alexandremagno.net\/#website\",\"url\":\"https:\/\/alexandremagno.net\/\",\"name\":\"Webpoint\",\"description\":\"Weblosofia com desenvolvimento web\",\"publisher\":{\"@id\":\"https:\/\/alexandremagno.net\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/alexandremagno.net\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/alexandremagno.net\/#organization\",\"name\":\"Webpoint\",\"url\":\"https:\/\/alexandremagno.net\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png\",\"contentUrl\":\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png\",\"width\":35,\"height\":31,\"caption\":\"Webpoint\"},\"image\":{\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af\",\"name\":\"alexanmtz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g\",\"caption\":\"alexanmtz\"},\"sameAs\":[\"https:\/\/alexandremagno.net\"],\"url\":\"https:\/\/alexandremagno.net\/en\/author\/alexanmtz\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mobile First Bootstrap book released at time - Webpoint","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/","og_locale":"en_US","og_type":"article","og_title":"Mobile First Bootstrap book released at time - Webpoint","og_description":"I would like to happily announce the release of the Mobile First Bootstrap Book. This books aims to introduce the new Bootstrap version 3, developed using Mobile First. Mobile First\u00a0is a development workflow that focus on mobile as first device. It&#8217;s a [&hellip;]","og_url":"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/","og_site_name":"Webpoint","article_published_time":"2014-03-19T23:56:19+00:00","article_modified_time":"2014-03-20T22:54:40+00:00","og_image":[{"width":640,"height":640,"url":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2014\/01\/gabriel_buy_my_book.jpg","type":"image\/jpeg"}],"author":"alexanmtz","twitter_card":"summary_large_image","twitter_misc":{"Written by":"alexanmtz","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/#article","isPartOf":{"@id":"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/"},"author":{"name":"alexanmtz","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af"},"headline":"Mobile First Bootstrap book released at time","datePublished":"2014-03-19T23:56:19+00:00","dateModified":"2014-03-20T22:54:40+00:00","mainEntityOfPage":{"@id":"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/"},"wordCount":1991,"commentCount":0,"publisher":{"@id":"https:\/\/alexandremagno.net\/#organization"},"keywords":["Book","bootstrap","code","css3","html5","packt","publishing"],"articleSection":["Bootstrap @en","HTML\/CSS","HTML5","UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/","url":"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/","name":"Mobile First Bootstrap book released at time - Webpoint","isPartOf":{"@id":"https:\/\/alexandremagno.net\/#website"},"datePublished":"2014-03-19T23:56:19+00:00","dateModified":"2014-03-20T22:54:40+00:00","breadcrumb":{"@id":"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/alexandremagno.net\/en\/2014\/03\/19\/mobile-first-bootstrap-book-released\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/alexandremagno.net\/en\/"},{"@type":"ListItem","position":2,"name":"Mobile First Bootstrap book released at time"}]},{"@type":"WebSite","@id":"https:\/\/alexandremagno.net\/#website","url":"https:\/\/alexandremagno.net\/","name":"Webpoint","description":"Weblosofia com desenvolvimento web","publisher":{"@id":"https:\/\/alexandremagno.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/alexandremagno.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/alexandremagno.net\/#organization","name":"Webpoint","url":"https:\/\/alexandremagno.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/","url":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png","contentUrl":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png","width":35,"height":31,"caption":"Webpoint"},"image":{"@id":"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af","name":"alexanmtz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g","caption":"alexanmtz"},"sameAs":["https:\/\/alexandremagno.net"],"url":"https:\/\/alexandremagno.net\/en\/author\/alexanmtz\/"}]}},"_links":{"self":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/comments?post=925"}],"version-history":[{"count":10,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/925\/revisions"}],"predecessor-version":[{"id":936,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/925\/revisions\/936"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/media\/926"}],"wp:attachment":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/media?parent=925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/categories?post=925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/tags?post=925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}