The classless CSS reset (perfect for Communists).

  • By Matthew Blode
  • Last update: Dec 30, 2022
  • Comments: 16

Marx

npm version

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

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

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

Running Github Pages

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

  1. Checkout in to gh-pages: git checkout gh-pages.
  2. Install marx dependency: npm install.
  3. Run middleman: bundle exec middleman serve.
  4. 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 2016</p>
    </footer>
  </main>

</body>
</html>

Contributing to Marx

Pull requests are the way to go.

Creators

Matthew Blode

License

MIT © Matthew Blode

Github

https://github.com/mblode/marx

Comments(16)

  • 1

    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.

  • 2

    fix: invalid h5 block

    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!

  • 3

    Sanitize 3.3.0 -> ^5.0.0 and more

    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

  • 4

    overflow

    Could we add:

    overflow-wrap: break-word;
    

    ... to <pre/>?

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

    screen shot 2017-06-26 at 12 36 36

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

  • 5

    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:

    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.

  • 6

    Dropdown does not show indicator in Firefox

    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:

    screen shot 2019-01-02 at 22 21 42

    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.

  • 7

    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) - screen shot 2018-03-12 at 11 10 25
    • Update bower repo?
  • 8

    3.0.1 (support IE8 again cause it is dead cheap)

    @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)
  • 9

    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

  • 10

    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

  • 11

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

  • 12

    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.

  • 13

    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.

  • 14

    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?

  • 15

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

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

  • 16

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

    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.