CSS Guidelines

A small CSS (SCSS) guidelines for the project.

See also:

• https://developer.gnome.org/gtk3/stable/chap-css-overview.html
• https://developer.gnome.org/gtk3/stable/chap-css-properties.html

Indentation

Indent by 2 spaces at a time. Don’t use tabs.

Example:

.demo {
  box-shadow: 0 1px 1px rgba(black, 0.1);
  background-image: linear-gradient(to bottom, transparent, rgba(black, 0.1));
}

// If a value is very long:
.demo {
  box-shadow:
    0 1px 1px rgba(black, 0.1),
    0 1px 2px rgba(black, 0.2),
    0 1px 3px rgba(black, 0.3);
  background-image:
    linear-gradient(
      to bottom,
      transparent,
      rgba(black, 0.1) 30%,
      rgba(black, 0.2) 50%,
      rgba(black, 0.3)
    ),
    linear-gradient(
      to right,
      transparent,
      rgba(black, 0.1) 30%,
      rgba(black, 0.2) 50%,
      rgba(black, 0.3)
    );
}

Declaration Order

Draw from outside to inside based on the idea of the box model.

TODO: transition and animation should be moved to bottom?

General Properties

• opacity
• transition
  • transition-property
  • transition-duration
  • transition-timing‑function
  • transition-delay
• animation
  • animation-name
  • animation-duration
  • animation-timing‑function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill‑mode
  • animation-play‑state

Sizing Properties

• min-height
• min-width
• margin
  • margin-top
  • margin-bottom
  • margin-left
  • margin-right
• padding
  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

Border and Border-like Properties

• border
  • border-style
  • border-width
  • border-color
• border-image
  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-repeat
• border-radius
  • border‑top‑left‑radius
  • border‑top‑right‑radius
  • border‑bottom‑left‑radius
  • border‑bottom‑right‑radius
• outline
  • outline-style
  • outline-width
  • outline-color
• outline-offset
• -gtk-outline-radius
  • -gtk‑outline‑top‑left‑radius
  • -gtk‑outline‑top‑right‑radius
  • -gtk‑outline‑bottom‑left‑radius
  • -gtk‑outline‑bottom‑right‑radius
• box-shadow

Background Properties

• background
  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-size
  • background-origin
  • background-clip

Text and Icon Properties

• color
• text-decoration
  • text-decoration-line
  • text-decoration-style
  • text-decoration-color
• text-shadow
• font
  • font-style
  • font-weight
  • font-size
  • font-family
• -gtk-icon-source
• -gtk-icon-style
• -gtk-icon-effect
• -gtk-icon-transform
• -gtk-icon-shadow

Text Caret Properties

• caret-color
• -gtk-secondary-caret-color