Best Practices for CSS and Templates?

[SurferJon]

Hi,

I run a Pokemon fan website and have a listing of Pokemon products that have been released each month. So I'll have a page on 2017's products with each H2 showing a month ("May 2017") and then each product released in that month under the header. Each product listing shows the product's image, release date, price, etc.

So to display a month's worth of products under each H2 header, I have a "product header" template that starts the div HTML for that month and calls up the CSS to display the products, then each "product item" template, then a closing "product footer" template that closes the div. So it's something like: "product header" template, "product item" template for product #1, "product item" template for product #2, "product item" template for item #3, and then the closing "product footer" template.

Now here's my questions:

1. The "product header" template is what starts up the div for each month and calls up the CSS for the product display. If you're making a template, would you store the CSS directly in that template? Do you put the CSS somewhere else in Vaultwiki? Do you call up the CSS via a style tag and put the CSS file on the server? What's the best way to do this?

2. Now here's my other problem. The "product" CSS is called up 12 times on each year's product page because it's called up every single time under every single month. Is this how it should work? Shouldn't Vaultwiki only allow it to be called up once?

Basically I'm just trying to figure out how to organize my wiki before it opens to the public so that we're doing things correctly. A big wiki can get very messy very quickly, so I want to understand what's the best way to work on templates, store their CSS, etc., especially when there will be hundreds of templates.

Thank you!

[pegasus]

For repeating styles, use CSS classes instead of inline styles. Make sure you edit the DIV BB-Code's options and add your classes to its whitelist of allowed classes.

You can add these custom classes to your forum style's vw_additional.css template.

[SurferJon]

Make sure you edit the DIV BB-Code's options and add your classes to its whitelist of allowed classes.

Thanks for the quick reply, pegasus!

I'm confused as to what this means, could you explain it more?

Should I be using some kind of DIV BB Code instead of HTML? I've been using pure HTML in my templates. (<div class="product"></div>)

[pegasus]

VaultWiki has a built-in DIV BB-Code, but if you're using pure HTML, then you don't need to perform any whitelisting.

[Forsaken]

Thanks for the quick reply, pegasus!

I'm confused as to what this means, could you explain it more?

Should I be using some kind of DIV BB Code instead of HTML? I've been using pure HTML in my templates. (<div class="product"></div>)

[div] class="wiki-list" |
[div] class="row flex-dir-row-reverse dragon-template" |

	[div] class="small-12 medium-12 large-3 columns wiki-block" |
		[div] class="block-background" |
			[div] class="key-information" |
				[div] class="heading" | {{{dragonName}}}[/div]
				[div] class="image-block" | {{{dragonImage}}}[/div]
				[div] class="key-header" | Vital Information [/div]
				[div] class="information-lists" |
					[dl]
						[dt]Level[/dt]
						[dd]{{{dragonLevel}}}[/dd]
					[/dl]
					[dl]
						[dt]Zone[/dt]
						[dd]{{{dragonZone}}}[/dd]
					[/dl]
					[dl]
						[dt]Region[/dt]
						[dd]{{{spawnRegion}}}[/dd]
					[/dl]
					[dl]
						[dt]Family[/dt]
						[dd]{{{dragonFamily}}}[/dd]
					[/dl]
					[if={{{canRun|}}}==true]
					[dl]
						[dt]Running Speed[/dt]
						[dd]{{{runningSpeed}}}[/dd]
					[/dl]
					[else /]
					[/if]
					[if={{{canSwim|}}}==true]
					[dl]
						[dt]Swimming Speed[/dt]
						[dd]{{{swimmingSpeed}}}[/dd]
					[/dl]
					[else /]
					[/if]
					[if={{{canFly|}}}==true]
					[dl]
						[dt]Flight Speed[/dt]
						[dd]{{{flightSpeed}}}[/dd]
					[/dl]
					[else /]
					[/if]
					[if={{{canGlide|}}}==true]
					[dl]
						[dt]Gliding Speed[/dt]
						[dd]{{{glidingSpeed}}}[/dd]
					[/dl]
					[else /]
					[/if]
					[if={{{wildDragon|}}}==true]
					[dl]
						[dt]Wild HP[/dt]
						[dd]{{{wildHP}}}[/dd]
					[/dl]
					[else /]
					[/if]
					[if={{{hasTitle|}}}==true]
					[dl]
						[dt]Title[/dt]
						[dd]{{{dragonTitle}}}[/dd]
					[/dl]
					[else /]
					[/if]
					[if={{{companionSupport|}}}==true]
					[dl]
						[dt]Companion Support[/dt]
						[dd]{{{supportValue}}}[/dd]
					[/dl]
					[else /]
					[/if]
				[/div]
				[if={{{hasSpawnLocation|}}}==true]
					[div] class="heading" | Spawn Location[/div]
					[div] class="image-block" |{{{spawnLocation}}}[/div]
				[else /]
				[/if]
				[if={{{hasSpawnTable|}}}==true]
					[div] class="key-header" | Spawn Calendar[/div]
					[div] class="information-lists" |
						{{{spawnTable}}}
					[/div]
				[else /]
				[/if]
				[if={{{hasSpawnTimes|}}}==true]
					[div] class="information-lists" |
						[div] class="primaryContent" |
							{{{spawnTimes}}}
						[/div]
					[/div]
				[else /]
				[/if]
			[/div]
		[/div]
	[/div]
	[div] class="small-12 medium-12 large-9 columns wiki-block main-column" |
		[div] class="block-background" |
			[div] class="heading" | Dragon Description [/div]
				[div] class="primaryContent" |
					{{{dragonDescription}}}
				[/div]
			[div] class="heading" | Dragon Compendium [/div]
				[div] class="primaryContent" |
					{{{dragonCompendium}}}
				[/div]
			[if={{{hasObtainGuide|}}}==true]
				[div] class="heading js-expandmore" | Obtaining Guide [/div]
				[div] id="captureGuide" class="js-to_expand" |
					[div] class="key-header" | How to Obtain {{{dragonName}}}[/div]
						[div] class="primaryContent" |
							{{{obtainDescription}}}
						[/div]
				[/div]
			[else /]
			[/if]
			[div] class="heading js-expandmore" | Quick Guide [/div]
			[div] id="quickGuide" class="js-to_expand is-opened" |
				[div] class="key-header" | Location [/div]
				[div] class="primaryContent" |
					[dl]
						[dt]Zone Ancient[/dt]
						[dd]
							[if={{{isZoneAncient|}}}==true]
								{{{zoneAncient}}}
							[else /]
								No
							[/if]
						[/dd]
					[/dl]
					[dl]
						[dt]Dungeon Ancient[/dt]
						[dd]
							[if={{{isDungeonAncient|}}}==true]
								{{{dungeonAncient}}}
							[else /]
								No
							[/if]
						[/dd]
					[/dl]
					[dl]
						[dt]Roaming Ancient[/dt]
						[dd]
							[if={{{isRoamingAncient|}}}==true]
								{{{roamingAncient}}}
							[else /]
								No
							[/if]
						[/dd]
					[/dl]
				[/div]
				[div] class="key-header" | Flutes [/div]
				[div] class="primaryContent" |
					[dl]
						[dt]Melodic / Resonating Flutes[/dt]
						[dd]
							[if={{{isMelodicFlute|}}}==true]
								{{{melodicFlute}}}
							[else /]
								No
							[/if]
						[/dd]
					[/dl]
					[dl]
						[dt]Other Dragon Flutes[/dt]
						[dd]
							[if={{{isOtherFlute|}}}==true]
								{{{otherFlute}}}
							[else /]
								No
							[/if]
						[/dd]
					[/dl]
				[/div]
				[div] class="key-header" | Marketplace [/div]
				[div] class="primaryContent" |
					[dl]
						[dt]Egg[/dt]
						[dd]
							[if={{{isMarketEgg|}}}==true]
								{{{marketEgg}}}
							[else /]
								No
							[/if]
						[/dd]
					[/dl]
					[dl]
						[dt]Gacha[/dt]
						[dd]
							[if={{{isMarketGacha|}}}==true]
								{{{marketGacha}}}
							[else /]
								No
							[/if]
						[/dd]
					[/dl]
					[dl]
						[dt]Other Purchases[/dt]
						[dd]
							[if={{{isMarketPurchase|}}}==true]
								{{{marketPurchase}}}
							[else /]
								No
							[/if]
						[/dd]
					[/dl]
				[/div]
				[div] class="key-header" | Other [/div]
				[div] class="primaryContent" |
					[dl]
						[dt]Special Process[/dt]
						[dd]
							[if={{{isSpecialProcess|}}}==true]
								{{{specialProcess}}}
							[else /]
								No
							[/if]
						[/dd]
					[/dl]
					[dl]
						[dt]Special Reward[/dt]
						[dd]
							[if={{{isSpecialReward|}}}==true]
								{{{specialReward}}}
							[else /]
								No
							[/if]
						[/dd]
					[/dl]
					[dl]
						[dt]Dragon Incubation[/dt]
						[dd]
							[if={{{isDragonIncubation|}}}==true]
								{{{dragonIncubation}}}
							[else /]
								No
							[/if]
						[/dd]
					[/dl]
				[/div]
			[/div]
			[if={{{hasGallery|}}}==true]
				[div] class="key-header" | {{{dragonName}}} Gallery[/div]
				{{{dragonGallery}}}
			[else /]
			[/if]
			[if={{{hasTrivia|}}}==true]
				[div] class="key-header" | {{{dragonName}}} Trivia[/div]
				{{{dragonTrivia}}}
			[else /]
			[/if]
		[/div]
	[/div]
[/div]
[/div]

This isn't a modular template, but one for a full page that is re-used repeatedly and has a specific design.