This is based on your original layout mock up. There is no switching of sidebars, as I don’t understand when or why that should happen. But it should be fully responsive without needing any media queries.
The vertical proportioning of elements may seem a bit off, but that should take care of itself when actual content is added.
It’s a common mistake for people to design layouts like this without content and fix the proportions that way. In RWD the content should define vertical proportions of elements.
3 Likes
Actually, I am visualizing all these designs that will be later converted into the commercial Wordpress theme. Let me show you an example that why these sidebars will be swapped. let us take an example of a simple, yet very known WordPress theme →
Under the Layout section, you will see various combinations of sidebars and content area. This is how WordPress works most of the time while dealing with sidebars.
In real worlds the theme and websites should be very simple, but when you build a commercial theme then complicating things become necessary with the selling perspective. Buyers have fancy thoughts they read bullet points that this theme has this, that etc so switching sidebars are one of the common layout features that are seen across most of the Wordpress Theme. Am I able to convince why the sidebar switching is essential? I am asking this because I am not a native speaker so I am afraid If I m able to communicate the idea effectively?
Hi There, where did SamA74 said this.
One More addition:
Reason, why I am visulaizing to create such a flexible layout that can have varied scope and application, is this →
If you browse for 100’s of blogs what do they have in common?
Header
Footer
The content area with maximum 2 sidebars.
I have also added one more complexity so that the maximum that is possible in blogs should be created intelligently in one Layout. Midas Touch you Know. the Leonardo da Vinci style.
Got it, sir?
AFAIK, WordPress themes that offer alternate sidebar placement are commonly “widgetized”
https://codex.wordpress.org/Widgetizing_Themes
That is, the “switching” is not accomplished by CSS, but by PHP
As for developing, I think the best way would be to test a separate file for each where everything is the same, except for where the sidebars are.
1 Like
Hi there,
I know they are widgetized, but switching is accomplished by a combination of CSS and php. the Job of php COMMAND is to insert CSS arrangements in the form of those extra classes that are helping in the switched versions of the sidebars such as manipulating margins or padding correction, but in the first place, they need to have a CSS versions at the HTML/CSS level to handle such arrangements of switching. Here the discussion is about Layout widget is a next thing that is beyond the scope of this discussion. we are concerned here how to handle the sidebars switching, which is easy and can be handled by the order property and same can be handled in WordPress by giving control in the backend to the users, but the question si about handling not just those sidebars, but that grid kind of arrangement where a are is sitting above sidebar 1 + main section or sidebar 2 + main section.
1 Like
By Css grid layouts you mean this → http://gridbyexample.com/examples/
But I think this has far less support then the FlexBox →
Can someone please comment on these layouts →
- http://demo2.blogeto.com/benedicto/fundraiser/
- http://demo2.blogeto.com/benedicto/church/
- http://demo2.blogeto.com/benedicto/shop/
They are 3 demos of one Theme. Are they good Layouts/designs or they have a severe issue and doesn’t falls under a good design/layout(Design, Fonts etc). Please provide the critique. Most people critiqued negatively about them that design is not good and layout is bad. I want to understand what’s wrong from experienced designers and HTML developers that what went wrong?
From a purely technical point of view they are poor.
None are truly responsive with the “Event Widget Layout” spilling off the side, creating horizontal scrollers.
None pass html validation with multiple style tags within the body section. They also prevent viewport scaling which is bad practice.
It’s beyond me how you could have as many as nine external style sheets and eight on-page <style> elements for one page that does not even display correctly. 
2 Likes
Sir, please help me to understand this part. This was built by someone else. Also, what is the correct process of learning all these things?
When it comes to code, less is more. Have only as much css as you need, no more. It is actually quite common today, particularly with Wordpress and Bootstrap based sites to have a huge number of css files and multiple style tags. But just because so many are doing it, does not make it right. It leads to bloat and confusion.
Try to keep all your css in one file if possible. If you must have additional styling for the page in <style> tags, there is no need for more than one set of tags, and that should be in the <head> not in the <body>.
1 Like
Sir, I built my lifes first HTML with the help of you and other members here ay Sitepoint. As compared to the one that I posted what is your opinion for this one.
Those pass validation 
, they allow scaling , have fewer style sheets, only 14 requests .
But you are getting horizontal scrollers, caused by the menu and search box 
If you fix that issue, it won’t be bad. It’s already better than the other themes you linked to.
Cant, we make something like this →
Or this is Impossible. The float equivalent in Flexbox is Order.
1, 2, and 3 we set order: 1 and for “4” we set order: 2
I think then we can use flex: wrap property or something else to put 1 on the top and 2, and 3 in the bottom.
1, 2, 3 and 4 all have their percentage share of the total maximum width available. Is this possible or just my weird imagination. In that case, do not have to nest, and the variations will be easily possible just by changing the “order” property.
That is like the layout I posted in post #21, only the tall sidebar is on the other side. That can be switched with order.
But you won’t get those 4 elements as siblings to each other with flex, they need to be nested the way I nested them in that pen. The rules of flex have not changed since last week (at least not so I have heard), so asking the same question over and over and expecting a different answer may not be a fruitful exercise.
So here are your answers again:-
So the options are you can use flex, nested the way I showed you, you can learn grid instead, or come up with a more traditional method using css tables or floats.
These are pure CSS grids or they are accomplished through some Javascript library It is just like the Pinterest grids.
There is one another example too →
Grid is pure css.
Post #8.
<div class="content">
<div class="flex-main">
The Main content area.
</div>
<aside class="main-sidebar col">
The Sidebar area.
</aside>
</div>
Suppose we have given
.flex-main {order:1;}
.main-sidebar{order:2;}
But irrespective of what order is assigned to .flex-main or .main-sidebar there should be gap between these two →
<div class="flex-main"> The Main content area. </div> ** GAP INTERMS OF PADDING OR MARGIN** <aside class="main-sidebar col"> The Sidebar area. </aside>
Currently in my project here If I reverse the order the design breaks. see the Video here.
This happen because on the .main-sidebar this is defined →
margin-left: 2.127659574468%; This should be changed to margin-right, but in this WordPress, this will create too much of the PHP Coding. I believe that there should be some spacing property between two flex items such that if we change the order spacing remains the same.