Perhaps I am missing something here but we need a way to define the order that items break down on a page for mobile.
As an example, let’s say I have two columns with text on the left and an image on the right. That may be what I want to see on tablet or desktop, but on mobile I might want it to break down so that the image is on top using a push/pull order. At the moment the item on the left is always on top and I can’t see an option to change that.
We also need an option to centre on mobile only. Sometimes you have an image or text aligned left on desktop, but on mobile it looks better centred. At the moment the only trick I can think of would be to duplicate the Bloc and hide visibility depending on the device. A simple centre on mobile option would be more elegant.
If Blocs can do these things already I’d be very grateful to know how.
Order:
BootStrap (which Blocs is built upon) has what is called “Push & Pull”, however Blocs does not have this presently. I actually was writing about this when the other forum closed before I posted. See below:
Will Blocs eventually include the full bootstrap grid? In addition having the ability to use and set BootStrap’s Push & Pull would perhaps be very beneficial for some as well.
Regardless, from a design standpoint, the “Structure Blocks” could be expanded upon rather extensively to compensate and help people build more elaborate responsive layouts and results across breakpoints (more of those would be nice also). As @mackyangeles keeps pushing for “more Structure Blocks” here (old forum) and on twitter. +1 I think that would really benefit the program and it’s user base to expand the “Structure Blocs” further.
That’s when I realized the old forum was read-only and stopped writing. I then did a test putting all Blocs on a page to find out what parts of BootStraps grid it uses, I found the following (@norm did I miss any?):
Not all Grid options are used and neither is Push & Pull. By adding push/pull and more elaborate “Structure Blocs” I think it would help people from a design standpoint regarding what would be possible.
I also don’t understand (just me?) why at times in Blocs in “View Toggle Mode” things render and break different than in a browser. Another thing is ALL images seem to go full width at the 767 break point (again, just me?), unless I am missing something, if so please advise.
Thanks, so far I’ve just been going through some videos I found on YouTube but finding everything is out of date because the layout appears different. I have a couple pages here on custom classes and the class manager that I still have to study and it’s on my to do list for getting up to speed quickly.
Basically I am trying to achieve everything in it took me more than a year to learn in Rapidweaver with Foundation in just a week or two using Blocs.
As you are aware Blocs doesn’t let you select columns on the canvas, hence the reason why you can’t add the push/pull classes. Originally this was avoided because it made it harder to select the surrounding row, it was also hard to select the column if the column had edge to edge content. With the addition of the new breadcrumb navigation, this could now be a lot easier to handle so I’ll start looking in that area.
For the record, Blocs currently uses push pull on a few pre-made blocs.
I’ll look into the tablet breakpoint, what devices are you noticing it on? ipad, iPad mini?
More structures are defo coming, it just takes time to get them right. Making them work in a browser takes minutes but making sure they work correctly in Blocs is a different story, the object selection engine in Blocs needs to work over the top of the layout structure, in some cases I have to come up with two seperate solutions, one that works in Blocs and a lightweight production version Blocs needs to convert too so you get the best code in your site.
Anyway all good points, no doubt some will surface in 2017
I think I’ve discovered a way around this by accident while checking different options. Instead of using Structure Blocs I achieved the effect I wanted by using Article Blocs.
You can have one Article Bloc with the image on the right and text on the left. Immediately below place the opposing Article Bloc, so the image is on the left and the text on the right. When you switch to mobile view the image is always on top of the associated text from that Bloc.
In the absence of a full 12 Column grid with push pull I think a great alternative solution is just a swap column option. This could just swap whatever layout they have for the breakpoint.
I am very familiar with the Foundation 12 Col grid and notice that it seems to be is constant source of confusion for users and delayed understanding of how the implement a push and pull setup. It is way more complicated that needs to be. A simple swap columns meets function the requirement of 99% of users I believe.
I am familiar with the Foundation push/pull system as well, but it very rarely works for me as expected. Sometimes I just can’t see what is wrong, even when copying the settings from another example, so I tend to copy paste from an existing project where it is working and then adapt it from there.
Although flexible, the Foundation solution is without doubt tricky and if you throw in stacks like the wonderful Grummage 2 that allow for very finely controlled positioning it can become a very technical exercise.
I agree that a simple swap columns option would probably keep most people happy without turning it into a busy and complicated mess.
Well at least it’s not just me then, sometimes you begin to wonder.
Seemingly 767 and below.
@norm, thanks for responding, I think when I did that maybe I only looked at “Structure Blocs”. I will evaluate the rest as well regarding their grid structure, thanks for the heads up.
[quote=“Blocs_User, post:10, topic:88”]
For the record, Blocs currently uses push pull on a few pre-made blocs.[/quote]
I have since made an example with ALL Blocs and evaluated the Bootstrap CSS Grid Classes that Blocs uses, which are seen below (From Blocs 2.3 Beta 9):
