Join Joseph Lowery for an in-depth discussion in this video Structuring fluid grids, part of Dreamweaver CC: Responsive Design.
- A fluid grid, by definition, is flexible…and responsive to the width of the screen…as much as possible.…I'll explain that little disclaimer as much as possible…a bit later in the course.…But first, let's look at the science behind fluid grids…and where it all began.…I have to give credit where credit is due…and once again, it goes to Ethan Marcotte,…who really codified the idea of fluid grids…with his article that appeared in A List Apart.…Fluid grids actually have their genesis…in another basic proportional element, the em.…
The em, as I'm sure you know,…is used to express font size…in relation to the browsers standard.…Now the standard size of basic text in most browsers…is 16 pixels,…so this value becomes the standard or context…that all rendered text sizes in ems is calculated against.…The formula used for this calculation is…target divided by context equals result.…So, for example, if you want to incorporate…an H one tag that is 24 pixels,…you can use this formula to figure the em value.…
24 divided by 16 equals one point five.…
- Structuring fluid grids
- Adding a new fluid grid layout
- Adding building-block div tags
- Inserting content into a fluid grid
- Modifying the number of grid columns
- Building media queries from scratch
- Working with additional media queries
- Handling orientation changes
- Manipulating CSS
- Adding new media
Skill Level Appropriate for all
1. Understanding Responsive Web Design
2. Fluid Grid Layouts in Dreamweaver
3. Expanding on a Fluid Grid Structure
4. Enhanced Media Queries
5. Flexible Images and Media
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.