A tiny CSS for generated HTML or Markdown content

  • By Jeremy Thomas
  • Last update: Dec 26, 2022
  • Comments: 4

wysiwyg.css

A tiny CSS for generated HTML or Markdown content, meant for:

  • readability: both the spacing and colors are visually balanced
  • simplicity: you only need a single class to style all elements
  • extensibility: you can easily customise the output thanks to variables

Install

npm install wysiwyg.css

Or download/clone the repo.

Copyright and license

Code copyright 2016 Jeremy Thomas. Code released under the MIT license.

Github

https://github.com/jgthms/wysiwyg.css

Comments(4)

  • 1

    Move dependencies to devDependencies

    It will allow to not install build dependencies when installing wysiwyg

    For now I have a problem, that npm install wysiwyg.css leads to install of outdated version of browserslist (which is part of autoprefixer) And this outdated browserslist somehow interfere with my actual version of browserslist and causes my postcss to work not properly

    So this PR:

    • fix outdated browserslist interference
    • speed up npm install by not installing not needed packages
  • 2

    Add :empty paragraph selector

    I always have problems with CMS content producing lots of empty elements, mainly paragraphs - the empty text elements still inherit margins etc leading to large spacing between content.

    I usually write in these styles to hide empty paragraphs with the :empty pseudo class.

    I was tempted to add :empty to a few other selectors but wanted to start with paragraph as it’s the main use case, and wanted to know your thoughts on it.

    :octocat:

  • 3

    updated node-sass version

    Installation of the library was failing in nodeJS 8 (and above presumably) due to an incompatible version of node-sass. I updated that to be the latest and now it seems to install into projects correctly.

    I ran a build (npm run build) and got no errors, so I assume all is good. :)

    Thank you for this great library and I hope you find some time to update the version and publish it to npm.

    /Paul

  • 4

    Use it (markdown text) in my project (Ruby on Rails) - Do not working

    Hello,

    I am trying to use your very promising component

    In my rails project:

    • copy the "wysiwyg.sass" file
    • import it in my main sass
    • in the div surrounding my text I used the class "wysiwyg"
    <div class="text wysiwyg">
    

    After I refresh my page it does not seems to work

    My text is:

    this is the content test
    
    - item 1
    
    - item 2
    
    * item 3
    
    
    
    end of test
    

    In web browser I can see the html source:

    <div class="text wysiwyg">
      <p>this is the content test</p>
      <p>- item 1</p>
      <p>- item 2</p>
      <p>* item 3</p>
      <p>&nbsp;</p>
      <p>end of test</p>
    </div>