Bootwire - Basic Twitter Bootstrap Profile

[Joss]

IMPORTANT

This is now well and truly out of date! I strongly suggest ignoring it.

The Bootwire System

This is a series of proof-of-concept profiles based on ProcessWire 2.3 (forthcoming) and the Twitter Bootstrap Framework

They are currently using Bootstrap 2.3 and JQuery 1.9.1

Bootwire Starter Profile

Version 0.5

This version if for those who just want to leap in and get their hands dirty, 

It includes almost no content at all, very few fields and templates and very little markup. The normal Bootstrap navigation is in place for reference.

More details are in the readme.

Download Here: http://stonywebsites.co.uk/Bootwire-Starter-Profile.zip

Github: https://github.com/jsanglier/Bootwire-Starter-Profile

============================================================

All versions come with a Site Settings page which is a child of a Content Management page in the page directory. This is used for common elements such as site title. The Starter Version has almost nothing in it!

Some additional tweaks have been added to TinyMCE and these profiles are pre-loaded with the Modules Manager, the Profile Exporter and the Page Delete module. Please use the Module Manager to ensure  all modules are up to date.

NEW: Now with some demo functionality in a functions.inc file.

Bootwire Demo Profile

Built on the starter profile, this version demonstrates some Twitter Bootstrap functionality in the context of a ProcessWire installation.

The Demo can be viewed here: http://bootwiredemo.stonywebsites.co.uk/

Download here: http://stonywebsites.co.uk/Bootwire-Demo-Profile.zip

Github: https://github.com/jsanglier/bootwire/

Bootwire Admin Theme

I have created an admin theme using Bootstrap 2.2.2. It is functioning but should be treated as a work in progress. 

However, you may like it.

It has its own thread here.

http://processwire.com/talk/topic/2640-bootwire-admin-proof-of-concept-admin-theme/

==============================================================

Future Profiles

Bootwire Blog Profile

This is intended to be a basic blog system using the Bootstrap framework.

I am planning to start from scratch with the blog, basically because I need the exercise.

It will not be as clever as Ryan's system, but it will have the following features (er ... possibly):

• Category Tree
• Tag System
• In-Article gallery
• Media pages
• Alternate themes for posts
• Lots of global settings
• Manual related posts
• Automated related posts (okay, probably beyond me)
• er   ,,,, some other great feature that I have not thought of yet.

Edited July 5, 2014 by Joss

[ryan]

Joss, thanks for making this. Looks and works great! I've been thinking that we need site profiles that originate in a few of the different frameworks, so this is really a great place to start.

A few minor points of confusion I ran into:

• I can't seem to click to the "About this site" or "About pages" except on the sitemap page. The top navigation only seems to let me get to the "child page example" pages.
  
• The prominent "read more" button doesn't seem to link anywhere.
  
• I couldn't find an "edit" link/button anywhere on the front-end to case navigating between front-end and admin.
  
• Something up with the site settings template (see attached screenshot). I'm thinking those TinyMCE fields might just need to span full width. Though since you've got 3 identical fields, this might even be a good potential use for a repeater?
  
• Also on those TinyMCE fields, the text seems to be running up against the left edge for some reason (see screenshot). Not specifically a problem, but a detail I figured I'd mention while I was making this list.
  

[Joss]

Hi Ryan, thanks for the feedback.

Yes, I am still playing with it. I have to put a few more bits of bootstrap into the editor.css to make it play nicely in TinyMCE.

I haven't done a repeater field here simply because it is only an example of what you can do and reflects one of the most common Boostrap examples - I sort of expect people to actually do their own thing and chuck out most of it. I will make a list of what I suggest people throw away!

I have a version that I am using myself as a starter site that has a far more comprehensive system of blocks and modules that I might put up as a profile at some point. Though it will probably be too overdeveloped for most people, it may serve as an example of how you can work with blocks of information to really customise a site round an existing template structure. It also comes with a news system a gallery system and a few other bits and pieces.

The menu issue is actually a limitation with the Bootstrap navigation system - parents only are place holders, so you have to plan out your pages a bit differently. I will put some of that in a readme, but people who have used Bootstrap before will see that coming.

[Joss]

Just thinking about using repeat fields for blocks with Bootstrap.

The thing with blocks is that you may want to create a whole library of them - banners, bits of text, menus, news headlines, all kinds of things.

So just doing straight repeat fields with, perhaps a WYSIWYG editor is limiting.

Two other possibilities.

You can uses a page field and Ryans clever select system where you grab the blocks then change the order.

That works well if all your blocks are the same width (grid wise) and you have a fixed number.

Alternatively you can create a repeat field with two fields, a page field set to import a single page and then a text field where you put in your span width (a number between 1 and 12)

Edit: This is working horizontally, of course where you have blocks next to each other. If you do mess your maths up, then the blocks just get pushed underneath - looks messy, but does not break anything.

TO be really, really cleaver you would have some scripting that does some adding up on the fly so you start with a maximum number of 12 and then that reduces each time you fill a field in - but the implications of that makes my head spin!

This sounds like something that is better as a tutorial rather than as part of a profile.

Joss

[Martijn Geerts]

You're doing great jobs over here Jos. I'm glad you joint the community.

Just want to shout out my opinion about styling the back-end tinyMCE

Setting a site style to tinyMCE is my opinion a bad idea. To mimic it al to almost the same as in the front, can confuse customers who are working with tinyMCE. They aspect the output on the front exactly the same as on the front. If you don't style and leave as it is standard, those expectations won't be there & saves you a lot of time. Proper use of HTML tags is in more important then eye-candy.

[Joss]

Hi Martijn

I have a very mixed opinion about any Wysiwyg editors - in an idea world I would probably have none, but I am aware that there needs to be some freedom too, and editors supply that.

In bootstrap there are some very specific things that are not available unless you use styles. the "lead" style is one and a btn style is another (with what ever variations you want)

Generally, the only one I bring out is the Lead style.

The other styles I am talking about above are just odd layout things like H1-h6, paragraph line spacing and so on. These can be important, not because the user expects it to be identical, but because they should not be mislead as to the quantity of text - if on the front of the site you have a very open typography style, but in the back end it is very tight, it can be even more misleading.

Having got that about right, when I use rich text editors, I often only use a couple of buttons - Bold and Italic, perhaps, or just one or two headings and a style. Basically, it is very, very specific to the use so that the user can see exactly what is expected purely by the lack of buttons around!

Joss

[Joss]

Just done a bit more reading on the Bootstrap menu and apparently this is because on touch screen you can have a hover flyout - so it must click to open the drop down.

Not having a touch screen device, I am not up on this issue.

Anyone have any more details?

[Martijn Geerts]

Hi Jos,

Sorry to hijack your topic. I love to strip out almost all tags in WYSIWYG editors. I don't want to give away the H1 for example. On every project I decide which headers are static set in the templates and which I provide to the editors. What I see is that editor don't think about SEO when typing text. Often I see it happen that editors use <strong> when they mean <h3> or <h4>

A year ago, I created a stylesheet for tinyMCE which contains alot of ::after & ::before pseudo classes that contains the explaination of what the tags are. So basicly I could describe: paragraph, main header, sub header, etc..

h2:before {
   content: 'main header';
   position: relative;
   height: 14px;
   line-height: 14px;
   margin: -14px 0 0 0;
   display: block;
   etc....
}

That way I thought I could trigger an editor to use the proper html tags. I discussed it with a colleague but he didn't liked it. So I never used it in the "real" world.

Also a thing where I'm struggling with is images. For some Images they are the most beneficial when they are in the right text content. But as we all know give an editor a few pixels & they will mess up. Last projects I started to automatically create a "photo album" when there are more then a X amount of images on the page & The editor didn't checked the checkbox "don't show album".

The fight continues ...

[Joss]

On the images front, you can use something like this:

<?php if($page->news_secondimage) { ?>
<script type='text/javascript'>
window.onload = (function(){
try{$("#thearticle > p:eq(2)").after("<a class='fancybox' rel='group' href='<?php echo $page->news_secondimage->url; ?>'><img class='pull-left siteimage' src='<?php echo $page->news_secondimage->getThumb('secondthumbnail'); ?>'></a>");
}catch(e){}});
</script>
<?php } ?>

Basically, I set up a second images field (news_secondimage) and then, checked if it was used and inserted it after the second paragraph of my main text which is in a div called #article

It has struck me that you could go one step further and create another field that allows the user to select which paragraph - maybe limit their choice.

That way it is inserted with exactly the right code, can have things like fancybox added (as I have here) and yet does not limit them to only one image. I disable the image button from TinyMCE of course!

Joss

[Martijn Geerts]

Good to see other people searching solutions for images. Soma, told somewhere he's using repeaters for images within WYSIWYG. Don't know his solution but like to see what he came up with. Maybe there are more people over here having the same struggle or solved it somehow and want to post their solutions/options about this topic.

[Joss]

New Stripped back version called Bootwire Starter now available on Github

https://github.com/jsanglier/Bootwire-Starter-Profile

(Hey, I almost sound like a pro - well, almost....)

[ryan]

Joss, please add to the modules directory when you get the chance. 

[Joss]

Er, is it safe to?

I just need to change one little thing in it - I realised that I still have a list of demo images in the Starter version! (oops)

[Joss]

I have nearly sorted it out fully - I just want to sort out the menu script to make it better.

(Which means I will probably be crying for help from somewhere!)

[panictree]

The menu issue is actually a limitation with the Bootstrap navigation system - parents only are place holders, so you have to plan out your pages a bit differently. I will put some of that in a readme, but people who have used Bootstrap before will see that coming.

Hi Joss,

Thank you for taking the time to develop and share this profile with us. I think this could be very useful for people interested in integrating Twitter Bootstrap with ProcessWire, as it will pave the way for them to do all kinds of things with it. Having said that, and sorry for getting off topic here, I can't help but think that TB, in this particular instance, is getting in the way and forcing you to make certain decisions, like changing the way you plan your pages, rather than making your job easier, which is what's supposed to do. I'm certainly not negating the value of using such tools as TB, but I do believe that, sometimes, as it seems in this case, they are rather counter productive. 

This is of course just my opinion, and, doubtless to say, I might be completely wrong!

[Joss]

Hi Panictree

Yes, I tend to agree with you, but Luis pointed out that this limitation is actually to make touch devices easier to use where you have to differentiate between touching to open and touching to link.

So, whatever system you use, you need to have the parents open something rather than link to something, just to make it usable.

In the meantime, I am just stuck with finishing off the menu system before I add it to the modules:

http://processwire.com/talk/topic/2690-volunteer-needed-to-help-sort-menu/

[panictree]

So, whatever system you use, you need to have the parents open something rather than link to something, just to make it usable.

Yes, that's an inherent problem of dropdown menus. Frankly, they are a usability nightmare on touch screens, but there're some work arounds that can make them more usable and user-friendly. I've collected some articles that might help you get the menu system sorted.

- StackExchange discussion

- 'Designing mouse over events to be compatible with touch screens', here

- A responsive dropdown navigation menu, here

- Make CSS dropdown menus work on touch devices, here

- Browser advisory paper - touch actions, here

Well, perhaps the easiest thing would be to just not use dropdown menus , but if you have to, well, then you have to  .

I hope that helps.

Claudio

[Joss]

Starter version updated - see note on OP

[Joss]

Update:

The menu system on the Bootwire Starter Profile is now fully functioning with unlimited sub-menus.

DOWNLOAD: https://github.com/jsanglier/Bootwire-Starter-Profile

However, to use this as a properly responsive system that works with touch devices, I do not suggest that you use sub menus, but just the main dropdowns by limiting the scope of your pages.

If some kind person would like to check the download and let me know if it is okay, I will then add it to the Modules.

Joss

[Soma]

You now got the nav2 class still in.

[Joss]

Oh rats.

Updated

[Joss]

Updated the Bootwire demo profile and the original post.

[OrganizedFellow]

Joss, thanks for making this. Looks and works great! I've been thinking that we need site profiles that originate in a few of the different frameworks, so this is really a great place to start.

I'm a big fan of Zurb Foundation.

After I've got a better understanding of ProcessWire, I will also donate some code  

@joss have you seen Redactor?

http://imperavi.com/redactor/

I haven't tried it yet, but heard it's much better thatn TinyMCE.

[SiNNuT]

I'm a big fan of Zurb Foundation.

After I've got a better understanding of ProcessWire, I will also donate some code

@joss have you seen Redactor?

http://imperavi.com/redactor/

I haven't tried it yet, but heard it's much better thatn TinyMCE.

A problem with Redactor is that you need to pay for it, although we (the community) could probably easily raise the 399 dollars needed for a OEM license in behalf of PW if needed. Personally i haven't had too many problems with Tinymce, but that's more or less from a end user perspective.

[Joss]

Redactor and TinyMCE are very different beasts.

If you want to find an interesting alternative to TinyMCE, you need to look at Mercury. http://jejacks0n.github.com/mercury/ - there is a non rails version

For basic editing, there is this for Bootstrap - http://jhollingworth.github.com/bootstrap-wysihtml5/, and this that it is based on https://github.com/xing/wysihtml5, though I am not sure how much it is developed. Possibly worth forking just for PW.

Loads more on Github.

I do think there are three sides to this argument. If you want an editor that is like using Dreamweaver, then you go for TinyMCE or CKEditor - well developed and supported.

If you just want some basic rich text functionality on your site (which is what is mostly needed) then you go the HTML5/JQuery route - minimal and easily customisable and as light weight and mobile friendly as possible. 

If you want front end, in-line editing, then you look at something like Aloha.