https://github.com/9lon/gl-styles

gl-style for webcomponents
https://github.com/9lon/gl-styles

btn-style gl-panel gl-styles gl-table

Last synced: about 1 month ago
JSON representation

gl-style for webcomponents

• Host: GitHub
• URL: https://github.com/9lon/gl-styles
• Owner: 9lon
• License: mit
• Created: 2016-09-06T04:17:32.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-01-25T03:37:34.000Z (almost 8 years ago)
• Last Synced: 2024-12-08T07:04:43.551Z (about 2 months ago)
• Topics: btn-style, gl-panel, gl-styles, gl-table
• Language: HTML
• Size: 30.3 KB
• Stars: 0
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# \

gl-style for web components

## วิธีการใช้งานติดตั้ง

```

$ bower install 9lon-gl-styles --save

```

import ไฟล์ gl-styles ในหน้าที่่ต้องการใช้

```

 

```

ให้คุณแทรก gl-styles ใน แทรก style ในหน้าที่คุณต้องใช้งาน

```

## วิธีการใช้งาน gl-color

```

ต่อมาก็แทรก css ดังตัวอย่างด้านล่างลงไปใน สไตล์ที่คุณต้องการจะเปลี่ยน 

```

    div.ex {

        color:var(--gl-primary-color);

    }

```

## Color variables

![alt text](http://i.imgur.com/DTyUDJv.png "gl-color")

```

        --gl-primary-color

        --gl-success-color

        --gl-info-color

        --gl-warning-color

        --gl-danger-color

        --gl-gray-darker-color

        --gl-gray-dark-color

        --gl-gray-color

        --gl-gray-light-color

        --gl-gray-lighter-color

        --gl-white-color

        --gl-primary-font-color

        --gl-success-font-color

        --gl-info-font-color

        --gl-warning-font-color

        --gl-danger-font-color

```

## BG-Color variables

![alt text](http://i.imgur.com/s3gHS4Q.png "gl-bg-color")

```

        .gl-bg-primary

        .gl-bg-success

        .gl-bg-info

        .gl-bg-warning

        .gl-bg-danger

```

วิธีการใช้งาน

```

    
gl-bg-primary

```

## Btn style and icon size

![alt text](http://i.imgur.com/CKClG9G.png "gl-color")

```

        

        .gl-btn-primary

        .gl-btn-success

        .gl-btn-info

        .gl-btn-warning 

        .gl-btn-danger 


        .gl-icon-size

```

## วิธีการใช้งาน  Btn style กับ  paper-button

```

       

                warning

       

```

## วิธีการใช้งาน gl-size

```

    ex-small

```

## Size class 

![alt text](http://i.imgur.com/00Ah52X.png "gl-color")

```

        .gl-ex-large

        .gl-large

        .gl-default

        .gl-small

        .gl-ex-small

```

## วิธีการใช้งาน  font size variables 

##  Font size variables 

```

       --font-size-default:        16px;

       --font-size-large:         ~20px

       --font-size-small:         ~14px

       --font-size-h1:            ~42px

       --font-size-h2:            ~34px

       --font-size-h3:            ~27px

       --font-size-h4:            ~20px

       --font-size-h5:             16px;

       --font-size-h6:            ~14px

```

### วิธีใช้งาน gl-table

![alt text](http://i.imgur.com/IZttsy2.png "gl-table-default")

Example

```

          

            

              1

            

          

          

            

              

            

          

          

            

             1

           

         

      

```

### วิธีใช้งาน gl-panel

![alt text](http://i.imgur.com/JN7xA5R.png "gl-panel")

Example

```



    


        Header

    

    


        content

    



```