https://github.com/themanyone/kickass

A modular js library with optional windows-like desktop functionality.
https://github.com/themanyone/kickass

Last synced: 1 day ago
JSON representation

A modular js library with optional windows-like desktop functionality.

• Host: GitHub
• URL: https://github.com/themanyone/kickass
• Owner: themanyone
• Created: 2020-03-12T05:05:26.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-04-02T05:57:40.000Z (over 5 years ago)
• Last Synced: 2025-01-29T20:36:28.601Z (9 months ago)
• Language: JavaScript
• Homepage:
• Size: 85 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# [Kickass](https://github.com/themanyone/kickass)

A modular js library that loads only what is required, and when it is used.

One line does it all.

    

## Three Classes

 * `widget`   - turn a div into a fancy widget

 * `drag`     - make widget draggable

 * `icons`    - add titlebar icons

## Widgets

We define a widget as a web form, video, or other page element. Kickass can dress it up to look like a mini window by adding a border, rounded corners, and a drop shadow. To crate a widget with icons, add the `widget` and `icons` classes. To make it draggable, add the `drag` class.

    


        
This is a Widget

    


![widgets](https://thenerdshow.com/kickass/widget.png "Make Widgets")

Optionally create your own CSS stylesheets with the same id to override the default widget (or other) styles.

    

      .widget {

        position: relative;

        display: inline-block;

        background-color: #eee;

        text-align: center;

        border: 1px solid #888;

        border-radius:5px;

        padding:10px;

      }

      .widget:hover {

        box-shadow: 5px 10px 8px #222;

      }

    

## Conveniences

Kickass makes several conveniences available for web designers. Repeat contents of tags, include HTML from other pages, and display parts of the page as syntax-highlighted code. Uses [CSS Selectors](https://www.w3schools.com/cssref/css_selectors.asp).

 * `data-echo`    - echo code from another element

 * `data-href`    - fetch data from another page (Not CORS enabled)

 * `data-code`    - "view source" on an element

`Examples.`

    

    


    

    

    

    


This is just a start. Feel free to expand on this design pattern to do almost anything.