Website layout basics

General
#1

Im looking for some basic instruction, a resource, ideally graphics, which depict website page layout terms and definitions so that when designing/editing a layout im not so much conducting trial and error. When scrolling thru the list of elements to adjust I would like to have a basic understanding of what to look for, before making the adjustment and what I can expect to see after. For example when designing a page template, just under Masthead there are the options to adjust various elements in Identity, Top pallet Title, Primary Mast Head and Title/Logo. In more than one of these elements there is an option to adjust font.

I don’t want to be a webmaster, but I don’t want to spend hours trying to make a minor adjustment either.

So looking for a good, concise resource to refer to for creating websites ideally closely related to Blacklight.

#2

There’s no explicit guide to Backlight layouts.
What has helped me is to create a test page using a test Page Template.
Change the colors in the various areas, like Top Pallet, Masthead, navigation background, copy area, etc.

Back in the CE4 days I created a layout guide in my TTG Tips site
I’ve started working on something similar for Backlight. Backlight has so many more layout options that making such a guide is more challenging.

#3

Thanks Rod. I have been doing that, but admittedly looking for the “easy button”, a resource I could could have next to my keyboard to help expedite things. There is tons of stuff on the web, but nothing I have found so far that mirrors BL closely.

#4

I try to keep to using standardized CSS terms for many of the adjustments, where makes sense. So for things like “font-size”, “font-family” and “font-weight” for example, you can look them up in any CSS documentation. Same for margin, padding, borders, max-width, etc. This is intentional, of course, allowing us to piggy-back on existing documentation, or existing knowledge that one might possess if they’ve been previously exposed.

We do drift was from standard terms where things are less clearly defined, or when our design concepts outpace such basic definitions. Checkout this blog post on the mastheads; not only does it get through masthead design pretty thoroughly, but I think it’s a good starting point for understanding how Backlight’s designer operates.