Adapt, respond and overcome – Ethan Marcotte
When Chris and I first set out to build PressWork we discussed how we wanted to develop a unique framework that stood apart from the masses. We wanted to do something no one had done before with a WordPress framework. Every time we sat down to talk about PressWork words like “modern, future proof, revolutionary, community” and “HTML5, front-end, mobile, responsive” kept cropping up.
The PressWork philosophy is simple “Build for the future” and part of that future is not only web standards, it’s mobile, too! A good design or theme should adapt and respond beautifully to any device, not just a browser. As PressWork continues to evolve, Chris and I want ensure that every release sets a new standard for theme frameworks. This is why, one of many new features in version 1.0 will integrate responsive web design.
We’ve currently implemented some basic media queries in v1.0. This is just the beginning. We have plans to further enhance these capabilities in PressWork and all of our premium themes in future point releases.
Let’s take a quick look at these media queries
[porto_content_box border_top_width=”1px” align=”left”]@media only screen and (max-device-width: 768px), only screen and (max-width: 768px) {
#body-wrapper {width:720px !important; padding: 0 10px; }
#maincontent { width: 454.516129032px !important; }
#firstsidebar { width: 232.258064516px !important; }
#secondsidebar { width: 124.35483871px !important; }
}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
#body-wrapper { width: 420px !important; padding: 0 10px; }
#maincontent { width: 420px !important; }
.home article { width: 100%; }
#firstsidebar, #secondsidebar { float: none; width: 100% !important; }
#main-wrapper > li { margin: 0 !important; }
}
Our biggest challenge with implementing media queries is to ensure they balance well with our already powerful “Layout” panel in the PressWork ToolBox. We want to make sure that you can still create a unique look and feel while taking advantage of an adaptive design. For version 1.0 we are confident that what we have implemented is a good start and will meet your requirements.
We always appreciate feedback, don’t be shy, let us know what you think?