Giter Club home page Giter Club logo

php-styles's Introduction

Install

composer require izica/php-styles

Usage

generate inline tag style

    $sStyles = (new PhpStylesInline())->opacity(0, $sContact == '')->render();
    or
    $sStyles = styles(true)->opacity(0, $sContact == '')->render();
    or
    $sStyles = styles()->inline->opacity(0, $sContact == '')->render();

insert style

    <div <?=$sStyles?>>
        <?=$sContact;?>
    </div>

generate style with class(class styles supports media query)

    $sClassname = (new PhpStyles())->media(0, 1024)->opacity(0, $sContact == '')->render();
    or
    $sClassname = styles()->media(0, 1024)->opacity(0, $sContact == '')->render();
    or
    $sClassname = styles()
        ->name('contact-images')
        ->media(0, 1024)
        ->set('display', 'flex'),
        ->set('align-items', 'center', $itemsCount > 4),
        ->set('align-items', 'flex-start', $itemsCount <= 4),
        ->set('color', '#ccc')
        ->opacity(0, $sContact == '')
        ->render();

insert style

    <div class="<?=$sClassname?>">
        <?=$sContact;?>
    </div>

Documentation

  • styles() - returns PhpStyles
  • styles(true) - returns PhpStylesInline
  • PhpStyles
    • inline() - returns PhpStylesInline
    • media(sizeFrom: number, sizeTo: number)
    • set(key: string, value: string or number, condition: bool(not required)) - returns $this(if condition == false, not set)
    • render(condition: bool(not required))- returns unique class name(if condition == false, returns empty string)
    • opacity(value, condition(not required))
    • name(className: string)
  • PhpStylesInline
    • set(key: string, value: string or number, condition: bool(not required)) - returns $this(if condition == false, not set)
    • render(condition: bool(not required))- returns unique class name(if condition == false, returns empty string)
    • opacity(value, condition(not required))

php-styles's People

Contributors

izica avatar

Stargazers

 avatar

Watchers

 avatar  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.