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.

Hello 👋

I think I have found a bug: the CSS does not appear to be parseable. I have patched this in a project, but maybe some other people may benefit from this.

Thanks for the great work!

Changelist

• Sanitize 3.3.0 -> ^5.0.0
• npm outdated -> fixed major versions in package.json -> npm update
• auto include sanitize ^5.0.0 from npm modules in sass/stylus build process
• updated way browerslist ist being used, updated minimum versions
• updated HTML5 test page from git repo
• added missing input[type=button] styles
• added source map file generation (for minified files)

Notes

While the HTML 5 Test Page renders just fine due to the update of Sanitize 3.3.0 to ^5.0.0 I'd consider setting this up as Marx 4.0.0.

Questions

Any chance this can get merged and tagged as a release @mblode

Resolves https://github.com/mblode/marx/issues/31

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.

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:

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

Expected behavior Red should be used for buttons and links.

The dropdown styling is off in Firefox (and probably other non-WebKit/non-Blink browsers). It does not show the dropdown indicator as can be seen in the following screenshot:

There is probably no need to have -webkit-appearance: menulist-button; on a select element at all. And if there is, it probably should be menulist instead of menulist-button.

• 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?

@mblode Also please make sure to

• push a release to npm and bower
• and the css reference on https://codepen.io/mblode/details/JdYbJj (html can stay I suppose)

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

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

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.

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.

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.

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?

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 />

to

<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 :-)

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';

to

@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.