Clearly, crafting sites for optimal viewing and interaction experience is must. In salesforce (not lightning) I see there is big need for responsive pages. Quite often people use material design and bootstrap to achieve powerful UX/UI, but I do come across scenarios where people still want Salesforce layout on top of page and still want content to be quite responsive.
What is the problem in keeping header and sidebar active?
Leaving header and sidebar is old fashioned, yet you still need to meet many business case. Adding design framework makes it fairly easy to add responsiveness but other stylesheet override classes and you mess up side bar and header fairly easily.
Responsive Style Sheet
Lets write our own css to add responsiveness and then design the style for our custom grid-pattern
In here, I added a wrapper class with row and defined coloumn of 10px to segregate the columns in the grid layout. Also I imported, material Roboto Font for my grid-content.
Media Support
Now you notice here that
@media all and ( min-width: 300px)
This is the minimum width are placing for our media device width size, in other words if you device width is lower, you may break responsive behavior.
Defining Grid
Grid is how you want to partition the page, very similar to material design and bootstrap and I simply breaking down page into 12 grid layout and defining styles to each grid layout
Resulting responsiveness (shown in codepen)
Now lets combine and style in a page see how it reflects in codepen, just shrink this codepen or blog page to see content in action
Responsive Visualforce Template
Lets finish it up and responsiveness to Visualforce Page.
Caveat with Sidebar/Header
Remember Salesforce standard-layout had @media responsive block size of width-600px. Once you squeeze your screen below 600px with sidebar/header on, you content will be in potential risk to break responsiveness.
 I see there is big need for re...){kind=link}
0 comments:
Post a Comment