Yumma CSS 3.0 — All new CLI, utilities, and more 🎉

Stylecent

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

Box sizing

Apply a modern box model and remove browser defaults to simplify layout consistency.

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 rendering and readability with base styles for the <body>.

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

Ensure responsive images and videos behave predictably in all layouts.

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

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

Form Elements

Normalize form controls for visual consistency and better accessibility.

Reset background and border styles for form elements.
Use inherit to ensure font consistency within forms.
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

Improve text rendering, wrapping, and default font behavior across browsers.

Avoid text overflows.
Improve line wrapping for headings.
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 styles for a cleaner and more customizable base.

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

Tables

Standardize table header styling for better readability.

Add a consistent font weight for bold text.

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

Miscellaneous

Fix minor browser quirks and improve default styles for common elements.

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 specific styles, you can use the buildOptions.reset option and set it to false in your configuration file.