The Joomla!® User Experience Portal

Download

Demo

Welcome, Guest
Username Password: Remember me
Forgot your password? Forgot your username? Create an account
Joomla User Experience Forum
Joomla Extensions
Extension Best Practices

Bootstrapping Frontend Component Views
(1 viewing) (1) Guest
Reply Topic
New Topic
  • Page:
  • 1
  • 2

TOPIC: Bootstrapping Frontend Component Views

Bootstrapping Frontend Component Views 11 months, 2 weeks ago #717

Now that we're officially using Bootstrap for Joomla 3.0, lots of devs are diving into using it for their component views. This is very awesome, but we need to start talking about conventions, design patterns, standards and best practices now, so we don't end up right back where we are today in Joomla where everything looks and feels completely isolated and different.

We'll eventually create official docs on the wiki, but let's start the conversation here.

The frontend usage of Bootstrap, which can and should be a little more varied and free than the administrator backend, but should still adhere to some type of standards so templates can easily theme all components.
-Kyle Ledbetter
Reply Quote

Re: Bootstrapping Frontend Component Views 11 months, 2 weeks ago #725

  • anibal
  • OFFLINE
  • Posts: 25
  • Karma: 2
Hi Kyle,

I've been implementing Bootstrap in the frontend (JBootstrap), and customizing components templates for JomSocial and SobiPro.

I think the big methodology change is about:

1. Conventions: Use the standard Bootstrap classes (don't create new classes for the same features)
2. Layout and structure: Use row and span classes
3. Customization: Use Css overrides to customize Bootstrap native classes
4. Advanced Customization: Use LESS


Thanks for your effort!
Anibal
Last Edit: 11 months, 2 weeks ago by anibal.
Reply Quote

Re: Bootstrapping Frontend Component Views 11 months, 2 weeks ago #728

Hi Anibal,
Are you using row and span classes (and probably row-fluid) in place of tables? I've been using tables for tablature data still, but they're of course not automatically responsive like the rows/spans in Bootstap. Because of this, I'm planning to add these classes based of Bootstrap's table classes in JUI for Joomla devs:
- row-striped
- row-condensed
- row-bordered

and probably also a list version of all that:
- list-striped
- list-condensed
- list-bordered

Does that sound like a good plan?
-Kyle Ledbetter
Reply Quote

Re: Bootstrapping Frontend Component Views 11 months, 2 weeks ago #731

Here's an example that I'd like to discuss with devs using Bootstrap for their frontend views:

pf-40-bootstrap.png



We're using a bunch of Bootstrap UI elements in different combinations in Projectfork 4.0 Milestones.

While I think creative usage is certainly fair and warranted, some of these conventions need to be agreed upon, such as:
- Placement of Create/Action button
- Usage of "collapse" to hide/reveal more content filters
- Usage of btn and collapse to reveal more info

It would be very good for our end users if we have some commonality in these types of things.
-Kyle Ledbetter
Reply Quote

Re: Bootstrapping Frontend Component Views 11 months, 2 weeks ago #732

  • anibal
  • OFFLINE
  • Posts: 25
  • Karma: 2
Yes, sure.

I've simply implemented tables in this way:
jbootstrap.prieco.com/index.php?option=c...id=19&Itemid=260

Thanks,
Anibal
Reply Quote

Re: Bootstrapping Frontend Component Views 11 months, 2 weeks ago #734

Just my 2 cents:

IMHO the new button should be on the top right corner, that's where i usually search for "new" (it may be my joomla backend addiction though). Otherwise, i saw a lot of this going on in cloud apps:

MILESTONES or Create a new Milestone

As for the rest, i like the "well" class usage, and i would add a standard way to make columns and rows (like using BS standard spanxx classes).

I'm not so sure about the details collapsible button though. Maybe putting in on the bottom right like "show more" and using collapse plugin to expand the well?
Daniele Rosario
Reply Quote

Re: Bootstrapping Frontend Component Views 11 months, 2 weeks ago #737

@Skullbock great comments, the "New" and "Show more" buttons are very common elements and placement is certainly up for debate.

I've seen a trend to move the "New" button to the left (like in Google Apps) or more in content (like I did w/ PF 4.0) lately, so I'll be interested to see what others are doing.
-Kyle Ledbetter
Reply Quote

Re: Bootstrapping Frontend Component Views 11 months, 2 weeks ago #738

  • anibal
  • OFFLINE
  • Posts: 25
  • Karma: 2
Hi,

I agree Actions, always on the right side.

If they are near the titles, they must not compete with them.

Please, check this image from Unbounce:



Regards,
Reply Quote
Reply Topic
New Topic
  • Page:
  • 1
  • 2
Joomla User Experience Forum
Joomla Extensions
Extension Best Practices
Powered by Kunena
Time to create page: 0.56 seconds