npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bc-marx

v1.2.1-b

Published

The stylish CSS reset.

Downloads

4

Readme

Marx

The stylish CSS reset.

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.
  • Created using the SASS/Stylus preprocessors (Customise all the variables!).
  • 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 Bower: bower install marx (recommended).
  • Use the latest Marx CDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/mblode/marx/master/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. Install scss-lint Ruby gem: gem install scss-lint.
  4. To run gulp server: gulp.
  5. To run build process: gulp build.

Optional: To run server or build using Stylus instead of SASS, then try gulp stylus and gulp build styus, respectively.

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: bower install.
  3. Run jekyll: jekyll serve.
  4. Open in browser: localhost:4000/marx/.

What's Included

These are the files that are generated from bower install marx

.
├── README.md
├── bower.json
├── css
│   ├── marx.css
│   ├── marx.css.map
│   ├── marx.min.css
│   └── marx.min.css.map
└── scss
│   ├── _buttons.scss
│   ├── _config.scss
│   ├── _forms.scss
│   ├── _html.scss
│   ├── _navigation.scss
│   ├── _sanitize.scss
│   ├── _tables.scss
│   ├── _typography.scss
│   ├── _variables.scss
│   └── marx.scss
└── styl
    ├── _buttons.styl
    ├── _config.styl
    ├── _forms.styl
    ├── _html.styl
    ├── _navigation.styl
    ├── _sanitize.styl
    ├── _tables.styl
    ├── _typography.styl
    ├── _variables.styl
    └── marx.styl

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 2015</p>
    </footer>
  </main>

</body>
</html>

Contributing to Marx

Pull requests are the way to go.

Creators

Matthew Blode

License

MIT © Matthew Blode