Responsive Web Design & APEX Theme 25
Download as PPTX, PDF3 likes5,823 views
The document discusses responsive web design techniques for building responsive applications in APEX, including: - Using CSS media queries like @media to adapt layouts based on screen size and orientation. - Implementing grid systems with CSS frameworks like Theme 25 to create responsive page templates. - Leveraging APEX features like region attributes and client-side detection to conditionally render content. - Additional techniques like responsive tabs, conditional hiding of content, and reflowing data tables.
![Show/Hide Column: Custom CSS
@media (orientation:portrait) and (max-width: 640px) {
[headers="CUST_STREET_ADDRESS1"], #CUST_STREET_ADDRESS1 {
display: none;
}
}
TH: table headerTD: table data/cell](https://image.slidesharecdn.com/rwdapextheme25-130701054159-phpapp01/85/Responsive-Web-Design-APEX-Theme-25-39-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (6)
Ad
Similar to Responsive Web Design & APEX Theme 25 (20)
Ad
More from Christian Rokitta (11)
Recently uploaded (20)
Responsive Web Design & APEX Theme 25
- 1. Building a Responsive Application using Theme 25 Christian Rokitta themes4apex
- 2. KScope13 RWD Track Intro to Responsive Design in APEX Martin D’Souza Monday 11:30 Building a Responsive Application using Theme 25 Christian Rokitta Wednesday 8:30 Building a Responsive Application using Twitter Bootstrap Mark Lancaster Wednesday 11:15 Advanced Responsive Design in APEX Dimitri Gielis Thursday 9:45
- 3. Agenda •Responsive Web Design •APEX/Theme 25 •Beyond
- 4. Responsive Web Design Responsive web design (RWD) covers various techniques, both client and server side, that aim to make a website respond to the device it is viewed on. It means, writing one codebase that will adapt your website on every screen size, device and device orientation, in order to provide the best possible experience to the user.
- 5. Key Techniques of RWD • CSS @Media queries • Grid Layouts • Device/browser detection to enhance performance of your site and reduce bloat
- 6. @media Queries aren’t limited to the device width condition: there are many different properties you can test against using @media queries, including the device orientation, height, aspect ratio and resolution @media screen and (max-device-width: 640px) and (orientation:portrait) { /* Rules inside the @media condition only apply if the condition is met */ #mydiv { display: inline-block; } } @media all and (orientation:portrait) { … } @media all and (orientation:landscape) { … }
- 7. @media Query Usage - Inline Put media queries directly in the style sheet. This is the most common approach. @media screen and (max-device-width: 640px) and (orientation:portrait) { /* Rules inside the @media condition only apply if the condition is met */ #mydiv { display: inline-block; } }
- 8. @media Query Usage – Import/Link Use the @import rule to import style rules from other style sheets. @import url(style600min.css) screen and (min-width: 600px); Include a query in a linked style sheet’s media attribute. <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="style800.css" />
- 9. @media query alternative Use JavaScript to detect the viewport size and then set a className to the body element
- 10. @media query & CSS Units • Absolute • Pixels (px) • Point (pt) = 1/72 of an inch • Relative units • are based on the initial value • em unit is relative to the initial value of ‘font-size’ • Percentages (%) • Resolution • dpi/dpcm: dots per ‘inch’/‘centimeter’
- 11. Adapt Layout with @media query
- 12. Three Column Desktop Layout
- 13. Example HTML <div class="col1"> <p>…</p> </div> <div class="col2"> <p>…</p> </div> <div class="col3"> <p>…</p> </div>
- 14. Example CSS - desktop @media (min-device-width: 641px) { /* target devices with desktop sized resolution */ .col1, .col2, .col3 { /* Float the columns to create a three-column layout */ padding: 2em; width: 30%; margin-right: 1em; float: left; } }
- 15. Example CSS - smartphone @media (max-device-width: 640px) { /* target devices with smal sized resolution */ .col1, .col2, .col3 { position: relative; padding: 2em; width: 90%; float: none; display: block; margin-right: 0; } }
- 16. Single Column Smartphone Layout
- 17. Floating
- 18. Grid – What is it? • Fixed Grid • Not necessarily responsive • Used to layout elements in a regular rhythm • Fluid/Flexible Grid • CSS3 Grid Layout
- 20. Responsive Grid
- 22. Fixed Website Layouts A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths no matter what screen resolution.
- 23. Fluid Website Layouts In a fluid website layout the majority of the components inside have percentage widths, and thus adjust to the user’s screen resolution.
- 24. Theme 25: Multiple Fixed Grids @media screen and min-width 320px and max-width 479px @media only screen and min-width 480px and max-width 767px @media only screen and max-width 767px @media only screen and min-width 768px and max-width 959px @media only screen and min-width 960px and max-width 1024px @media screen and min-width 1260px and max-width 1419px @media screen and min-width 1420px and max-width 1659px @media screen and min-width 1660px and max-width 1899px @media screen and min-width 1900px @media screen and min-width 2540px
- 25. APEX Responsive Features • Declarative way to lay out regions and items on a page without manual css overrides (region attributes) • Allows implementation of other grid frameworks such as twitterbootstrap, 960 gs, etc. (template)
- 26. Theme 25
- 27. Region Grid Layout Attributes
- 28. Theme 25 Grid
- 29. Page Template Grid Attributes
- 30. CSS Utility Classes Hide/show content depending on @media query
- 32. Page Template Grid Definition #USED_COLUMNS_NUMBER# #USED_COLUMNS_ALPHA# #USED_COLUMNS_ALPHA_MINUS# #USED_COLUMNS_WORD# #USED_COLUMNS_PLURAL# #ROWS# #COLUMNS# #COLUMN_NUMBER# #COLUMN_ALPHA# #COLUMN_WORD# #COLUMN_PLURAL# #COLUMN_SPAN_NUMBER# #COLUMN_SPAN_ALPHA# #COLUMN_SPAN_WORD# #COLUMN_SPAN_PLURAL# #ATTRIBUTES# #FIRST_LAST_COLUMN_ATTRIBUTES# #CONTENT#
- 33. RWD Considerations • Developing a responsive application can be time consuming and may require a deep understanding of grid layout, HTML and CSS. • Page size remains the same. You are loading the full HTML, CSS, and JS resources, even on mobile devices with limited broadband. • Responsive Web Design is just the tip of the iceberg.
- 34. Theme 25 != Theme 42
- 35. Beyond Theme 25 • Navigation • Data Tables • Leverage APEX condition feature with client property detection to optimize layout generation.
- 36. The Grid, the Tab and the Ugly
- 37. Responsive Tabs in Theme 42
- 39. Show/Hide Column: Custom CSS @media (orientation:portrait) and (max-width: 640px) { [headers="CUST_STREET_ADDRESS1"], #CUST_STREET_ADDRESS1 { display: none; } } TH: table headerTD: table data/cell
- 40. Categorizr http://rokitta.blogspot.nl/2013/05/how-are-you-categorizr-for-apex-part-2.html Client device property detection categorizr.isdesktop categorizr.istablet categorizr.ismobile categorizr.isportrait categorizr.islandscape
- 41. Responsive Data Table Idea(l) Table Reflow, kind of like in APEX 5.0, but then for responsive …
- 42. Demo
- 43. Questions, Answers & Discussion http://rokitta.blogspot.com @crokitta [email protected] http://www.themes4apex.com http://plus.google.com/u/0/102034735771815472470 http://nl.linkedin.com/in/rokit/