Stylecent

Stylecent is a set of styles for Yumma CSS projects, meant for consistent design across browsers.

Note

Stylecent is totally optional. If you don’t need its all-opined reset rules, you can always use the core versions. If you want to know more about the CSS options, you can find out here.

Universal selector

Ensures consistent box sizing behavior across all elements.

*,
*::before,
*::after {
  border-width: 0;
  border-style: solid;
  box-sizing: border-box;
}

* {
  margin: 0;
  color: inherit;
  font-family: $yma-system-fonts;
}

Media elements

Ensures images, videos, and other media elements are responsive by default.

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

Form elements

Applies consistent font styles to form elements for better integration with the page.

input,
button,
textarea,
select {
  font: inherit;
}

Text wrapping

Ensures long text content wraps appropriately within elements.

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

Link decoration

Removes default text decoration from links for cleaner appearance.

a {
  text-decoration: none;
}

List normalization

Removes default padding and list-style from ordered and unordered lists.

ol,
ul {
  padding: 0;
  list-style: none;
}

Horizontal rule

Applies a subtle border to horizontal rules for visual separation.

hr {
  border: 0;
  margin: 1em 0;
  border-top: $yma-colors-transparent;
}