flashCSS

NPM Package Build Size NPM Downloads CDN License

A quick way to generate & customize css from html class name.

DEMO & TRY

<div class="d-flex ps-fixed fw-bold fl-.1em fz-16px fz-lg-20px p-1.5rem"></div>

Features

How to Use?

  1. Add js. 
    <script src="assets/js/flashCSS-2.0.0.min.js"></script>

    or import js module.

  1. Execute function when document ready. 
    window.addEventListener("DOMContentLoaded", function () {
 var css = new flashCSS();
});
  2. Start your project! (width: 25%; height: 200px; margin-top: 1rem; background-color: black) ```html

* You can do class name as template, and save more file size.
( `@template name` , `=template name` )
```html
// Origin
<div class="w-25% h-200px mt-1rem bgc-black @template"></div>
<div class="=template"></div>
<div class="=template color-red"></div>
// Output
<div class="w-25% h-200px mt-1rem bgc-black "></div>
<div class="w-25% h-200px mt-1rem bgc-black "></div>
<div class="w-25% h-200px mt-1rem bgc-black  color-red"></div>

Getting Started with React

Execute the following example once under the App component. All component’s class will compile by flashCSS method, even if the class changes.

// App.js
import { useLayoutEffect } from "react";
import Component_nav from "./component/Component_nav";
import Component_footer from "./component/Component_footer";
import flashCSS from "html-flash-css";

function App() {

    useLayoutEffect(() => {
        const css = new flashCSS({
            observeDOM: true, // need to enable this
        });
    },[])

    return (
        <div className="App">
            <Component_nav className="ps-fixed at-0 al-0 w-100%" />
            <p className="fz-50px fw-bold fa-center color-orange bg-black p-10px">flashCSS with React</p>
            <Component_footer className="d-flex p-3rem" />
        </div>
    );
}

export default App;

Parameters

var css = new flashCSS({
    target: "body",      // default
    showPara: false,     // default
    showMedia: false,    // default
    showVariable: false, // default
    observe: false,      // default
    observeDOM: false,   // default
    important: false,    // default
    style: "head",       // default
    link: "-",           // default
    setMedia: {
        xs: 0,    // default
        sm: 576,  // default
        md: 768,  // default
        lg: 992,  // default
        xl: 1280, // default
        landscape: 'landscape', // default
		portrait: 'portrait',   // default
    },
    setStyle: {
        "box": ["box-sizing"],
        "atl": ["top","left"],
    },
    deleteStyle: ["ani"],
    setSymbol: {
        "!": " !important"
    },
    setTemplate: {
        "img-abs": "ps-absolute at-0 al-0"
    },
    setVariable: {
        "main": 'blue',
        "primary": '#fd7e14',
        "success": '#198754',
        "danger": '#dc3545',
    },
    setCustomVal: function( VAL ){
        // custom function here
        return VAL;
    },
    onCompleted: function(){
        // after style added
    },
});

:


- ### `setMedia: Object ( {xs: number, sm: number, md: number, lg: number, xl: number, landscape: landscape, portrait: portrait} )` ###
	- Related to CSS @media (min-width: px), and value just like Bootstrap.
    You also can add additional value for yourself.
    - New feature for `orientation` on `landscape` & `portrait`.
```javascript
var css = new flashCSS({
    setMedia: {
        xl: 1366, // change value 
        xxl: 1920 // custom
    }
});

<div class="fz-16px fz-lg-20px my-1rem my-xxl-1.5rem"></div>

output class


- ### `setVariable: Object` ###
	You can create the custom variable as following example.
```javascript
var css = new flashCSS({
    setVariable: {
        "main": 'blue',
        "primary": '#fd7e14',
    },
});

## input class
<div class="bg-$main"></div>

## output style
<style>
    .bg\-\$main{
        background: blue;
    }
</style>

var css = new flashCSS({
    setLayout: {
        mb: 960,
        pc: 1920
    },
    setCustomVal: function( VAL ){

        var _thisLayout = this.setLayout;
        var _val = "";

        VAL.split(" ").forEach(( item )=>{
            
            Object.keys(_thisLayout).forEach(function(layout){
                
                if(item.includes(layout)){
                    
                    item = item.split(layout)[0] * (100 / _thisLayout[layout]) + "vw";
                }

            })
            
            _val += item + " ";

        })

        return _val;
    }
});

## input class
<div class="fz-30mb"></div>

## output style
<style>
    .fz\-30mb{
        font-size: 3.125vw;
    }
</style>

Dot

// width: 50.5px;
<div class="w-50.5px"></div>

// letter-spacing: 0.15em;
<div class="fl-.15em"></div>

Negative

// margin-top: -1rem;
<div class="mt-neg1rem"></div>

Percent

// width: 50%;
<div class="w-50%"></div>

Color Hash Code

// background-color: #fff000;
<div class="bgc-#fff000"></div>

Space

// text-shadow: 0 0 red;
<div class="sdt-0_0_red"></div>

// padding: 16px 20px 10px 5px;
<div class="p-16px_20px_10px_5px"></div>

// margin: 1rem 2rem;
<div class="m-1rem_2rem"></div>

Comma

// text-shadow: 0 0 red, 0 0 blue;
<div class="sdt-0_0_red,0_0_blue"></div>

RGBA

// background-color: rgba(0,0,0,1);
<div class="bgc-rgba(#000000,1)"></div>

Slash

// aspect-ratio: 16/9;
<div class="ratio-16/9"></div>

!important

// width: 500px !important;
<div class="w-500px!"></div>

Other type with xxx-xxx

// display: inline-block;
<div class="d-inline-block"></div>
// align-items: center;
<div class="alignItems-center"></div> ```

const _para_pseudo_double_reg = /(before|after|selection|first-letter|first-line)/;
const _para_pseudo_single_reg = /(nth-child\(\d+\)|nth-last-child\(\d+\)|first-child|last-child|hover|active|focus|checked|enabled|disabled|not|has|is|where)/;

## example: 1 
<div class="bg-:active-red"></div>

## output style
<style>
    .bg-\:active-red:active{
        background: red ;
    }
</style>

## example: 2
<div class="content-::before-'flash'"></div>

## output style
<style>
    .content-\:\:before-\'flash\'::before{
        content: 'flash' ;
    }
</style>

## example: 3
<div class="color-:first-child-red"></div>

## output style
<style>
    .color-\:first-child-red:first-child{
        color: red ;
    }
</style>

## example: 1 (style for Self)
<div class="{bg-white;color-black}"></div>

## output style
<style>
    .\{bg-white\;color-black\}{
        background: white ;
        color: black ;
    }
</style>

## example: 2 (style for Self with class)
<div class="{bg-white;color-black}.active"></div>

## output style
<style>
    .\{bg-white\;color-black\}\.active.active{
        background: white ;
        color: black ;
    }
</style>

## example: 3 (style for Self with pseudo)
<div class="{bg-white;color-black}:hover"></div>

## output style
<style>
    .\{bg-white\;color-black\}\:hover:hover{
        background: white ;
        color: black ;
    }
</style>

## example: 4 (style for Child)
<ul class="li{bg-white;color-black}">
    <li>list-1</li>
    <li>list-2</li>
</ul>
<ul class=">li{bg-white;color-black}">
    <li>list-1</li>
    <li>list-2</li>
</ul>

## output style
<style>
    .li\{bg-white\;color-black\} li{
        background: white ;
        color: black ;
    }
    .\>li\{bg-white\;color-black\} >li{
        background: white ;
        color: black ;
    }
</style>

## example: 5 (style for Child with class)
<ul class="li.sp{bg-white;color-black}">
    <li>list-1</li>
    <li class="sp">list-2</li>
</ul>

## output style
<style>
    .li\.sp\{bg-white\;color-black\} li.sp{
        background: white ;
        color: black ;
    }
</style>

## example: 6 (style for Child with pseudo)
<ul class="li:hover{bg-white;color-black}">
    <li>list-1</li>
    <li>list-2</li>
</ul>

## output style
<style>
    .li\:hover\{bg-white\;color-black\} li:hover{
        background: white ;
        color: black ;
    }
</style>

## example: 7 (style for self with media)
<div class="{bg-white;color-black}-sm"></div>

## output style
<style>
    @media (min-width:576px) {
        .\{bg-white\;color-black\}-sm{
            background: white ;
            color: black ;
        }
    }
</style>

## example: 8 (style for self with media)
<div class="{bg-white;color-black}-sm-:hover"></div>

## output style
<style>
    @media (min-width:576px) {
        .\{bg-white\;color-black\}-sm-\:hover:hover{
            background: white ;
            color: black ;
        }
    }
</style>

## example: 9 (style for child with media)
<ul class="li{bg-white;color-black}-sm">
    <li>list-1</li>
    <li>list-2</li>
</ul>

## output style
<style>
    @media (min-width:200px) {
        .li\{bg-white\;color-black\}-sm li{
            background: white ;
            color: black ;
        }
    }
</style>

var css = new flashCSS();
    css.refresh();
This site is open source. Improve this page.