search

mblode / marx

The classless CSS reset (perfect for Communists).
https://mblode.github.io/marx/
MIT License
1.69k stars 101 forks source link

Extends using css variables [feature] #37

Closed yne closed 2 years ago

yne commented 5 years ago

Do you plan on adding CSS variables to customize Marx ?

I don't know how it would play along with the current styl/scss building workflow but this would allow to use a vanilla marx.css (from a CDN for example) while being able to change 1 or 2 of things.

<link  href="https://cdnjs.cloudflare.com/ajax/libs/marx/3.0.3/marx.min.css" rel="stylesheet">
<style>
:root {
  --primary: #008512;
  --link-color: #1a9f60;
}
</style>

see: https://jenil.github.io/chota/#customizing

Click to see Marx with CSS Variables ```css /* Marx + Variables POC */ :root { --xs-pad: 4px; --sm-pad: 8px; --md-pad: 16px; --lg-pad: 20px; --xlg-pad: 40px; --primary: #007bff; --hover: #0069d9; --white: #fff; --grey: #eee; --link: #0062cc; --hilight: #ffeb3b; --text: rgba(0, 0, 0, 0.8); --secondary: rgba(0, 0, 0, 0.54); --disabled: rgba(0, 0, 0, 0.38); --dividers: rgba(0, 0, 0, 0.12); --font-size-base: 16px; --font-size-small: 14px; } /*! Marx v3.0.0 - The classless CSS reset (perfect for Communists) | MIT License | https://github.com/mblode/marx */ main, header, footer, article, section, aside, details, summary { margin: 0 auto; margin-bottom: var(--md-pad); width: 100%; } main { display: block; margin: 0 auto; max-width: 768px; padding: 0 var(--md-pad) var(--md-pad); } footer { border-top: 1px solid var(--dividers); clear: both; display: inline-block; float: left; max-width: 100%; padding: var(--md-pad) 0; text-align: center; } footer p { margin-bottom: 0; } hr { border: 0; border-top: 1px solid var(--dividers); display: block; margin-top: var(--md-pad); margin-bottom: var(--md-pad); width: 100%; -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } img { height: auto; max-width: 100%; vertical-align: baseline; } @media screen and (max-width: 400px) { article, section, aside { clear: both; display: block; max-width: 100%; } img { margin-right: var(--md-pad); } } embed, iframe, video { border: 0; } body { color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: var(--font-size-base); line-height: 1.5; } p { margin: 0; margin-bottom: var(--md-pad); } h1, h2, h3, h4, h5, h6 { color: inherit; font-family: inherit; line-height: 1.2; font-weight: 500; } h1 { font-size: var(--xlg-pad); margin: var(--lg-pad) 0 16px; } h2 { font-size: 32px; margin: var(--lg-pad) 0 16px; } h3 { font-size: 28px; margin: 16px 0 var(--xs-pad); } h4 { font-size: 24px; margin: 16px 0 var(--xs-pad); } h5 { font-size: var(--lg-pad); margin: 16px 0 var(--xs-pad); } h6 { font-size: 16px; margin: 16px 0 var(--xs-pad); } small { color: var(--secondary); vertical-align: bottom; } pre { background: var(--grey); color: var(--text); display: block; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: var(--font-size-base); margin: var(--md-pad) 0; padding: var(--md-pad); white-space: pre-wrap; overflow-wrap: break-word; } code { color: var(--text); font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: var(--font-size-base); line-height: inherit; margin: 0; padding: 0; vertical-align: baseline; word-break: break-all; word-wrap: break-word; } a { color: var(--primary); text-decoration: none; background-color: transparent; } a:hover, a:focus { color: var(--link); text-decoration: underline; } dl { margin-bottom: var(--md-pad); } dd { margin-left: var(--xlg-pad); } ul, ol { margin-bottom: var(--sm-pad); padding-left: var(--xlg-pad); vertical-align: baseline; } blockquote { border-left: 2px solid var(--text); font-family: Georgia, Times, "Times New Roman", serif; font-style: italic; margin: var(--md-pad) 0; padding-left: var(--md-pad); } figcaption { font-family: Georgia, Times, "Times New Roman", serif; } u { text-decoration: underline; } s { text-decoration: line-through; } sup { font-size: var(--font-size-small); vertical-align: super; } sub { font-size: var(--font-size-small); vertical-align: sub; } mark { background: var(--hilight); } input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="date"], input[type="month"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="week"], input[type="number"], input[type="search"], input[type="tel"], input:not([type]), select, textarea { background: var(--white); background-clip: padding-box; border: 1px solid var(--dividers); border-radius: var(--xs-pad); color: var(--text); display: block; width: 100%; padding: var(--sm-pad) var(--md-pad); line-height: 1.5; -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } input[type="color"] { background: var(--white); border: 1px solid var(--dividers); border-radius: var(--xs-pad); display: inline-block; vertical-align: middle; } input:not([type]) { -webkit-appearance: none; text-align: left; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, input:not([type]):focus, select:focus, textarea:focus { background-color: var(--white); border-color: #80bdff; outline: 0; -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: 1px thin var(--dividers); } input[type="text"][disabled], input[type="password"][disabled], input[type="email"][disabled], input[type="url"][disabled], input[type="date"][disabled], input[type="month"][disabled], input[type="time"][disabled], input[type="datetime"][disabled], input[type="datetime-local"][disabled], input[type="week"][disabled], input[type="number"][disabled], input[type="search"][disabled], input[type="tel"][disabled], input[type="color"][disabled], input:not([type])[disabled], select[disabled], textarea[disabled] { background-color: var(--dividers); color: var(--secondary); cursor: not-allowed; opacity: 1; } input[readonly], select[readonly], textarea[readonly] { border-color: var(--dividers); color: var(--secondary); } input:focus:invalid, textarea:focus:invalid, select:focus:invalid { border-color: #ea1c0d; color: #f44336; } input[type="file"]:focus:invalid:focus, input[type="radio"]:focus:invalid:focus, input[type="checkbox"]:focus:invalid:focus { outline-color: #f44336; } select { -webkit-appearance: menulist-button; border: 1px solid var(--dividers); vertical-align: sub; } select:not([size]):not([multiple]) { height: -webkit-calc(2.25rem + 2px); height: calc(2.25rem + 2px); } select[multiple] { height: auto; } label { display: inline-block; line-height: 2; } fieldset { border: 0; margin: 0; padding: var(--sm-pad) 0; } legend { border-bottom: 1px solid var(--dividers); color: var(--text); display: block; margin-bottom: var(--sm-pad); padding: var(--sm-pad) 0; width: 100%; } textarea { overflow: auto; resize: vertical; } input[type=checkbox], input[type=radio] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; display: inline; } input[type=submit], input[type=reset], input[type=button], button { background-color: var(--primary); border: var(--primary); border-radius: var(--xs-pad); color: var(--white); padding: var(--sm-pad) var(--md-pad); display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; font-size: 1rem; line-height: 1.5; -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; } input[type=submit]::-moz-focus-inner, input[type=reset]::-moz-focus-inner, input[type=button]::-moz-focus-inner, button::-moz-focus-inner { padding: 0; } input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, button:hover { background-color: var(--hover); border-color: var(--hover); color: var(--white); } input[type=submit]:not(:disabled):active, input[type=reset]:not(:disabled):active, input[type=button]:not(:disabled):active, button:not(:disabled):active { background-color: var(--hover); border-color: var(--hover); color: var(--white); } input[type=submit]:focus, input[type=reset]:focus, input[type=button]:focus, button:focus { outline: 0; -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); } input[type=submit]:disabled, input[type=reset]:disabled, input[type=button]:disabled, button:disabled { opacity: .65; cursor: not-allowed; background-color: var(--primary); border-color: var(--primary); color: var(--white); } table { border-top: 1px solid var(--dividers); margin-bottom: var(--md-pad); } caption { padding: var(--sm-pad) 0; } thead th { border: 0; border-bottom: 2px solid var(--dividers); text-align: left; } tr { margin-bottom: var(--sm-pad); } th, td { border-bottom: 1px solid var(--dividers); padding: var(--md-pad); vertical-align: inherit; } tfoot tr { text-align: left; } tfoot td { color: var(--secondary); font-size: var(--sm-pad); font-style: italic; padding: var(--md-pad) var(--xs-pad); } ```
mblode commented 2 years ago

Fixed in v4.0.0. You can do:

<link  href="https://unpkg.com/marx-css/css/marx.min.css" rel="stylesheet">
<style>
:root {
  --primary: #008512;
  --link-color: #1a9f60;
}
</style>