Display HTML Content Like Python Code – py-styles

Preview:

Description:

Python is a programming language that can be used to develop applications and websites.

Those who like this language would also like this CSS library called py-styles, which prints HTML elements and content just like Python code. Enjoy.

How to use it:

1. To get started, include the python.css stylesheet on the page.

<link rel="stylesheet" href="assets/css/python.css" />

2. Define a function and return a string as follows:

<h3 id="about" class="def return-str">About</h3>
<div class="func">
  <p class="docstring">py-styles CSS Library</p>
  <div class="return">
    <p class="str">A CSS library called py-styles, which prints HTML elements and content just like Python code. Enjoy.</p>
  </div>
</div>

3. Define a function and return a list as follows:

<div class="func">
  <p class="docstring">Favorite Languages</p>
  <div class="return">
    <div class="list">
      <ul>
        <li><p class="str">Python</p></li>
        <li><p class="str">Typescript</p></li>
        <li><p class="str">Svelte</p></li>
        <li><p class="str">MySQL</p></li>
        <li><p class="str">Asyncio</p></li>
        <li><p class="str">Docker</p></li>
        <li><p class="str">Django</p></li>
        <li><p class="str">Vue</p></li>
        <li><p class="str">MongoDB</p></li>
        <li><p class="str">AWS</p></li>
        <li><p class="str">Linux</p></li>
        <li><p class="str">REST APIs</p></li>
        <li><p class="str">Nginx / Apache</p></li>
        <li><p class="str">S3</p></li>
        <li><p class="str">Backblaze</p></li>
        <li><p class="str">SqlAlchemy</p></li>
      </ul>
    </div>
  </div>
</div>

4. Define a function and return a dict as follows:

<h3 id="contact" class="def return-dict">Contact</h3>
  <div class="func">
    <p class="docstring">Get in touch.</p>
    <div class="return">
      <div class="dict">
        <ul>
          <li>
            <p class="str">Facebook</p>
            <p class="str"><a href="https://www.facebook.com">@Facebook</a></p>
          </li>
          <li>
            <p class="str">Twitter</p>
            <p class="str"><a href="https://www.twitter.com">@Twitter</a></p>
          </li>
          <li>
            <p class="str">LinkedIn</p>
            <p class="str"><a href="https://www.linkedin.com">@LinkedIn</a></p>
          </li>
        </ul>
      </div>
    </div>
  </div>

5. Return an integer.

<p class="int">0</p>

6. Add a comment to the page.

<p class="comment">
  Your Comment Here
</p>

7. Define variables.

<div class="var"><p class="name">jQueryScript</p><div class="bool-false"></div></div>
<div class="var"><p class="name">CSSScript</p><div class="bool-true"></div></div>
<div class="var"><p class="name">365webresources</p><div class="bool-false"></div></div>
<div class="var"><p class="name">VueScript</p><div class="bool-false"></div></div>
<div class="var"><p class="name">ReactScript</p><div class="bool-false"></div></div>
<div class="var"><p class="name">WPMissing</p><div class="bool-false"></div></div>

8. Condition logic is supported as well.

<div class="conditional">
  <ul>
    <li>jQueryScript</li>
    <li>
      <p class="comment">
        <a href="https://www.jqueryscript.net" target="_blank">https://www.jqueryscript.net</a>
      </p>
      <div class="return">
        <p class="str">A jQuery Plugin Website.</p>
      </div>
    </li>
    <li>CSSScript</li>
    <li>
      <p class="comment">
        <a href="https://www.cssscript.com/" target="_blank">https://www.cssscript.com</a>
      </p>
      <div class="return">
        <p class="str">A JavaScript & CSS Website.</p>
      </div>
    </li>
    <li>365webresources</li>
    <li>
      <p class="comment">
        <a href="https://365webresources.com/" target="_blank">https://365webresources.com/</a>
      </p>
      <div class="return">
        <p class="str">A Graphic Design Resources Website.</p>
      </div>
    </li>
    <li>VueScript</li>
    <li>
      <p class="comment">
        <a href="https://www.vuescript.com/" target="_blank">https://www.vuescript.com/</a>
      </p>
      <div class="return">
        <p class="str">A Vue.js Component Website.</p>
      </div>
    </li>
    <li>ReactScript</li>
    <li>
      <p class="comment">
        <a href="https://www.reactscript.com" target="_blank">https://www.reactscript.com</a>
      </p>
      <div class="return">
        <p class="str">A React.js Component Website.</p>
      </div>
    </li>
    <li>WPMissing</li>
    <li>
      <p class="comment">
        <a href="https://wpmissing.com/" target="_blank">https://wpmissing.com/</a>
      </p>
      <div class="return">
        <p class="str">A WordPress Plugin Website.</p>
      </div>
    </li>
  </ul>
</div>