Introduce Bootstrap 3 to Develop Responsive Design Application
•
93 likes•49,094 views
www.exoplatform.com - The second session of "eXoers on the grill" presentation in Vietnam. After a very good start last month about the Git Rebase Functionality presented by Trong from the Portal team the subject of this session was the Responsive Design. This presentation was prepared and presented by all members of UI Team: Giang, Hoa, Trung and Thibault. eXoers on the Grill aims to provide some incentive & fresh air for our staff in order to constantly re-think our methods, spread good practices, promote some technology or tools, generate ideas, etc... All the teams are invited to contribute by picking up some hot topics of their choice and spread to other teams.
Report
Share
Related slideshows
Introduce Bootstrap 3 to Develop Responsive Design Application
- 1. Introduce Bootstrap 3 to develop RESPONSIVE design application Copyright 2014 eXo Platform
- 2. Copyright 2014 eXo Platform A presentation by eXo UI Team
- 3. When UI was not a concern Copyright 2014 eXo Platform
- 4. Many UI innovation since Copyright 2014 eXo Platform
- 5. And some company success to create wonderful design for web application Copyright 2014 eXo Platform
- 6. A unique Wonderful desktop screen is not enough Copyright 2014 eXo Platform TODAY
- 7. Be ready for future screen Copyright 2014 eXo Platform
- 8. Build specific site for each devices Copyright 2014 eXo Platform Part of the UI team in eXo today Part of the UI team in eXo if we decide to build specific site for each device Build a specific site for desktop, mobile, tablet… was definitively not the good solution The first (wrong) idea
- 9. The Dark Lord Sauron Ethan Marcotte forged in secret 2010 a Master Ring Design to control all others. One Ring Design to rule them all: THE RESPONSIVE DESIGN Copyright 2014 eXo Platform The good idea
- 10. Time for specialist 1. Responsive Design 2. Bootstrap 3 3. Responsive Web Application 4. Demo 5. Responsive eXo Platform Enjoy... Keep question on your book note, we will answer at the end Copyright 2014 eXo Platform
- 11. What is exactly a RESPONSIVE DESIGN Web application ? Copyright 2014 eXo Platform
- 12. What is Responsive Design ? A unique site that can adapt to any screen size, today or in the future. Copyright 2014 eXo Platform
- 13. Responsive vs Adaptive Copyright 2014 eXo Platform Continuously resizes when change the width of your screen, no extra empty space on the sides Responsive
- 14. Relative units vs Static units Copyright 2014 eXo Platform Use relative units, like percent can adapt to any screen, instead of static units like pixels. Relative units Static units
- 15. Flow vs Static Copyright 2014 eXo Platform The data content flowing smoothly when screen size change. It’s what we name flow in Responsive Design. Flow Static
- 16. With Breakpoints vs Without Breakpoints Copyright 2014 eXo Platform Predict breakpoints when screen size change allow to adapt your content to the screen size With Breakpoints Without Breakpoints
- 17. Vectors vs Images Copyright 2014 eXo Platform A vector image adapts with Retina resolutions. Quality is the same whatever is the resolution of your screen Vector Image
- 18. Mobile First ● Start by developing the CSS for the mobile device first, then have media queries for adapt to tablets, desktops ● Determine what is most important content Copyright 2014 eXo Platform
- 19. Why’s Mobile First ? ● Mobile website will prepare more thoroughly than was originally invested. ● At any size, it's always a good design ● Avoid overwrite code Copyright 2014 eXo Platform
- 20. A free responsive framework BOOTSTRAP 3 originally by Twitter Copyright 2014 eXo Platform
- 21. The Bootstrap history Copyright 2014 eXo Platform Mid 2010 August 2011 February 2012 January 2012 August 2013 Bootstrap was created at Twitter Twitter released Bootstrap as open source project Become the most starred GitHub development project Introduce the first major release, Bootstrap 2 Shipping Bootstrap 3.0
- 22. Main features of Bootstrap Preprocessors One framework, every devices Copyright 2014 eXo Platform Full of features
- 23. New Flat design Mobile first Approach What’s new in Bootstrap 3 Grid system New components New powerful SASS support New Glyphicons icon font Copyright 2014 eXo Platform javascript are rewritten
- 24. Advantage ● Create a web application very fast ● It’s natively responsive framework ● It’s fully and easily customisable Copyright 2014 eXo Platform
- 25. Disadvantage Hey! My new website looks just like everyone else’s! Copyright 2014 eXo Platform
- 26. Disadvantage No backward compatibility between versions Copyright 2014 eXo Platform
- 27. Competitors Copyright 2014 eXo Platform
- 28. Create a responsive WEB APPLICATION using Bootstrap 3 Copyright 2014 eXo Platform
- 29. Responsive with bootstrap 3 ● css3 media queries ● Grid system ● Responsive utilities ● Responsive embed and flexible image Copyright 2014 eXo Platform
- 30. What is @media ? @media rule allows website to have a different layout for screen, mobile phone, tablet, etc. Copyright 2014 eXo Platform
- 31. Grid System Copyright 2014 eXo Platform
- 32. Responsive Utilities Copyright 2014 eXo Platform
- 33. How to make EXO PLATFORM responsive with bootstrap 3? Copyright 2014 eXo Platform
- 34. Exo product responsive with bootstrap 3 ● Add the viewport <meta> tag to <head> tag ● Change the grid system ● Stop embedding Bootstrap classes in template Copyright 2014 eXo Platform
- 35. Exo product responsive with bootstrap 3 ● Make sure eXo UI Component is responsive ● Update javascript system Copyright 2014 eXo Platform
- 36. It’s time for THANK YOU see you soon ... Copyright 2014 eXo Platform
Editor's Notes
- I will introduce you Bootstrap 3, the best free framework to develop Responsive Design web application
- Let's talk a little bit about the history of Bootstrap, Bootstrap was created....
- Bootstrap is a very useful framework to develop UI of web application. It include preprocessor features for Less and Saas. It allows you to manage design for any device: Yes it's a responsive desgin framework! And it's full of nice features.
- Most of you alredy know Bootstrap 2 because we use it in PLF today. But the latest version of Boostrap is the version 3 and contains many new features compare to Boostrap 2 like: Flat design, ....
- Develop with Bootstrap have many advantages, for instance you can easily develop a website with a nice UI fastly with Bootstrap. Also...
- Of course like any other framework, Bootstrap have also some disadvantages. One of the big reproach you can heard about Boostrap is that is killing original design: All websites looks the same.
- Also and this is a concern for us in eXo to migrate to Bootstrap 3 is that they are no backward compatibility between version. So it's not trivial to change from Bootstrap 2 to Bootstrap 3
- Bootstrap is not the only Responsive Design framework today. If you are interested I invite you to check Skeleton and Foundation that are other frameworks
- You know what is responsive design and you know what is Bootstrap 3. Now it's time to learn how to develop responsive web applications using Bootstrap 3.
- I will present you quickly in coming slide these technical feature of Bootstrap that Giang will demonstrate to you just after.
- http://jsbin.com/xihuco/latest
- In this last section I would like to introduce what we have to do upgrade eXo to Bootstrap 3. I remember you that Bootstrap 3 has no backward compatibility with Bootstrap 2. But for your future development there are some rules to follow for facilitate the migration in future of eXo to Responsive Design and maybe Bootstrap 3