Jump to content

As a front-end designer IPB is a nightmare lack of CSS classes


iJeff
 Share

Recommended Posts

I can not believe there are only a dozen of CSS classes, to control the zillions of blocks and elements. Even worse, each group or type of page does not has its own css class. If you have ever used 'wordpress' you would know what I meant. wordpress has CSS built-in even for the tinest element in a document. And It's hell easy even for a beginner level web designer to customize the way they can., Only because extremely specific CSS classes. For instance, If I am viewing single post, (topic view in IPB, or article view in IP content, where I needed it most) wordpress would add .single css class to body element among others. Likewise to other type of different public view templates.

There is no way you can style a different template or page without messing with the core files. I have little to no knowledge of XML, since I have pretty good understanding of HTML, I was able to pull this trick off where I could. But as a general rule, 'never ever be general with css'., be as much specific as you can. It would result in adding more classes and one time hard work. But it would save zillions of hours for many of us.

Thanks for consideration.

Link to comment
Share on other sites

Sorry but not sure I follow.

IP.Content has its own css and can be changed as required

If there is a same class in IP Content that is used in forum, blog, gallery etc then they can all be changed to be different by using the css file for that app (or adding your own css file for that app)

Perhaps I am mis-reading your post ?

Link to comment
Share on other sites

Sorry but not sure I follow.

IP.Content has its own css and can be changed as required

If there is a same class in IP Content that is used in forum, blog, gallery etc then they can all be changed to be different by using the css file for that app (or adding your own css file for that app)

Perhaps I am mis-reading your post ?

He's referring to class names in the HTML. Eg - having 'article' class added to the body tag within IP.Content articles or 'topic' in an IP.Board topic. Having the class names readily available within the HTML makes it easier for skinners to target specific areas of the template without having to go in and start tweaking stuff.

The interactive elements within IP.Board 3 are generally awful for skinners and is something that I hope is addressed in IPS4. Just off the top of my head -

- The open/close sidebar blocks on the homepage are controlled by inline CSS and have no targetable class names.

- The collapsible sidebar is controlled with inline styles and again, adds no helpful class names.

- Pretty much all elements that trigger a modal dialog don't have an 'active' class to indicate that the element is open.

From what I've gathered by reading the IPS4 blogs, they have adopted a fairly strict approach towards the HTML/CSS framework. No inline styles etc.

Link to comment
Share on other sites

  • Management

This is all resolved in IPS4 which is still in development. Inline styles are not allowed and the classname structure is much better. Here's an example of the body tag generated for the front end.

<body class='ipsApp ipsApp_front ipsJS_none ipsClearfix' data-controller='core.front.core.app' data-message="" data-pageApp='forums' data-pageLocation='front' data-pageModule='forums' data-pageController='topic'>
Link to comment
Share on other sites

This is all resolved in IPS4 which is still in development. Inline styles are not allowed and the classname structure is much better. Here's an example of the body tag generated for the front end.

<body class='ipsApp ipsApp_front ipsJS_none ipsClearfix' data-controller='core.front.core.app' data-message="" data-pageApp='forums' data-pageLocation='front' data-pageModule='forums' data-pageController='topic'>

Are you using Modernizr for feature detection (ipsJS_none) or is that something built in house ?

Link to comment
Share on other sites

Something in-house as I recall, though I'll let Rikki confirm.

Building on Matt's code example, you can target using the data attributes

body[data-pageController="topic"] {
 ...
}

Yep. The jquery equivalent works great as well and has better browser support:

$('body').data('pageController'); 
Link to comment
Share on other sites

My only concern is this in-house stuff you speak of. Care to point me in a direction where I can read up on this in-house things you guys are building.

I don't understand why that is a concern for you. In house was used as a reference to their internal communication.

Link to comment
Share on other sites

Are you asking about PHP or about the front end (javascript, CSS, etc.)?

The PHP backend is almost entirely "in-house". We use a few libraries here and there, but the vast majority of code we wrote ourselves.

The front end leverages some common third party libraries including, but not limited to:

  • jQuery
  • ClampJS
  • Underscore

While we may not be using Modernizr specifically (and that may or may not change before release depending on need), it's also not like we reinvented jQuery. :)

Link to comment
Share on other sites

Are you asking about PHP or about the front end (javascript, CSS, etc.)?

The PHP backend is almost entirely "in-house". We use a few libraries here and there, but the vast majority of code we wrote ourselves.

The front end leverages some common third party libraries including, but not limited to:

  • jQuery
  • ClampJS
  • Underscore

While we may not be using Modernizr specifically (and that may or may not change before release depending on need), it's also not like we reinvented jQuery. :smile:

Thanks that's what I wanted to know for the front end :-)

Link to comment
Share on other sites

This is all resolved in IPS4 which is still in development. Inline styles are not allowed and the classname structure is much better. Here's an example of the body tag generated for the front end.

<body class='ipsApp ipsApp_front ipsJS_none ipsClearfix' data-controller='core.front.core.app' data-message="" data-pageApp='forums' data-pageLocation='front' data-pageModule='forums' data-pageController='topic'>

Exactly. :)

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...