mblode / marx Goto Github PK

View Code? Open in Web Editor NEW

1.7K 29.0 103.0 1.08 MB

The classless CSS reset (perfect for Communists).

Home Page: https://mblode.github.io/marx/

License: MIT License

JavaScript 2.63% CSS 63.65% HTML 33.73%

marx css html bower gh-pages

marx's Introduction

Marx

The classless CSS reset (perfect for Communists).

No JavaScript. No Classes. Just raw CSS.

Is Marx for you?

Marx is a CSS stylesheet to be used in any projects (namely small ones). If you don't need the weight of heavy frameworks or you would just like to make an edible website quickly, Marx is perfect for you. It can be used out of the minified box but it can also be customised and styled through the use of HTML classes.

Key features

Built atop of Sanitize.css, meaning all browsers render consistently.
Responsive and mobile-friendly.
Clean, beautiful typography.
Forms, tables, buttons and navigation.
Zero classes, so it already works with your HTML.
Drop-dead gorgeous.
It just works.

Demo

Quick Start

Several quick start options are available:

Install with NPM: npm install marx-css (recommended).
Use the latest Marx CDN

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/marx-css/css/marx.min.css">

Source code.
Download the latest release.
Clone the repo: git clone https://github.com/mblode/marx.git.

If you have cloned the repo or downloaded from .zip, there are a few steps you must take within the terminal:

Change directory: cd marx.
Install node modules: npm install.
To run gulp: gulp.

Running Github Pages

The gh-pages branch is built using Jekyll and must therefore be install with gem install jekyll.

Checkout in to gh-pages: git checkout gh-pages.
Install marx dependency: npm install.
Run middleman: bundle exec middleman serve.
Open in browser: localhost:4567.

What's Included

These are the files that are generated from npm install marx-css


.
├── LICENSE.md
├── README.md
├── css
│   ├── marx.css
│   ├── marx.min.css
│   ├── marx.min.css.map
├── gulpfile.js
├── index.html
├── package.json
└── src
    ├── _base.css
    ├── _buttons.css
    ├── _form.css
    ├── _sanitize.css
    ├── _tables.css
    ├── _typography.css
    ├── _variables.css
    └── marx.css

Documentation

Basic HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Marx Template</title>

  <!-- Marx CSS -->
  <link rel="stylesheet" href="css/marx.min.css">
</head>

<body>
  <!-- main is the container -->
  <main>
    <!-- Navigation -->
    <nav>
      <ul>
        <li><a href="#"><b>First</b></a></li>
        <li><a href="#">Second</a></li>
        <li><a href="#">Third</a></li>
        <li><a href="#">Fourth</a></li>
      </ul>
    </nav>

    <!-- article -->
    <article>
      <h1>Article</h1>
    </article>

    <!-- aside -->
    <aside>
      <h1>Aside</h1>
    </aside>

    <!-- section -->
    <section>
      <h1>Section</h1>
    </section>

    <!-- footer -->
    <footer>
      <p>&copy; Matthew Blode</p>
    </footer>
  </main>

</body>
</html>

Contributing to Marx

Pull requests are the way to go.

Creators

Matthew Blode

License

MIT © Matthew Blode

marx's People

Contributors

Stargazers

Watchers

Forkers

coral jessman5 claudey subhajit007 ngoodmonson simaq vishalbasnet23 ashwin107 charliehawker jonnyninetoes ionlyseespots developervox davidjwiner brucewu16899 bronfman janusnic spittingtacks mrblaschke makenti kublaj yashilanka pulcix umarmughal pandroid mactkg truffo jpatsos eugeneross zhuziyi1989 fromb612 carabina snowman-repos sjclijie danrojas owlookit tanbencong cnlpete iarnaud paulwooddesign immortalin baa-archieve st7art22 bubblehub bondden razielsun hatruong28 brlrt duoduo369 ucdit carolineartz forfutureme blackmao hadeshacker johncomposed hashrock cacalot123 kijanawoodard joaorafaelm rhyanvargas owenreece yarwelp inoas artlantis volanstudio zhangguo5 jank2014 chengreatming theperfectwill atouhou fantasthu enddering sam019 karrygit fang0904 zard110 simon-coetzee fabiolima tuxmachine gurugeek huanglugirl veasin bonniss jasonshanks ykws axlevxa tawawhite odongohcoder laurentsirius devcode1981 easrng maelstrom-firebrand hacknlove neel dy grimalschi hachesilva-forks devnewton jbrudvik jdario9912

marx's Issues

textarea { display: block !important } is overly controlling

Is !important really necessary on the display property for textearea elements?

Fix link button styling

Describe the bug
Link buttons in the demo are using invalid HTML. Nesting buttons within links is invalid and semantically incorrect.

To Reproduce
The demo is using <a href="#"><button>Button Link</button></a> for link buttons.

Expected behavior
Valid HTML.

Additional context
I maintain a list of CSS frameworks where Marx is listed. Using valid HTML and proper semantics is a requirement to be listed.

overflow <pre>

Could we add:

overflow-wrap: break-word;

... to <pre/>?

The issue is with the default marx css I got issues like this:

aka the <pre/> block grows bigger than its encapsulating <main/> wants it to grow.

Input word-break issue in Safari

Text input values overflow onto two lines on Safari (tested 10.1.1) & iOS Safari (tested 13.1). Screenshot of current docs page in Safari 10.1.1:

$link-hover-color is not used

Describe the bug
Variable $link-hover-color is defined but never used. Instead, the default color for a:focus and a:hover is darken($primary, 10%), which doesn't depend on $link-color, and isn't even the default value of $link-hover-color.

Expected behavior
This variable should be used for a:hover and a:focus.

not clear which file to import ... @import "sanitize.css/sanitize"

I think I am using this in a very typical way with node-sass, but I am having to make a change to node_modules/marx-css/scss/marx.scss to get things to work.

from my package.json

"scripts": {
  "build-css": "node-sass src/scss/ -o public/css/ --include-path node_modules/",
}

copy/paste from error i get when using npm run build-css

"status": 1,
"file": "node_modules/marx-css/scss/marx.scss",
"line": 3,
"column": 1,
"message": "It's not clear which file to import for '@import\"sanitize.css/sanitize\"'.\nCandidates:\n  sanitize.css/sanitize.scss\n  sanitize.css/sanitize.css\nPlease delete or rename all but one of these files."

to make this work, i need to make a change in node_modules/marx-css/scss/marx.scss from

@import 'sanitize.css/sanitize';

@import 'sanitize.css/sanitize.scss';

and just for reference, here is an example of my index.scss

$primary: yellow;
@import 'marx-css/scss/marx.scss';

Can the @import line in marx.scss be changed to include the .scss extension? Thanks.

Style file inputs with ::file-selector-button/::-webkit-file-upload-button

Is your feature request related to a problem? Please describe.
I don't like how the default file inputs and buttons look, marx fixes input buttons and button tags, but not the "Choose File" button.

Describe the solution you'd like
I would like to add input[type=file]::-webkit-file-upload-button, input[type=file]::file-selector-button to the selectors for the button styles.

Describe alternatives you've considered
I am currently using JS to make buttons that .click() the file inputs, but then I have to do more work

Additional context
MDN has docs on this. I would send a PR myself, but it's not clear which files are the source files. Maybe add that to the contributing section?

Lacks more communism

ul {
  list-style-type: none;

  }
/*marx list*/
li::marker {
  color: crimson;
  content: '\262D  ';
}

Describe the solution you'd like
changes list style type to more communism

Describe alternatives you've considered
there are simply no alternatives, this is the best list-style-type for marx.css there is

Additional context
It's a joke, unless...
¯_(ツ)_/¯

Navbar like in the demo

The demo site has a navbar and the "key features" section mentions navigation, however the actual CSS file doesn't style the nav tag. It would be great to have this feature added.

Beautiful style thought.

Regarding Divs

Hi, I am pretty new to web development so forgive my ignorance but do you still need to use divs with this?

Nav tag outside body

Hello, minor nitpicking, in the documentation page the nav tag is outside body

marx/index.html

Line 7 in 66f4fe9

    
           </script> </head> <nav> <ul> <li> <a href="./" class=brand>Marx </a></li> <li class=active> <a href="./">Home </a></li> <li> <a href="documentation/">Docs </a></li> </ul> </nav> <body> <main> <center class=hero> <h1>Marx</h1> <h3 id=tagline>The classless CSS reset (perfect for Communists).</h3> <p>No JavaScript. No Classes. Just raw CSS. <br><small>11.1 kB / 3.7 kB (Gzip) minified.</small></p> <div> <a href="https://raw.githubusercontent.com/mblode/marx/master/css/marx.min.css" target=_blank id=download><button>Download</button></a> <a href="https://github.com/mblode/marx" target=_blank id=github><button>Github</button></a> </div> </center> <h3 id=is-marx-for-you>Is Marx for you?</h3> <p>Marx is a CSS stylesheet to be used in any projects (namely small ones). If you don't need the weight of heavy frameworks or you would just like to make an edible website quickly, Marx is perfect for you. It can be used out of the minified box but it can also be customised and styled through the use of HTML classes.</p> <h3 id=key-features>Key Features</h3> <ul> <li>Built atop of Sanitize.css, meaning all browsers render consistently.</li> <li>Customise using Sass and Stylus preprocessors.</li> <li>Responsive and mobile-friendly.</li> <li>Clean, beautiful typography.</li> <li>Forms, tables, buttons and navigation.</li> <li>Zero classes, so it already works with your HTML.</li> <li>Drop-dead gorgeous.</li> <li>It just works.</li> </ul> <p><a href="https://github.com/mblode/marx">For more info, check out Marx on Github.</a></p> <footer> <p>&copy; 2019 &middot; <a href="https://github.com/mblode/">Matthew Blode</a></p> </footer> </main> </body> </html>

Can't click links on demo page in Safari 8.0.5

Blue Nav Bar Hamburger Menu

How do you get the blue nav bar hamburger menu I.e. the one on the documentation page.

Seems that the tag for PR #18 was not included in the merge

Hello, thanks for merging PR #18. I also had a tag included, produced with "git tag -m v2.0.5 v2.0.5", but I guess maybe tags are not included by GitHub in Pull Requests? Please tag the commit manually and push the tag to your repo.

Put cdn link on webpage

you should put cdn link to webpage https://mblode.github.io/marx/

so it's faster accessible.

marx.css and marx.min.css tagged v2.0.4 are from v2.0.3

Probably commit 3451837 was intended to fix this, but since v2.0.4 was tagged before that, the issue remains.

I recommend bumping to v2.0.5, regenerating marx.css and marx.min.css and tagging a release, while leaving the v2.0.4 tag as-is.

About h1

See Headings And Accessibility on The Importance Of HTML5 Sectioning Elements.

Ignoring the discussion about our need to use only h1 (yes, we should be using only h1), there's something on this pure semantic thing and the importance of sectioning elements that Marx is overlooking: browsers are already styling headers differently according to the section they belong to.

Marx, however, forces all headers, independent of their section, to be of the same size.

Add nested label / checkbox/radio margin

When placing nested checkboxes on the left they are directly glued to the text.

label > input:first-child[type="checkbox"],
label > input:first-child[type="radio"] {
    margin-right: 2px;
}

Could this be added? I do not have stylus running on osx via brew. I can add the change for css, css.min and scss. Interested @mblode?

Text and Input text alignment

Chrome 42 on OSX

Update Codepen, NPM Repo, Bower Repo

Update npm to 3.0.1 https://www.npmjs.com/package/marx-css
Update Codepen to use use https://raw.githubusercontent.com/mblode/marx/master/css/marx.min.css
Update the size on Codepen demo page It is now 11.6 KiB / 3.7 KiB (Gzip) -
Update bower repo?

Demo Page Checkbox for attributes faulty

Problem

When you click on the label of checkbox 2 on the demo page, checkbox 1 will get toggled (tested on Firefox).

How things are

<h3>Checkbox Buttons</h3>
<label for=checkbox>Checkbox 1:</label> <input type=checkbox name=checkbox id=checkbox /><br>
<label for=checkbox>Checkbox 2:</label> <input type=checkbox name=checkbox id=checkbox />

How they should be

<h3>Checkbox Buttons</h3>
<label for=checkbox1>Checkbox 1:</label> <input type=checkbox1 name=checkbox1 id=checkbox1 /><br>
<label for=checkbox2>Checkbox 2:</label> <input type=checkbox2 name=checkbox2 id=checkbox2 />

@mblode can you fix it? @ https://codepen.io/mblode/details/JdYbJj

BUG border-color with width statement...

marx/css/marx.css

Line 574 in 0494da0

border-color: 1px solid rgba(0, 0, 0, 0.54); }

Here seems to be an error...

Default primary color should be red

Describe the bug
A real communist CSS should use more red. Blue is a conservative / capitalist / bourgeois color.

To Reproduce
Steps to reproduce the behavior:

Start a proletarian revolution in your country
Use lot of red flags
Betray workers and destroy your economy with massive corruption and military expense
Wait for people using blue or other non communist color to protest

Expected behavior
Red should be used for buttons and links.

Breaks ul/li

<nav role="navigation">
            <ul>
                <li>
                    <a href="#text">Text</a>
                    <ul>
                        <li><a href="#text__headings">Headings</a></li>
                        <li><a href="#text__paragraphs">Paragraphs</a></li>
                        <li><a href="#text__blockquotes">Blockquotes</a></li>
                        <li><a href="#text__lists">Lists</a></li>
                        <li><a href="#text__hr">Horizontal rules</a></li>
                        <li><a href="#text__tables">Tabular data</a></li>
                        <li><a href="#text__syntax">Syntax</a></li>
                        <li><a href="#text__inline">Inline elements</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#embedded">Embedded content</a>
                    <ul>
                        <li><a href="#embedded__images">Images</a></li>
                        <li><a href="#embedded__audio">Audio</a></li>
                        <li><a href="#embedded__video">Video</a></li>
                        <li><a href="#embedded__canvas">Canvas</a></li>
                        <li><a href="#embedded__progress">Progress bars</a></li>
                        <li><a href="#embedded__svg">Inline SVG</a></li>
                        <li><a href="#embedded__iframes">IFrames</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#forms">Form elements</a>
                    <ul>
                        <li><a href="#forms__text">Text fields</a></li>
                        <li><a href="#forms__select">Select menus</a></li>
                        <li><a href="#forms__checkbox">Checkboxes</a></li>
                        <li><a href="#forms__radio">Radio buttons</a></li>
                        <li><a href="#forms__html5">HTML5 inputs</a></li>
                        <li><a href="#forms__action">Action buttons</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

will come out as:

unless it's small enough, when it'll get wrapped normally.

When installing via NPM, sanatize.css dependency is missing

Perhaps put it in as a peer dependency?
Out of the box, it breaks an angular 6 apllication build because of the missing depedency.

It's an easy fix, but perhaps a good addition to the project, to add it as a peer depedency in the package.json.

Marx.css or marx.min.css?

I have opened both files in my editor and while I haven't gone line by line, they both looks about the same and almost have the same number of lines.

Also, I kind of have another topic but didn't want to spam the issues with my questions. In the marx demo seen here http://codepen.io/mblode/details/QNaKMe it says the article tag is 60%, the aside 40%, and section 100%. In the CSS file (both marx and marx.min) the article selector is set to "width: 100%" and so is Aside. Am I not understanding something fundamental about this?

I'm referencing it correctly in my html. It worked fine pulling it from here as well.
<link rel="stylesheet" href="https://cdn.rawgit.com/mblode/marx/master/css/marx.min.css">

http://puu.sh/pSUsH/945f15794c.png

Instructions unclear

Instructions unclear my family is now starving

Add example-image to the documentation

As marx does style images it would be cool to show that in the docs. Currently no images are seen in the demo.

Extends using css variables [feature]

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

/* 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); }

In the codepen example, the radio buttons seem wrong

STR:

Open the codepen example
Click on Radio 1 (the text, not the button itself)

=> nothing happens

Also click on Radio 1 (the button itself) and then Radio 1
=> both of them are now selected.

I believe you need to change:

<label for=radio-choice-1>Radio 1:</label> <input type=radio name=radio-1 id=radio-1 tabindex=1 value=radio-1 /><br> <label for=radio-2>Radio 2:</label> <input type=radio name=radio-2 id=radio-2 tabindex=2 value=radio-2 />

<label for=radio-1>Radio 1:</label> <input type=radio name=radio id=radio-1 tabindex=1 value=radio-1 /><br> <label for=radio-2>Radio 2:</label> <input type=radio name=radio id=radio-2 tabindex=2 value=radio-2 />

That is, the for attribute for the first label is wrong, and the 2 names need to be the same.

Sorry I can't do a PR for the codepen demo :-)

Sorry, there is no discussion tab. Do I need all of the modules in node_modules to use Marx? I installed via NPM.

Describe the bug
After installing Marx with npm install marx-css, it creates a node_modules folder with 523 dependencies. Are these needed or can I delete them?