Beginning Drupal 8

More documents

Recommendations

Info

Chapter 18 ■ Creating a Responsive Site queries that are required to enable adjusting CSS. The following is a recommended list of media queries that address most screen widths in the market today: /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } You’ll note that some of the media queries specify the orientation of the device being used, portrait or landscape. This is just another tool to help narrow which CSS will be applied to a given device. Depending on the theme you are using, the media queries will often be placed at the end of the style.css or layout.css files. If you are using a theme that already supports responsiveness through media queries, it’s a good idea to build on what’s already there. In the case of the Bartik theme, looking at the css directory, you’ll see three CSS files: layout.css, style.css, and colors.css. If you examine the layout.css file, you’ll see that the theme’s creator already has two media queries in the CSS file: @media all and (min-width: 560px) and (max-width: 850px) @media all and (min-width: 851px) Both media queries contain a number of CSS overrides to elements that appear on the various pages of a site built using that theme. The two media queries address most of the cases where elements on the page need to be adjusted to be usable on most devices, but there may be cases where you may want to address 198
Chapter 18 ■ Creating a Responsive Site specific elements for iPhone 4. In that case, adding the following media query and associated CSS entries would address the changes specific to devices with iPhone 4 or smaller screens: @media all and (max-width: 320px) Common elements that you may want to adjust are column widths, font sizes, and image sizes. Viewing the site using one of the browser responsive web design tools will help you to identify which elements need to change. Common CSS Changes to Address Responsiveness One of the first things to think about when designing a responsive website is the need to change from fixed pixel widths and point-based font sizes. For years we’ve been designing sites to be pixel perfect, but with responsive design we need to shift our thinking from exact pixels to percentages and ems. If you’re an experienced designer and CSS developer, this may be one of the hardest aspects of changing how you think about design and the CSS that enables that design. Once you’ve made the transition, the process will be relatively simple—but to begin with, we need to think about the size of elements on the page in perspective of the percentage of the display width that they are going to consume. If you stay with fixed pixel widths, the results will be that your visitors on small-screen devices will have to scroll horizontally to see the full width of your website. Check out whitehouse.gov on your smartphone as an example. It unfortunately isn’t responsive (as of early 2015) and requires that you use your finger to scroll to the right to see the full width of the site. One of the first things to examine are any elements on the page that, when viewed on a smaller screen, result in either your site shrinking down to fit within the window or requiring you to scroll right to view the full width of your page. Typical elements on a <strong>Drupal</strong> site that often require adjustment include regions, blocks, panel panes, and views. These elements are typically set to a fixed pixel width and, to become responsive, need to be set to percentage widths. To identify which CSS elements to change, using the Google Chrome Responsive Web Design Tester, simply right-click an element you wish to change and select the Inspect Element option (see Figure 18-5). 199
Page 2 and 3:
Beginning Drupal 8 Todd Tomlinson
Page 4 and 5:
There are so many people to thank f
Page 6 and 7:
■ Contents at a Glance ■Chapter
Page 8 and 9:
■ Contents Authoring Information
Page 10 and 11:
■ Contents ■Chapter ■ 8: Drup
Page 12 and 13:
■ Contents ■Chapter ■ 13: Mul
Page 14 and 15:
■ Contents Updating the Article C
Page 16 and 17:
■ Contents Moving the Drupal Dist
Page 18 and 19:
About the Technical Reviewer Clive
Page 20 and 21:
Introduction In its relatively shor
Page 22 and 23:
Chapter 1 ■ Introduction to Drupa
Page 24 and 25:
Page 26 and 27:
Page 28 and 29:
Chapter 2 Creating and Managing Con
Page 30 and 31:
Chapter 2 ■ Creating and Managing
Page 32 and 33:
Page 34 and 35:
Page 36 and 37:
Page 38 and 39:
Page 40 and 41:
Page 42 and 43:
Chapter 3 Creating and Managing Use
Page 44 and 45:
Page 46 and 47:
Page 48 and 49:
Page 50 and 51:
Page 52 and 53:
Page 54 and 55:
Chapter 4 ■ Taxonomy “individua
Page 56 and 57:
Chapter 4 ■ Taxonomy Figure 4-3.
Page 58 and 59:
Page 60 and 61:
Chapter 4 ■ Taxonomy Clicking the
Page 62 and 63:
Page 64 and 65:
Chapter 4 ■ Taxonomy If you happe
Page 66 and 67:
Chapter 5 ■ Content Types • Hav
Page 68 and 69:
Chapter 5 ■ Content Types The fir
Page 70 and 71:
Chapter 5 ■ Content Types content
Page 72 and 73:
Chapter 5 ■ Content Types The nex
Page 74 and 75:
Chapter 5 ■ Content Types Figure
Page 76 and 77:
Page 78 and 79:
Page 80 and 81:
Page 82 and 83:
Page 84 and 85:
Chapter 5 ■ Content Types On the
Page 86 and 87:
Page 88 and 89:
Chapter 5 ■ Content Types Formatt
Page 90 and 91:
Chapter 5 ■ Content Types If you
Page 92 and 93:
Chapter 6 ■ Using Drupal Themes S
Page 94 and 95:
Chapter 6 ■ Using Drupal Themes t
Page 96 and 97:
Chapter 6 ■ Using Drupal Themes F
Page 98 and 99:
Chapter 6 ■ Using Drupal Themes O
Page 100 and 101:
Chapter 6 ■ Using Drupal Themes F
Page 102 and 103:
Chapter 7 ■ Creating Menus Figure
Page 104 and 105:
Chapter 7 ■ Creating Menus Clicki
Page 106 and 107:
Chapter 7 ■ Creating Menus At thi
Page 108 and 109:
Chapter 7 ■ Creating Menus Click
Page 110 and 111:
Chapter 8 ■ Drupal Blocks Figure
Page 112 and 113:
Chapter 8 ■ Drupal Blocks appear
Page 114 and 115:
Chapter 8 ■ Drupal Blocks Using B
Page 116 and 117:
Chapter 8 ■ Drupal Blocks Figure
Page 118 and 119:
Chapter 9 ■ Views Figure 9-1. Ver
Page 120 and 121:
Chapter 9 ■ Views Figure 9-3. The
Page 122 and 123:
Chapter 9 ■ Views 4. The Show par
Page 124 and 125:
Chapter 9 ■ Views 14. If your vie
Page 126 and 127:
Chapter 9 ■ Views 6. In the Filte
Page 128 and 129:
Chapter 9 ■ Views Figure 9-7. Ren
Page 130 and 131:
Chapter 9 ■ Views Figure 9-9. Fil
Page 132 and 133:
Chapter 9 ■ Views Figure 9-11. Ta
Page 134 and 135:
Chapter 9 ■ Views Summary I’ve
Page 136 and 137:
Chapter 10 ■ Creating Pages Figur
Page 138 and 139:
Chapter 10 ■ Creating Pages We ca
Page 140 and 141:
Chapter 10 ■ Creating Pages The f
Page 142 and 143:
Chapter 10 ■ Creating Pages 6. Th
Page 144 and 145:
Chapter 11 Drupal Modules Drupal is
Page 146 and 147:
Chapter 11 ■ Drupal Modules on yo
Page 148 and 149:
Chapter 11 ■ Drupal Modules 2. On
Page 150 and 151:
Configuring Modules and Setting Per
Page 152 and 153:
Chapter 11 ■ Drupal Modules Figur
Page 154 and 155:
Chapter 11 ■ Drupal Modules Figur
Page 156 and 157:
Pathauto Chapter 11 ■ Drupal Modu
Page 158 and 159:
Chapter 12 Anatomy of a Module Alth
Page 160 and 161: Chapter 12 ■ Anatomy of a Module
Page 162 and 163: Chapter 12 ■ Anatomy of a Module
Page 164 and 165: Chapter 13 ■ Multilingual Capabil
Page 172 and 173: Chapter 14 Administering Your Drupa
Page 174 and 175: Chapter 14 ■ Administering Your D
Page 184 and 185: Chapter 15 Using Drush This chapter
Page 186 and 187: Drush Commands Chapter 15 ■ Using
Page 188 and 189: Chapter 15 ■ Using Drush Table 15
Page 190 and 191: Chapter 15 ■ Using Drush Table 15
Page 192 and 193: Chapter 16 ■ Using Git Installing
Page 194 and 195: Chapter 16 ■ Using Git Git recogn
Page 196 and 197: Chapter 16 ■ Using Git This will
Page 198 and 199: Chapter 17 Putting It All Together
Page 200 and 201: Chapter 17 ■ Putting It All Toget
Page 202 and 203: Chapter 17 ■ Putting It All Toget
Page 204 and 205: Summary Chapter 17 ■ Putting It A
Page 206 and 207: Chapter 18 ■ Creating a Responsiv
Page 214 and 215: Chapter 19 ■ Creating a Blog Site
Page 222 and 223: Chapter 20 ■ Building a Company S
Page 244 and 245: Chapter 21 ■ Building a Community
Page 254 and 255: Chapter 22 ■ Building a Commerce
Page 260 and 261:
Chapter 22 ■ Building a Commerce
Page 262 and 263:
Page 264 and 265:
Page 266 and 267:
Page 268 and 269:
Page 270 and 271:
Page 272 and 273:
Page 274 and 275:
Page 276 and 277:
Page 278 and 279:
Page 280 and 281:
Appendix A ■ Installing Drupal Se
Page 282 and 283:
Appendix A ■ Installing Drupal Ne
Page 284 and 285:
Appendix A ■ Installing Drupal Co
Page 286 and 287:
Appendix A ■ Installing Drupal Fi
Page 288 and 289:
Appendix B Additional Resources As
Page 290 and 291:
Video Tutorials Appendix B ■ Addi
Page 292 and 293:
■ index Blog site (cont.) theme,
Page 294 and 295:
■ index Drupal users groups (cont
Page 296 and 297:
■ index • S Security patches,
show all

Beginning Drupal 8

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?