5.4 Responsive Frameworks: Bootstrap & Foundation Flashcards
What are frameworks?
Powerful frontend packages that include files, pre-written code, and templates that can be used to quickly start developing a fully responsive website.
Standardized solutions that can be used to solve problems of a similar nature.
In our world, frameworks are packages of files and standardized code that can be used as a foundation to develop websites.
Think of these packages as adaptable and adjustable to fit multiple projects
What kind of graphics does Photoshop use? and why is it bad to use it for creating UIs?
It uses raster graphics, which are pixel-based and therefore susceptible to losing quality when scaled.
What is a Grid?
Organizational systems designers use to distribute elements in a composition. They are made up of columns, gutter (the sapce between the columns), margins (the space on the outside of the grid, to the left, right, top, and bottom of the columns), and sometimes rows.
What is responsive design?
A responsive app or site responds to its user’s environment, including screen size, orientation, and platform. It ensures users have a consistent experience with your product regardless of the device they are using to view or use it.
How do you identify breakpoints?
Breakpoints are identified as the points at which a design starts looking bad, and needs to respond accordingly.
When working on a responsive app, designers will often create a _____, _____, and _____ breakpoint as a starting point.
mobile, tablet, and desktop
What are fluid grids?
Grids that change as the width of a design changes, in the same way that you’re used to seeing responsive sites change as the width of the viewport changes.
What are Gutters?
Gutters are the spaces between the columns on your grid. Gutter width is customizable, and wider gutters can be used to create more space in a design.
This is because you shouldn’t put content on the grid in such a way that the borders of the content end in the gutter. The edge of any screen content should always be on the edge of a grid column.
What is Bootstrap?
It’s a frontend framework to create responsive, mobile-first projects on the web.
It’s an open-source framework that’s free for anyone to use.
If your developer has decided on Bootstrap, as a UI designer you will be working with a 12-column grid.
What is Foundation?
UI designers working on projects using Foundation will see similarities to the Bootstrap grid (they both use 12 columns by default) but some of the default breakpoint sizes are different. Also, Foundation uses what they call “responsive gutters,” meaning that designers can specify both the column and gutter size for individual breakpoints to allow for more design options.
What should you do before deciding on a framework?
It is important to do a little research and understand your environment and constraints.
Having these conversations with your team is an important step in the project, and frameworks help facilitate that decision-making. This will ultimately make you a better designer and will help the project run more smoothly.
What should you consider when setting up a layout grid for your mobile design?
The amount and type of content
What is a grid in UI design?
A system to organize a page
How does a fluid grid adapt to larger breakpoints?
Column and gutter width increases
