Style Sheet for Web Palma Projects

This guide contains all the basic text styles used throughout the website to ensure uniformity and successful structure. Before starting with this guide, you should add the project's color palette and the fonts to be used. Before starting to use them, you should configure responsive mode.

Rules of Use

  1. All texts must start with one of the classes in the style sheet.
  2. There should not be any combo class of size, position or margin. If required it should be placed inside a DivBlock.
  3. Every title/subtitle must have the H# category to which it belongs.
  4. There can be several alternatives of the same H, as long as they are in this style sheet.

Rules of Use

(Class H#) (Alignment) (Color)
(PW H#) (Color)

Define color palette

This color palette must be added directly to the panel, this section is purely an example.

Heading classes

H1

H2

H3

H4

H5
H6

Example

H1 (Center)(Color)

H5 (Center)

Paragraph Classes

Paragraph: Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Paragraph (center) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Paragraph (right) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Recommendations: If you can edit the standard/primary class of the paragraph or the body, to avoid some things that you know you are not going to change, it is better to create the class. I leave screenshots. In fact, if you look closely, in the "Paragraph" class, do not modify anything.

Many of the sizes depend on the fonts, some are larger and others are smaller.

Images

Recommendations: They will only exist two image classes (one of them with subclasses), except if you want it with a background with a fix effect. EYE, here we look at the class of the image but not the container of this

image_contain

image_cover

image_cover(Top)

image_cover(Bot)

image_cover

image_cover(left)

image_cover(right)

Icons

Technically the same image classes are used, but the size is determined by the containing frame/div.

Icon < image_contain

Icon (small)< image_contain

Buttons

Here you will include your own buttons, there is not much to say here, we all usually customize the buttons for each project from animations to something more classic.

We must have at least 2 buttons and I give you an idea of subclasses that I usually use

Have a button for light backgrounds

Button Text

Others for dark backgrounds

Button Text

button(space)

Button with larger top margin

Button Text

Sections

Here I created colored sections (you will have to delete these subclasses once copied) so that you can distinguish the differences. The use of these 3 is mandatory, you can add specific subclasses. Here are some examples:

Section (Entrance): A section that has more padding at the top because the menu takes up space or it may be smaller 50vh -70vh

Section (Home): It may have a different alignment, and more padding on top, and it may have a specific height 70 vh _120 vh etc.

Clarifications:

1. These sections have vertical alignment, if you want to add elements that are centered in front/parallel it is necessary to use a horizontal container that is located right here

2. They are in relative with a z-index value of "1" In case you want to include elements at all and not have them explode

3. All sections have a top and bottom padding of 10 vh and a 5vw padd on left and right

4. Never give it a width of 100vw this causes the bottom scroll bar to appear

Section_100

This section aligns elements vertically centered and has a height of 100vh. Possibly in responsive you should leave the height in automatic, this will depend on the amount of content

Section_100 (Auto)

This section also aligns elements vertically centered and maintains a measurement minimum of 100 vh, but what this subclass allows is that in case the content takes up more space, it does not overflow and continues to "grow"

Section_auto

This section is fully automatic in case the content does not require a space greater than 100 vh, in that case we would use the superior subclass

Extra

Try to take advantage of the clean modified classes as much as you can, in this case I did not need to create classes for "List" and "List Item" but I did need to modify the parent/main class.