XF 2.1 A few beginner styling questions

[Alternadiv]

I've been messing with the CSS/HTML on my local dev site to learn XF styling and CSS/HTML in general. I have a few questions related to styling.

1. When creating your own fully custom style, is the common practice to:

• edit the default templates for CSS and HTML with your own code
• edit CSS using extra.less and edit HTML in the default templates
• add your own CSS templates and link them in the default HTML templates
• still editing HTML in the default templates
• or add your own CSS and HTML templates so they are completely separate from the defaults

2. Is it common practice to enable dev mode on live sites to be able to use it to your advantage? Or is it suggested to only use dev mode on test sites?

3. I've been messing with header styling. In this mock-up, do you think it would be possible to achieve the drop down area under the truck with CSS and/or HTML? If so, how would you approach it? I don't really need exact code as I'm sure I'll eventually figure it out if it is actually feasible.

 

[Ozzy47]

Don’t enable dev mode on your live site.

 

[Alternadiv]

Don’t enable dev mode on your live site.

I figured. Any input on the other stuff?

 

[Russ]

For styles that you have no intention of redistributing (creating one for your own site):

• Use extra.less, no point in editing existing less files
• Editing HTML templates is fine, obviously, the more you edit the higher chance you'll have of outdated templates on a future update. PAGE_CONTAINER houses the bulk of the layout so it's kind of hard to avoid editing this if you plan on changing the structure of the layout at all
• You can break up large chunks of HTML or CSS into their own templates or keep them in existing ones, it's all preference.

 

[Alternadiv]

For styles that you have no intention of redistributing (creating one for your own site):

• Use extra.less, no point in editing existing less files
• Editing HTML templates is fine, obviously, the more you edit the higher chance you'll have of outdated templates on a future update. PAGE_CONTAINER houses the bulk of the layout so it's kind of hard to avoid editing this if you plan on changing the structure of the layout at all
• You can break up large chunks of HTML or CSS into their own templates or keep them in existing ones, it's all preference.

Thanks, I was hoping to hear from you (even though I already asked you a very similar question).

I was doing my research on optimizing code for website load times and such so I figured the options it my first post would matter for that.

What is your impression of trying to code that header? Do you think it can at least be done?