Div ID's and proper designs
Permalink
Hi,
This is my first post on this website and my level of knowledge is equal to that of a beginner.
I've done HTML, CSS, PHP and Java/javascript tutorials in the past but I haven't built more than a simple loginpage in the past.
The way I approach programming/scripting is mostly Object oriented due to the fact that most of my experience comes from building little java programs.
My first question is about sections, using the div-tag:
It seems that there is no rigid structure/template when it comes to the architecture of c5 websites. Looking at the templates for example: The depth of the structure and the names used for the parent section seem to vary. sometimes the body is wrapped in the ID = top sometimes the ID = core.
Although, sometimes it seems that predefined tags are being used as to make sure c5 recognizes certain elements and is able to work with it like ID = left-sidebar-container.
Question #1: How do I differentiate between ID's which are merely created for a single situation (like ID = top I think) and those that are structurally used like ID = left-sidebar-container?
Question #2: Where can I find ID's that are/should be used for certain elements.
The last question concerns website design from a developer's point of view.
Even though I am a hobbyist, I would like to create a website which I could hand over to a proffessional later on. The code doesn't have to be flawless or contain the best-practice-approach for every challenge I'll face but it should not be a 'burden' to be handed over to a proffesional who'll then want to build a new website from scratch because it is easier.
Therefore: question #3: When making a theme: What does good practice looks like when it comes to the structure of PHP and CSS documents? Should every webpage contain a "top" a "wrapper" (whatever that may be! :P) and additional sub-sections?
Hopefully this is not a case of TL;DR.
Potato? x)
Kind Regards,
Chris
This is my first post on this website and my level of knowledge is equal to that of a beginner.
I've done HTML, CSS, PHP and Java/javascript tutorials in the past but I haven't built more than a simple loginpage in the past.
The way I approach programming/scripting is mostly Object oriented due to the fact that most of my experience comes from building little java programs.
My first question is about sections, using the div-tag:
It seems that there is no rigid structure/template when it comes to the architecture of c5 websites. Looking at the templates for example: The depth of the structure and the names used for the parent section seem to vary. sometimes the body is wrapped in the ID = top sometimes the ID = core.
Although, sometimes it seems that predefined tags are being used as to make sure c5 recognizes certain elements and is able to work with it like ID = left-sidebar-container.
Question #1: How do I differentiate between ID's which are merely created for a single situation (like ID = top I think) and those that are structurally used like ID = left-sidebar-container?
Question #2: Where can I find ID's that are/should be used for certain elements.
The last question concerns website design from a developer's point of view.
Even though I am a hobbyist, I would like to create a website which I could hand over to a proffessional later on. The code doesn't have to be flawless or contain the best-practice-approach for every challenge I'll face but it should not be a 'burden' to be handed over to a proffesional who'll then want to build a new website from scratch because it is easier.
Therefore: question #3: When making a theme: What does good practice looks like when it comes to the structure of PHP and CSS documents? Should every webpage contain a "top" a "wrapper" (whatever that may be! :P) and additional sub-sections?
Hopefully this is not a case of TL;DR.
Potato? x)
Kind Regards,
Chris
The reason why there's no rigid structure to themes is that there's no 'one size fits all' that can cater to different appearances. Sometimes you need to add extra wrapping divs to provide enough structure for styling, sometimes you sites needs very little markup.
That being said, here's some general advice that I hope is suitable to where you are at:
- Top level wrapping divs can be very handy, in particular to help you style things on your theme WITHOUT affecting concrete5's layout. I normally have a wrapping div with the class of 'page' on it and I use this to target common/broader page elements such as headings. I also automatically include the page type's handle and something to detect if the page is in edit mode (so you can fix things that might break in edit mode). So in my header.php element file, there's a bit that looks like this:
This means you can do something like this to target a specific page type:
- Consider creating page types not just for different layouts but for the different kinds of pages you expect to have on a site. I normally have a left, right and full page type for general purpose pages, and a 'home' page type as that's nearly always a different layout. But then I'll have page types for certain kinds of pages, like 'business_listing', 'news_item', 'blog_post', whatever is more structured information. This gives you the ability to specifically structure those pages, but also filter lists of pages by their purpose (both on the front-end and in the dashboard). If you haven't already, I'd highly recommend learning how the Composer works and how to add and utilise custom page attributes.
- Don't forget to structure your view.php file as well. Normally this is very similar to the full or left_sidebar layout.
- My biggest tip with CSS in general is try to avoid using IDs in your styling, try to use classes where possible. There's no harm as such in having IDs in your markup, as they can be handy for javascript purposes, but I'd recommend being conservative when it comes to USING them for actual styling purposes. I won't go into detail here exactly why I'm suggesting this, but it all comes down to IDs being much more 'specific' in terms of targeting than classes ('specificity'). This is one of the best things I've learnt/understood to help make my CSS more manageable.
- Try your best to be consistent with your class naming conventions, or at least try to be consistent within your theme/project. For example, anytime we create a div that is purely to wrap a section (maybe for something like a background colour), we tend to affix '-wrapper', so we have things like 'main-wrapper', 'footer-wrapper', etc. Then when we're looking back at something we can instantly see that these elements and styles are broad containers. The same goes for custom blocks, I like to put a div around what they output and name it the same as the block.. So just say I have a testimonial block: I'll wrap the output with the class of 'testimonial-block', and then give classes to things within it, such as 'testimonial-title', 'testimonial-quote', 'testimonial-author'. This means I can directly target that block for styling.
In terms of CSS, I'm really just repeating advice fromhttp://smacss.com/ - I'd HIGHLY recommend reading this, it really helps to understand the nuances of CSS and many best practices.
I know you've asked about best practices for creating themes for concrete5, but it really just comes down to the same best practices you'd use for styling any HTML site.
That being said, here's some general advice that I hope is suitable to where you are at:
- Top level wrapping divs can be very handy, in particular to help you style things on your theme WITHOUT affecting concrete5's layout. I normally have a wrapping div with the class of 'page' on it and I use this to target common/broader page elements such as headings. I also automatically include the page type's handle and something to detect if the page is in edit mode (so you can fix things that might break in edit mode). So in my header.php element file, there's a bit that looks like this:
This means you can do something like this to target a specific page type:
.page h3 { color: red; } .home_page h3 { color: blue; }
- Consider creating page types not just for different layouts but for the different kinds of pages you expect to have on a site. I normally have a left, right and full page type for general purpose pages, and a 'home' page type as that's nearly always a different layout. But then I'll have page types for certain kinds of pages, like 'business_listing', 'news_item', 'blog_post', whatever is more structured information. This gives you the ability to specifically structure those pages, but also filter lists of pages by their purpose (both on the front-end and in the dashboard). If you haven't already, I'd highly recommend learning how the Composer works and how to add and utilise custom page attributes.
- Don't forget to structure your view.php file as well. Normally this is very similar to the full or left_sidebar layout.
- My biggest tip with CSS in general is try to avoid using IDs in your styling, try to use classes where possible. There's no harm as such in having IDs in your markup, as they can be handy for javascript purposes, but I'd recommend being conservative when it comes to USING them for actual styling purposes. I won't go into detail here exactly why I'm suggesting this, but it all comes down to IDs being much more 'specific' in terms of targeting than classes ('specificity'). This is one of the best things I've learnt/understood to help make my CSS more manageable.
- Try your best to be consistent with your class naming conventions, or at least try to be consistent within your theme/project. For example, anytime we create a div that is purely to wrap a section (maybe for something like a background colour), we tend to affix '-wrapper', so we have things like 'main-wrapper', 'footer-wrapper', etc. Then when we're looking back at something we can instantly see that these elements and styles are broad containers. The same goes for custom blocks, I like to put a div around what they output and name it the same as the block.. So just say I have a testimonial block: I'll wrap the output with the class of 'testimonial-block', and then give classes to things within it, such as 'testimonial-title', 'testimonial-quote', 'testimonial-author'. This means I can directly target that block for styling.
In terms of CSS, I'm really just repeating advice fromhttp://smacss.com/ - I'd HIGHLY recommend reading this, it really helps to understand the nuances of CSS and many best practices.
I know you've asked about best practices for creating themes for concrete5, but it really just comes down to the same best practices you'd use for styling any HTML site.
Thank you Grosik and Mesuva!
Those answers were both really helpfull :-)
I'll study the material in the links you send and probably be back later on during my project with more questions! :P
Those answers were both really helpfull :-)
I'll study the material in the links you send and probably be back later on during my project with more questions! :P
long story short ;) :
Divs or section/article/aside/main and so on are for your choice, depends if you write html4 or html5 document. The same situation is usage of #IDs and .classes - names are your own decision, but remind that some plugins or functionalities requires specific name.
f.e. if you are using bootstrap buttons, you have predefinied classes, but if you makre your own css button, class name choice is on your own (same thing on IDs)
your #3 question answer is:
http://www.concrete5.org/documentation/introduction/block-architect...
http://www.concrete5.org/documentation/introduction/template-and-th...
http://www.concrete5.org/documentation/introduction/overrides/...
I think this will help. Don't hesitate to ask more !