DOM Reset, a collection of element-specific CSS changes in a single file, kickstarts Phenix to provide an elegant, consistent, and simple baseline to build upon.
Reset builds upon Normalize.css, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <table> styles for a simpler baseline and later provide .table, .table-bordered, and more.
Here are our guidelines and reasons for choosing what to override in Reboot:
rems instead of ems for scalable component spacing.margin-top. Vertical margins can collapse, yielding unexpected results. More importantly, though, a single direction margin is a simpler mental model.rems for margins.fontrelated properties to a minimum, using inherit whenever possible.<h1>—<h6> and <p> are reset to have them margin-top removed. Headings have margin-bottom: .5rem added and paragraphs margin-bottom: 1rem for easy spacing.<ul>, <ol>, and <dl>—have their margin-top removed and a margin-bottom: 1rem. Nested lists have no margin-bottom. We’ve also reset the padding-left on <ul> and <ol> elements.The <html> and <body> elements are updated to provide better page-wide defaults. More specifically:
box-sizing is globally set on every element—including ::before and ::after, to border-box. This ensures that the declared width of the element is never exceeded due to padding or border.<body> also sets a global font-family, font-weight, line-height, and color. This is inherited later by some form elements to prevent font inconsistencies.[hidden]HTML5 adds a new global attribute named [hidden], which is styled as display: none by default. and to improve upon this default by making [hidden] { display: none !important; } to help prevent its display from getting accidentally overridden.
the font-family is applied to the <body> and automatically inherited globally throughout Phenix DS. To switch the font-family, update :root css variable for --primary-font and --secondary-font and change --icons-font variable to use your favorite font icon, with those custom font families there is a fallback for the default operation systems emoji icons font families.
:root {
/*==== Font Families ====*/
--primary-font : 'Roboto'; /*===> Headlines */
--secondary-font : 'Roboto'; /*===> Global Text */
--icons-font: "Font Awesome 5";
/*==== Font Weight ====*/
--normal-weight: 400;
--medium-weight: 500;
--strong-weight: 700;
/*==== Standard Line-Height ====*/
--line-height: 1.625;
}