Markercss CSS Framework

Markercss is a simple CSS framework that enable developers to style pages so that properties of a specific element can be easily understood by just looking at the various classes applied to it. For example to style an element to 220 pixels width, 370 pixel high and absolute position you will write: <div class=”ab w220 h370”></div>.

Markercss is a unique CSS framework that does not focus on things like resets, typography, etc like other frameworks. Its objective is to let you write code like traditional markup. If this is your preferred style of coding than you may want to have closer look at Markercss.

Markercss provides separate files for styling different parts of page elements, enabling you to easily extend or just use the one you need. Package include:

  • background
  • border
  • font
  • layers
  • links
  • list
  • form
  • table

Developed by José Castro Basso; Markercss CSS framework is available for download license Free. You can find further information, demo and documentation on Markercss Website.

Stay Updated

If you found this post useful, consider subscribing to our RSS Feed! You can also stay updated by following us on Twitter and Facebook or by subscribing to our FriendFeed.

Bookmark / Share

Bookmark and Share

Read More




Reader Comments

15 Responses to “Markercss CSS Framework”
  1. John S says:

    Worst framework ever!

    I don’t know where to begin will all the bad coding practices and problems using this would cause.

  2. Chad says:

    @John S: What do you mean? They use Dreamweaver in their tutorials. Isn’t that a sign of good development practices?

  3. So this framework works only on the XHTML? Can I use it on the .css files?

  4. It might work for very simple stuff, but for any large projects it seems like it would be incredibly difficult to maintain CSS written like this. Seems like a really bad idea to me.

  5. Brad says:

    Looks interesting to me.

  6. Miguel says:

    This is stupid and completely defeats the purpose of separating XHTML from CSS, what a joke.

  7. TomTom says:

    Found on the official website :

    Example of application of an Arial font and size of 10px:

    Now, imagine you have 50 pages with these classes. What if you want to replace it by “Times New Roman” ? ctrl+F “A”…

  8. TomTom says:

    Ah, stripped html.

    Example of application of an Arial font and size of 10px:
    <div class=”A s10”></div>

  9. Saud Khan says:

    Thanks everyone for your valuable feedback.

    I see a general agreement that this framework may not work for most people. However I want to add something in favor of the developer. This framework most probably evolved based on developers personal experience and/or coding preference. Even if this is something that may not get approval from the majority, people with similar experience and coding preference may find it useful.

    I am sure you must have seen many unorthodox approaches evolving into something really useful. For example: imagine a dynamic solution which needs to alter CSS properties on the fly without using inline CSS.

    Once again thank you all for sharing your views and adding value to this post.

  10. Gregor says:

    Saud, I don’t like the aggressive comments above, but I’ve to agree that this framework does not make much sense to me.

    Instead of using the classes of you framework, you could inline css, it would have the same effect in regard of readability and you would save lots of code.

    The downside of course is that you can’t make a CSS-only redesign, not even smaller adjustments, without changing the HTML Code.

  11. This Framework is copying the logic and the naming system of Emastic Which is very modular and the main layout file is only 2kb.

    The problem with Markercss it is too big and it’s not modular. I’m kind of faltered that someone is “stealing” the logic of my naming system but he can at lest did something small like .

  12. Georgi says:

    Probably my comment will also be aggressive, but well, just thoughts and comments.

    First would like to say that these are the most useless .css files ever seen!

    Second, depending of the document type and the browser support, some of the classes wont work, validate and return warnings, and before write “We also give example and pass the W3C standard”, please validate twice all files.

    Before add “W3C members are mainly aimed at driving the Web its full potential: for Markercss was essential
    to ensure a code that meets these standards.” to page as an important text, have to be sure that the code really meets all standards. Can not just copy->paste styles and classes from Firebug console.

    Another important thing are the examples included. HTML and image files where people can see real example and not just couple of examples with three lines of code on a online website. Imagine people who work offline and/or have no connection.

    Could comment more things, but gotta work.

    Regards and hope nobody gets offended.

  13. José Castro says:

    Thank you very much for the criticism.

    Not seeking to remove the traditional code. We try to add!

    With dynamic web. only 2 pages, the index and the interior, and the user sees 50. ..
    One product that is repeated the user sees 100 …

    Change only 2 pages, change only 1 product, change only 1 menu …

    So if we change the thinking can save much time and code.
    I also understand that it is difficult to adapt to new ideas.


  14. Mike G says:

    I’m glad we’re starting a downslide back into web 1.0. I really missed those days.

    Remember when tables ruled our code and we could put font and center tags everywhere?

    Those were the days.

Leave Comment


Stay Updated, Subscribe to RSS Feed




Sponsored Links