One of the most popular frontend libraries for the design of websites and web applications, is Bootstrap, which has been available since August 2011; it's about seven years old. It has included responsive design handling since version 2. Mobile First Design (so you should first get your design to work in smaller devices, and only afterwards worry about adding handling for larger screens) was included in version 3, and SASS support appeared in version 4. Apart from responsive design support, Bootstrap also offers other features, such as components, typography, and more utilities, so you should probably not miss checking the whole documentation at https://getbootstrap.com/docs/4.1/getting-started/introduction/.
To install Bootstrap, we just need the usual npm command:
npm install bootstrap --save
Bootstrap provides lots of features, including:
- Components, such as alerts, buttons, dropdowns, navigation bars, and much more; see https://getbootstrap.com/docs/4.1/components for a complete list
- Tables, a common third-party component, with many configuration possibilities; see https://getbootstrap.com/docs/4.1/content/tables for more
- Typography-related elements, dealing with the many fonts you'll use in your design; check out https://getbootstrap.com/docs/4.1/content/typography/S
- Styling details, such as borders, colors, shadows, sizing, and more; read https://getbootstrap.com/docs/4.1/utilities/
In any case, we won't be specifically dealing with the preceding list, since it's basically just a matter of styling, and we've already done that. We are going to focus, instead, on positioning elements, changing their sizes, and even hiding or showing them according to the current screen size; let's move on to that now.