Code Monkey home page Code Monkey logo

simply-classy-css's Introduction

SimplyClassyCSS

A collection of beautiful and classy CSS styles suitable for simple renderers such as Java Swing's. Website: https://i-plasm.github.io/simply-classy-css

Showcase

Beautiful mindmap freeplane and SimplyClassyCSS. CSS and highlighting.

Features

  • Beauty
  • Readability
  • Fonts chosen for the best displays in Java Swing
  • Variety of styles and color schemes. Light and dark modes
  • Extra 1: special CSS classes for highlighting and emphasizing text
  • Extra 2: groovy scripts for automatic highlighting/emphasizing

Usage

SimplyClassyCSS features different styles (e.g "Spacious").

For each style, different color schemes may be supported (e.g "Standard", "Gruvbox").

For each color scheme, light or dark mode (or both) are supported.

Set-up

  1. Check out the Gallery and select your preferred CSS. Download it.
  2. Configure your software/environment to use that CSS.
  3. Check the required fonts listed in the screenshot and install any missing ones. All fonts are free Google fonts, and can be obtained from: https://fonts.google.com/.
  4. After installing the fonts, restart the software where you will be using the CSS.

Styled Paragraphs and Sections

When using any of the SimplyClassyCSS styles, text inside special <span> tags becomes highlighted. Additionally, special <p> tags draw styled boxes around your paragraphs. Very useful for studying, analyzing or creating emphasis on texts. The syntax is:

Styled Paragraphs and Sections

Extra: Automatic styling scripts

The groovy scripts SpanHighlighter and BoxedParagraph wrap selected text in a JTextComponent (Java Swing) with the desired syntax.

Use in Freeplane

To use in freeplane: after setting up the CSS style (see guide here), install the scripts, select the text you’d like to emphasize, and call the desired script: the appropriate tags will be inserted automatically. A brief explanation on how to use each script:

Freeplane Tip! You can use the SpanHighlighter script to automatically surround the text you'd like to highlight with <span class="simply-yellow">my_text</span>. The default is the yellow color. You can change the color simply by changing the class attribute. The script gets installed in the menu Format -> Highlight -> Span Highlighter. Suggestion: for quick access, assign the ctrl + shift + H shortcut to the script. CLICK HERE FOR THE FULL GUIDE

Freeplane Tip! You can use the BoxedParagraph script to automatically surround the paragraph you'd like to enclose in a box with <p class="blue-dotted">my_paragraph</p>. The default is blue dotted box. You can change it by modifying the class attribute. The script gets installed in the menu Format -> Highlight -> Boxed Paragraph. Suggestion: for quick access, assign the ctrl + shift + P shortcut to the script. CLICK HERE FOR THE FULL GUIDE

Screenshots

Check the complete Gallery on the SimplyClassyCSS website

License

SimplyClassyCSS materials, except logos and otherwise noted, are licensed under a BSD-3-Clause license. See LICENSE and third-party-licenses.

simply-classy-css's People

Contributors

i-plasm avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.