Menu

Build a Joomla Website Forum

Free Joomla support for all and priority support for members.
  1. Peter Stotesbury
  2. Priority Support
  3. Thursday, September 26 2013, 09:36 PM
  4.  Subscribe via email
Hi All,

Intro : I have tried GitHub and getbootstrap.com for an answer !
Can I ask a question here re Joomla and Bootstrap ?

Re : .span1 to .span12

My template provider used to offer frontend module widths in percentage integers.

They have just updated their Framework.

Now my template provider seems to now only offer module width options using bootstrap (class?) .span.

As I understand the situation, .span is made up of 12 'blocks' across the page therefore it seems I only have increments of 8.33 percent instead of 1% increments.

Do I understand the situation correctly ?

Is there any alternative method of module width control ?

Thanks
Laurie Accepted Answer
0
Votes
Undo
G'day Peter!

If you were working in print media, say a magazine, newspaper, printer's shop where you do junk mail or on a desktop publishing programme, you'd have absolute control of size and position.

Not so on the web!

You may have everything looking just right on your screen. What about my screen, my browser?

I have a desktop with a large monitor, a small laptop that I take in a backpack when camping on my quadbike, and a small tablet on the desk beside the desktop computer that can view in either portrait or landscape orientation. When my son visits, I get him to check out my sites on his smart phone in the two orientations.

In this modern world, you're designing for seven possible views.

So forget about getting everything just Micky Mouse on your monitor/browser/font size/zoom factor combination. Design your website within the CMS and template confines and all will be OK, even if it displays a bit differently for someone else.

In short, just put it in there and the templates will take care of it.

If you wish, have a look at my Outback Adventure site via my signature below. It's a J2.5 site using a template that has the ability to use either pixel size or percentage. I found the percentage didn't work very well so reverted to the default pixel size.

You'll see that I have the Newsflash module above the main content. From memory I have it hidden in the phone and tablet versions.

I'm not happy having the newsflash take up that valuable web real estate but the thumbnail images didn't work out in the sidebar.

When I get to it, I'll change templates and use a wider body, possibly with two sidebars. I'm waiting on the update of one extension to J3x.

If you view my site on a phone in portrait mode, you'll see that in some cases the floated thumbnail image doesn't leave room for long words and the text messes up a bit. People will just have to turn their phone around or else put up with it. The other alternative is for me to centre the images so there is no text beside them, but I don't like that.

When I started out with Joomla, I was my own worst enemy until I understood not to fight Joomla. If you do win, you get awfully knocked about in the process.

I hope that helps a bit, Mate. Being a web developer is well advanced on being an end user. There's a whole lot you need to come to terms with.
Comment
There are no comments made yet.
  1. more than a month ago
  2. Priority Support
  3. # 1
Peter Stotesbury Accepted Answer
0
Votes
Undo
Hi,

I have just spent about 30 minutes drafting a reply !
But that has been dumped !
I have just realised why you are reminding me to put all puntuation immediatly after the last word when writing to a web page !

However I would like to ask a complementary question if I may ?

Laurie : you say : Hundreds of thousands of web builders around the world are quite happy with Joomla, Bootstrap and developer's templates and find they all work fine.

Tristan says : so don't fight it !
But how do others 'cope' with 12 divisions instead of, say, 1% increments ?
Having re-read your answers I would now even ask if this is the right question ?
Any comments would be of interest. Thanks :) .
As a new website owner I had just about understood the process and the implications of the change of the template to Bootstrap took me by surprise hence my bewinderment.
However I will take your advise and experiment :) .

PS
The naming of my template provider was not intentional. I had meant to edited out any reference to them.

Think that's all !!
Comment
There are no comments made yet.
  1. more than a month ago
  2. Priority Support
  3. # 2
Laurie Accepted Answer
0
Votes
Undo
I think I cahn see your problem Peter!

Intro : I have tried GitHub and getbootstrap.com for an answer !
Can I ask a question here re Joomla and Bootstrap ?


Intro : should be Intro:

answer ! should be answer!

Bootstrap ? should be Bootstrap?

Your incorrect punctuation is causing the line to break in the space rather than including the punctuation mark with the word.

It's also important to understand that setting the columns by percentage in your desktop monitor will not be a universal solution. It will go up the spout when the device changes or when someone with poor eyesight changes the font size, whatever you do.

It's also worth noting that Joomlashine and Joomla are pretty big players and know what they're doing. Hundreds of thousands of web builders around the world are quite happy with Joomla, Bootstrap, Joomlashine and other developer's templates and find they all work fine.

The last paragraph of Tristan's post, and in particular the last sentence, is worth re-reading, Mate.

Please let's know if the punctuation mark being separated from the preceding word is not the real issue.
Comment
There are no comments made yet.
  1. more than a month ago
  2. Priority Support
  3. # 3
Peter Stotesbury Accepted Answer
0
Votes
Undo
Hi Tristan,

By way of answer let me give you (and any others in my same position) an excert from my email to my template provider :

Part One !

About "Therefore A+B+C = 8.33% !" that you said: could you please tell me more detail about it?

I was trying to be clever and at the same time confirm with you that within this new (bootstrap ?) idea that the page width is divided into 12 equal parts ('divisions') and that the modules have to fit in with this arrangement. Is this correct ?

To put this question / observation another way :
Each 'division' across the page will be 1/12th of the page width.
Assuming a 1200 pixel page width then each 'division' across the page will be 100px (being 1200px divided by 12 'divisions').
This will mean (imho) that a module width (for example, JSN Epic template position 'right' and position 'innerright') will be limited to being either 100px, 200px or 300px (being .span1, .span2 or .span3 ?).

Should you not be a software engineer (I am not a software engineer), may I suggest you discuss this question with one of your colleagues ?

Part Two !

As indicated above I am 'out of my depth' having only a small (tiny) amount of knowledge regarding php, css, bootstrap, elements, class, etc..
However, as a result of searching the internet) I see that a cascading grid layout library called Masonry has an element by the name of 'columnWidth'. See http://masonry.desandro.com/options.html#columnwidth for further details !

If my thought of 100px 'divisions' is correct then would it be possible to to use the above mentioned layout library to give 1% increments ? Maybe via 'Module Class Suffix' ?

Final Comment

Again if my thought of 100px 'divisions' is correct then I would not want to increase the width of a module just to move an exclamation mark (!) up a line
!


The reply I received was :

Hi,

Your examples are completely correct.
However, it should be confirmed that: if you do not want a new solution that joomlashine given in this update. You can use the following solution:

#1. Module Class Suffix: http://docs.joomla.org/Module_Class_Suffix
You can set class suffix for each module then set % or px that you want

#2. Page Class Suffix: http://docs.joomla.org/Page_Class_Suffix

please consider using the solution that suits for you.
Thank you.
---------------
Best regards,


So now I have some homework to do ! At least I get to keep my current template !!

Regards to All
Comment
There are no comments made yet.
  1. more than a month ago
  2. Priority Support
  3. # 4
Tristan Montano Accepted Answer
0
Votes
Undo
Hi Peter,
Which version of Bootstrap is your template using? Version 3 has a totally new grid system as it's built from a mobile-first frame of mind. As such, a lot of classes have been added and some of the old classes used in Version 2 are no longer in use, particularly the 'row-fluid' and 'container-fluid' classes. They are no longer needed as Version 3 is purely mobile-responsive.

Before all of that, though, using a 12-grid system like Twitter Bootstrap requires you to think and build your website within the established Framework. That means when thinking of your page layouts, you need to think in terms of columns, not percentages, i.e., how many columns will this element occupy rather than how many pixels or what percentage should be used. Mobile responsive frameworks do away with pixel-perfect precision as it is not a realistic approach given the huge number of devices with different screen sizes and resolutions.

Try to fully understand the framework first and work within the system so you get the best use out of it. These things were meant to make your life as a web developer easier, so don't fight it ;)
Comment
There are no comments made yet.
  1. more than a month ago
  2. Priority Support
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Free Joomla TutorialLearn Joomla for free with our 16 lesson, 2 hour course.

Get Started