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>© 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
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 onlyh1
), 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.
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!
Sanitize 3.3.0 -> ^5.0.0 and more
Changelist
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
overflow
Could we add:
... 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.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:
Expected behavior Red should be used for buttons and links.
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:
There is probably no need to have
-webkit-appearance: menulist-button;
on aselect
element at all. And if there is, it probably should bemenulist
instead ofmenulist-button
.Update Codepen, NPM Repo, Bower Repo
3.0.1 (support IE8 again cause it is dead cheap)
@mblode Also please make sure to
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
How they should be
@mblode can you fix it? @ https://codepen.io/mblode/details/JdYbJj
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
$link-hover-color is not used
Describe the bug Variable
$link-hover-color
is defined but never used. Instead, the default color fora:focus
anda:hover
isdarken($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
anda:focus
.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.
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.
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 workAdditional 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?
In the codepen example, the radio buttons seem wrong
STR:
=> 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:
to
That is, the
for
attribute for the first label is wrong, and the 2name
s need to be the same.Sorry I can't do a PR for the codepen demo :-)
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
copy/paste from error i get when using npm run build-css
to make this work, i need to make a change in node_modules/marx-css/scss/marx.scss from
to
and just for reference, here is an example of my index.scss
Can the @import line in marx.scss be changed to include the .scss extension? Thanks.