Stylecent

Stylecent is an optional set of styles for Yumma CSS projects, meant for consistent and modern appearance across browsers.

Box sizing

Use a more intuitive box-sizing model to make the design consistent.
Remove default margin and padding.
Reset default border styles.

*,
*::before,
*::after {
  box-sizing: border-box; /* 1 */
  border: 0 solid; /* 3 */
}

* {
  margin: 0; /* 2 */
  padding: 0; /* 2 */
}

Document

Improve font smoothing.
Set a default system font.
Add accessible line-height.

body {
  -webkit-font-smoothing: antialiased; /* 1 */
  font-family: vars.$yma-font-system; /* 2 */
  line-height: 1.5; /* 3 */
}

Media Elements

1. Ensure all media elements like images, videos, and canvases are block-level.
1. Limit their maximum width to the parent container.

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

Form Elements

1. Reset background and border styles for form elements.
1. Use inherit to ensure font consistency within forms.
1. Add default padding for usability.

button,
input,
optgroup,
select,
textarea {
  background-color: vars.$yma-color-transparent; /* 1 */
  font-family: inherit; /* 2 */
  padding: 0.5rem; /* 3 */
}

Add a default border to form elements that do not have a class attribute.

button:not([class]),
input:not([class]),
optgroup:not([class]),
select:not([class]),
textarea:not([class]) {
  border: 1px solid vars.$yma-color-silver; /* 1 */
}

Apply consistent focus styles to interactive elements.

a,
button,
input,
select,
summary,
textarea {
  &:focus {
    outline: 2px solid vars.$yma-color-transparent;
  }
}

Set a minimum height for textareas without a defined rows attribute.

textarea:not([rows]) {
  min-height: 10em;
}

Ensure the buttons have a pointer cursor.

button {
  cursor: pointer;
}

Disabled States

Reduce opacity and set a “not-allowed” cursor for disabled elements.

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed; /* 1 */
  opacity: 0.5; /* 1 */
}

Typography

1. Avoid text overflows.
1. Improve line wrapping for headings.
1. Add a consistent font weight for bold text.

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1rem; /* 3 */
  font-weight: 600; /* 3 */
  text-wrap: balance; /* 2 */
}

p {
  text-wrap: pretty; /* 2 */
}

Add the correct font weight in Chrome, Edge, and Safari.

b,
strong {
  font-weight: 700;
}

Add the correct font size in all browsers.

small {
  font-size: 80%;
  line-height: 1.5;
}

Correct the inheritance and scaling of font size in all browsers.
Correct the odd em font sizing in all browsers.

pre,
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

Remove underline styling from links by default.
Reset color to inherit from parent element.

a {
  color: inherit; /* 3 */
  text-decoration: none; /* 1 */
}

Lists

Remove default list styling and padding.

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

Tables

Add a consistent font weight for bold text.

th {
  font-size: 1rem; /* 1 */
  font-weight: 600; /* 1 */
}

Miscellaneous

Add the correct height in Firefox.
Correct text decoration.
Add spacing around horizontal rules.

hr {
  border-top: 1px solid vars.$yma-color-silver; /* 2 */
  height: 0; /* 1 */
  margin: 1em 0; /* 3 */
}

Ensure details and summary elements display correctly.

details {
  display: block;
}

summary {
  display: list-item;
}

Disabling Stylecent

To disable Stylecent completely, simply add the buildOptions.reset option and set it to false in your yumma.config.js file.

export default {
  buildOptions: {
    reset: false, // default: true
  },
};