diff --git a/CHANGELOG.md b/CHANGELOG.md index 3cd71fb..a6aa47d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## [1.21.1](https://github.com/CoCreate-app/CoCreateCSS/compare/v1.21.0...v1.21.1) (2025-04-30) + + +### Bug Fixes + +* update query attributes ([edb573d](https://github.com/CoCreate-app/CoCreateCSS/commit/edb573d50f31b66e1b7d7f2509bb91a32a276692)) +* updated cocreate modules versions ([0e74b75](https://github.com/CoCreate-app/CoCreateCSS/commit/0e74b7573b4e78c271b40c7150629ae8848e1a78)) +* webpack.config and devdependencies ([790bcf8](https://github.com/CoCreate-app/CoCreateCSS/commit/790bcf804617f4d70c673daf30bd46d76e9a23e6)) + # [1.21.0](https://github.com/CoCreate-app/CoCreateCSS/compare/v1.20.4...v1.21.0) (2024-11-04) diff --git a/demo/CoCreate-navbar.1.html b/demo/CoCreate-navbar.1.html index e07b2bc..212836c 100644 --- a/demo/CoCreate-navbar.1.html +++ b/demo/CoCreate-navbar.1.html @@ -1,162 +1,162 @@ - - - - - - Navbar | CoCreate - + + + + + + Navbar | CoCreate + - - + + - - - - + - + - - - + + + diff --git a/demo/CoCreate-navbar.html b/demo/CoCreate-navbar.html index ecab328..8401c6d 100644 --- a/demo/CoCreate-navbar.html +++ b/demo/CoCreate-navbar.html @@ -1,167 +1,167 @@ - - - - - - Navbar | CoCreate + + + + + + Navbar | CoCreate - - + + - - + + - - - - + - + - - - + + + diff --git a/demo/CoCreate-smooth-scroll.html b/demo/CoCreate-smooth-scroll.html index cc37db2..ea6ad17 100644 --- a/demo/CoCreate-smooth-scroll.html +++ b/demo/CoCreate-smooth-scroll.html @@ -1,349 +1,349 @@ - - - - - - Smooth Scroll | CoCreate + + + + + + Smooth Scroll | CoCreate - - + + - - + + - - - -
-
-

Smooth Page Scrolling

+
+
+

Smooth Page Scrolling

- + -

Section One

+

Section One

-

- Pellentesque habitant morbi tristique senectus et netus et - malesuada fames ac turpis egestas. Vestibulum tortor quam, - feugiat vitae, ultricies eget, tempor sit amet, ante. Donec - eu libero sit amet quam egestas semper. Aenean ultricies mi - vitae est. Mauris placerat eleifend leo. Quisque sit amet - est et sapien ullamcorper pharetra. Vestibulum erat wisi, - condimentum sed, commodo vitae, ornare sit amet, wisi. - Aenean fermentum, elit eget tincidunt condimentum, eros - ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec - non enim in turpis pulvinar facilisis. Ut felis. Praesent - dapibus, neque id cursus faucibus, tortor neque egestas - augue, eu vulputate magna eros eu erat. Aliquam erat - volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, - facilisis luctus, metus -

+

+ Pellentesque habitant morbi tristique senectus et netus et + malesuada fames ac turpis egestas. Vestibulum tortor quam, + feugiat vitae, ultricies eget, tempor sit amet, ante. Donec + eu libero sit amet quam egestas semper. Aenean ultricies mi + vitae est. Mauris placerat eleifend leo. Quisque sit amet + est et sapien ullamcorper pharetra. Vestibulum erat wisi, + condimentum sed, commodo vitae, ornare sit amet, wisi. + Aenean fermentum, elit eget tincidunt condimentum, eros + ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec + non enim in turpis pulvinar facilisis. Ut felis. Praesent + dapibus, neque id cursus faucibus, tortor neque egestas + augue, eu vulputate magna eros eu erat. Aliquam erat + volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, + facilisis luctus, metus +

-

- Pellentesque habitant morbi tristique senectus et netus et - malesuada fames ac turpis egestas. Vestibulum tortor quam, - feugiat vitae, ultricies eget, tempor sit amet, ante. Donec - eu libero sit amet quam egestas semper. Aenean ultricies mi - vitae est. Mauris placerat eleifend leo. Quisque sit amet - est et sapien ullamcorper pharetra. Vestibulum erat wisi, - condimentum sed, commodo vitae, ornare sit amet, wisi. - Aenean fermentum, elit eget tincidunt condimentum, eros - ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec - non enim in turpis pulvinar facilisis. Ut felis. Praesent - dapibus, neque id cursus faucibus, tortor neque egestas - augue, eu vulputate magna eros eu erat. Aliquam erat - volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, - facilisis luctus, metus -

+

+ Pellentesque habitant morbi tristique senectus et netus et + malesuada fames ac turpis egestas. Vestibulum tortor quam, + feugiat vitae, ultricies eget, tempor sit amet, ante. Donec + eu libero sit amet quam egestas semper. Aenean ultricies mi + vitae est. Mauris placerat eleifend leo. Quisque sit amet + est et sapien ullamcorper pharetra. Vestibulum erat wisi, + condimentum sed, commodo vitae, ornare sit amet, wisi. + Aenean fermentum, elit eget tincidunt condimentum, eros + ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec + non enim in turpis pulvinar facilisis. Ut felis. Praesent + dapibus, neque id cursus faucibus, tortor neque egestas + augue, eu vulputate magna eros eu erat. Aliquam erat + volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, + facilisis luctus, metus +

-

- Pellentesque habitant morbi tristique senectus et netus et - malesuada fames ac turpis egestas. Vestibulum tortor quam, - feugiat vitae, ultricies eget, tempor sit amet, ante. Donec - eu libero sit amet quam egestas semper. Aenean ultricies mi - vitae est. Mauris placerat eleifend leo. Quisque sit amet - est et sapien ullamcorper pharetra. Vestibulum erat wisi, - condimentum sed, commodo vitae, ornare sit amet, wisi. - Aenean fermentum, elit eget tincidunt condimentum, eros - ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec - non enim in turpis pulvinar facilisis. Ut felis. Praesent - dapibus, neque id cursus faucibus, tortor neque egestas - augue, eu vulputate magna eros eu erat. Aliquam erat - volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, - facilisis luctus, metus -

+

+ Pellentesque habitant morbi tristique senectus et netus et + malesuada fames ac turpis egestas. Vestibulum tortor quam, + feugiat vitae, ultricies eget, tempor sit amet, ante. Donec + eu libero sit amet quam egestas semper. Aenean ultricies mi + vitae est. Mauris placerat eleifend leo. Quisque sit amet + est et sapien ullamcorper pharetra. Vestibulum erat wisi, + condimentum sed, commodo vitae, ornare sit amet, wisi. + Aenean fermentum, elit eget tincidunt condimentum, eros + ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec + non enim in turpis pulvinar facilisis. Ut felis. Praesent + dapibus, neque id cursus faucibus, tortor neque egestas + augue, eu vulputate magna eros eu erat. Aliquam erat + volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, + facilisis luctus, metus +

-

- Pellentesque habitant morbi tristique senectus et netus et - malesuada fames ac turpis egestas. Vestibulum tortor quam, - feugiat vitae, ultricies eget, tempor sit amet, ante. Donec - eu libero sit amet quam egestas semper. Aenean ultricies mi - vitae est. Mauris placerat eleifend leo. Quisque sit amet - est et sapien ullamcorper pharetra. Vestibulum erat wisi, - condimentum sed, commodo vitae, ornare sit amet, wisi. - Aenean fermentum, elit eget tincidunt condimentum, eros - ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec - non enim in turpis pulvinar facilisis. Ut felis. Praesent - dapibus, neque id cursus faucibus, tortor neque egestas - augue, eu vulputate magna eros eu erat. Aliquam erat - volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, - facilisis luctus, metus -

+

+ Pellentesque habitant morbi tristique senectus et netus et + malesuada fames ac turpis egestas. Vestibulum tortor quam, + feugiat vitae, ultricies eget, tempor sit amet, ante. Donec + eu libero sit amet quam egestas semper. Aenean ultricies mi + vitae est. Mauris placerat eleifend leo. Quisque sit amet + est et sapien ullamcorper pharetra. Vestibulum erat wisi, + condimentum sed, commodo vitae, ornare sit amet, wisi. + Aenean fermentum, elit eget tincidunt condimentum, eros + ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec + non enim in turpis pulvinar facilisis. Ut felis. Praesent + dapibus, neque id cursus faucibus, tortor neque egestas + augue, eu vulputate magna eros eu erat. Aliquam erat + volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, + facilisis luctus, metus +

-

Section Two

+

Section Two

-

Top

+

Top

-

- quam, feugiat vitae, ultricies eget, tempor sit amet, ante. - Donec eu libero sit amet quam egestas semper. Aenean - ultricies mi vitae est. Mauris placerat eleifend leo. - Quisque sit amet est et sapien ullamcorper pharetra. - Vestibulum erat wisi, condimentum sed, commodo vitae, ornare - sit amet, wisi. Aenean fermentum, elit eget tincidunt - condimentum, eros ipsum rutrum orci, sagittis tempus lacus - enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut - felis. Praesent dapibus, neque id cursus faucibus, tortor - neque egestas augue, eu vulputate magna eros eu erat. - Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan - porttitor, facilisis luctus, metus -

+

+ quam, feugiat vitae, ultricies eget, tempor sit amet, ante. + Donec eu libero sit amet quam egestas semper. Aenean + ultricies mi vitae est. Mauris placerat eleifend leo. + Quisque sit amet est et sapien ullamcorper pharetra. + Vestibulum erat wisi, condimentum sed, commodo vitae, ornare + sit amet, wisi. Aenean fermentum, elit eget tincidunt + condimentum, eros ipsum rutrum orci, sagittis tempus lacus + enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut + felis. Praesent dapibus, neque id cursus faucibus, tortor + neque egestas augue, eu vulputate magna eros eu erat. + Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan + porttitor, facilisis luctus, metus +

-

- Pellentesque habitant morbi tristique senectus et netus et - malesuada fames ac turpis egestas. Vestibulum tortor quam, - feugiat vitae, ultricies eget, tempor sit amet, ante. Donec - eu libero sit amet quam egestas semper. Aenean ultricies mi - vitae est. Mauris placerat eleifend leo. Quisque sit amet - est et sapien ullamcorper pharetra. Vestibulum erat wisi, - condimentum sed, commodo vitae, ornare sit amet, wisi. - Aenean fermentum, elit eget tincidunt condimentum, eros - ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec - non enim in turpis pulvinar facilisis. Ut felis. Praesent - dapibus, neque id cursus faucibus, tortor neque egestas - augue, eu vulputate magna eros eu erat. Aliquam erat - volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, - facilisis luctus, metus -

+

+ Pellentesque habitant morbi tristique senectus et netus et + malesuada fames ac turpis egestas. Vestibulum tortor quam, + feugiat vitae, ultricies eget, tempor sit amet, ante. Donec + eu libero sit amet quam egestas semper. Aenean ultricies mi + vitae est. Mauris placerat eleifend leo. Quisque sit amet + est et sapien ullamcorper pharetra. Vestibulum erat wisi, + condimentum sed, commodo vitae, ornare sit amet, wisi. + Aenean fermentum, elit eget tincidunt condimentum, eros + ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec + non enim in turpis pulvinar facilisis. Ut felis. Praesent + dapibus, neque id cursus faucibus, tortor neque egestas + augue, eu vulputate magna eros eu erat. Aliquam erat + volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, + facilisis luctus, metus +

-

Section Three

+

Section Three

-

Top

+

Top

-

- quam, feugiat vitae, ultricies eget, tempor sit amet, ante. - Donec eu libero sit amet quam egestas semper. Aenean - ultricies mi vitae est. Mauris placerat eleifend leo. - Quisque sit amet est et sapien ullamcorper pharetra. - Vestibulum erat wisi, condimentum sed, commodo vitae, ornare - sit amet, wisi. Aenean fermentum, elit eget tincidunt - condimentum, eros ipsum rutrum orci, sagittis tempus lacus - enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut - felis. Praesent dapibus, neque id cursus faucibus, tortor - neque egestas augue, eu vulputate magna eros eu erat. - Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan - porttitor, facilisis luctus, metus -

+

+ quam, feugiat vitae, ultricies eget, tempor sit amet, ante. + Donec eu libero sit amet quam egestas semper. Aenean + ultricies mi vitae est. Mauris placerat eleifend leo. + Quisque sit amet est et sapien ullamcorper pharetra. + Vestibulum erat wisi, condimentum sed, commodo vitae, ornare + sit amet, wisi. Aenean fermentum, elit eget tincidunt + condimentum, eros ipsum rutrum orci, sagittis tempus lacus + enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut + felis. Praesent dapibus, neque id cursus faucibus, tortor + neque egestas augue, eu vulputate magna eros eu erat. + Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan + porttitor, facilisis luctus, metus +

-

- Pellentesque habitant morbi tristique senectus et netus et - malesuada fames ac turpis egestas. Vestibulum tortor quam, - feugiat vitae, ultricies eget, tempor sit amet, ante. Donec - eu libero sit amet quam egestas semper. Aenean ultricies mi - vitae est. Mauris placerat eleifend leo. Quisque sit amet - est et sapien ullamcorper pharetra. Vestibulum erat wisi, - condimentum sed, commodo vitae, ornare sit amet, wisi. - Aenean fermentum, elit eget tincidunt condimentum, eros - ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec - non enim in turpis pulvinar facilisis. Ut felis. Praesent - dapibus, neque id cursus faucibus, tortor neque egestas - augue, eu vulputate magna eros eu erat. Aliquam erat - volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, - facilisis luctus, metus -

+

+ Pellentesque habitant morbi tristique senectus et netus et + malesuada fames ac turpis egestas. Vestibulum tortor quam, + feugiat vitae, ultricies eget, tempor sit amet, ante. Donec + eu libero sit amet quam egestas semper. Aenean ultricies mi + vitae est. Mauris placerat eleifend leo. Quisque sit amet + est et sapien ullamcorper pharetra. Vestibulum erat wisi, + condimentum sed, commodo vitae, ornare sit amet, wisi. + Aenean fermentum, elit eget tincidunt condimentum, eros + ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec + non enim in turpis pulvinar facilisis. Ut felis. Praesent + dapibus, neque id cursus faucibus, tortor neque egestas + augue, eu vulputate magna eros eu erat. Aliquam erat + volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, + facilisis luctus, metus +

-

- quam, feugiat vitae, ultricies eget, tempor sit amet, ante. - Donec eu libero sit amet quam egestas semper. Aenean - ultricies mi vitae est. Mauris placerat eleifend leo. - Quisque sit amet est et sapien ullamcorper pharetra. - Vestibulum erat wisi, condimentum sed, commodo vitae, ornare - sit amet, wisi. Aenean fermentum, elit eget tincidunt - condimentum, eros ipsum rutrum orci, sagittis tempus lacus - enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut - felis. Praesent dapibus, neque id cursus faucibus, tortor - neque egestas augue, eu vulputate magna eros eu erat. - Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan - porttitor, facilisis luctus, metus -

+

+ quam, feugiat vitae, ultricies eget, tempor sit amet, ante. + Donec eu libero sit amet quam egestas semper. Aenean + ultricies mi vitae est. Mauris placerat eleifend leo. + Quisque sit amet est et sapien ullamcorper pharetra. + Vestibulum erat wisi, condimentum sed, commodo vitae, ornare + sit amet, wisi. Aenean fermentum, elit eget tincidunt + condimentum, eros ipsum rutrum orci, sagittis tempus lacus + enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut + felis. Praesent dapibus, neque id cursus faucibus, tortor + neque egestas augue, eu vulputate magna eros eu erat. + Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan + porttitor, facilisis luctus, metus +

-

- Pellentesque habitant morbi tristique senectus et netus et - malesuada fames ac turpis egestas. Vestibulum tortor quam, - feugiat vitae, ultricies eget, tempor sit amet, ante. Donec - eu libero sit amet quam egestas semper. Aenean ultricies mi - vitae est. Mauris placerat eleifend leo. Quisque sit amet - est et sapien ullamcorper pharetra. Vestibulum erat wisi, - condimentum sed, commodo vitae, ornare sit amet, wisi. - Aenean fermentum, elit eget tincidunt condimentum, eros - ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec - non enim in turpis pulvinar facilisis. Ut felis. Praesent - dapibus, neque id cursus faucibus, tortor neque egestas - augue, eu vulputate magna eros eu erat. Aliquam erat - volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, - facilisis luctus, metus -

-
-
+

+ Pellentesque habitant morbi tristique senectus et netus et + malesuada fames ac turpis egestas. Vestibulum tortor quam, + feugiat vitae, ultricies eget, tempor sit amet, ante. Donec + eu libero sit amet quam egestas semper. Aenean ultricies mi + vitae est. Mauris placerat eleifend leo. Quisque sit amet + est et sapien ullamcorper pharetra. Vestibulum erat wisi, + condimentum sed, commodo vitae, ornare sit amet, wisi. + Aenean fermentum, elit eget tincidunt condimentum, eros + ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec + non enim in turpis pulvinar facilisis. Ut felis. Praesent + dapibus, neque id cursus faucibus, tortor neque egestas + augue, eu vulputate magna eros eu erat. Aliquam erat + volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, + facilisis luctus, metus +

+
+
- + - - + + - - + + diff --git a/demo/avatar.html b/demo/avatar.html index 589f85c..707d3f2 100644 --- a/demo/avatar.html +++ b/demo/avatar.html @@ -1,156 +1,149 @@ - - - - - CoCreate-avatar Documentation | CoCreateCSS - - - - - + + + + + CoCreate-avatar Documentation | CoCreateCSS + + + + + - - - + + + - - - - -
-
-
-
-
-

CoCreate-avatar

-
-
-
- - -
- -
-
-

- A headless vinilla javascript micro component. Easy configuration using - HTML5 attributes or Javscript api. -

-
-
-
- -

Usage

- -
-
+ + + + +
+
+
+
+
+

CoCreate-avatar

+
+
+
+ + +
+ +
+
+

+ A headless vinilla javascript micro component. Easy + configuration using HTML5 attributes or Javscript api. +

+
+
+
+ +

Usage

+ +
+
-
-

This is xxxxx usage

+
+

+ This is xxxxx usage +

-
-
+						
+
 												
 <div class="avatar-wrapper">
 		<a class="avatar round">
@@ -164,171 +157,183 @@ 

Usage

</div>
-
-

This is xxxxx usage

-

This is xxxxx usage

-
-
- -

Attributes

- -
-
-
    -
  • -

    avatar-wrapper

    -

    Wrapper div of avatar

    -
  • -
  • -

    avatar

    -

    Tag for avatar

    -
  • -
  • -

    round

    -

    In same tag as avatar and makes avatar rounded.

    -
  • -
  • -

    avatar-image

    -

    Inner tag of avatar tag and it sets avatar image.

    -
  • -
  • -

    avatar-status on(off)

    -

    This is for the status of avatar.

    -
  • -
  • -

    avatar-label

    -

    This is for the label of avatar.

    -
  • -
-
+
+

+ This is xxxxx usage +

+

+ This is xxxxx usage +

+
+
+ +

Attributes

+ +
+
+
    +
  • +

    avatar-wrapper

    +

    Wrapper div of avatar

    +
  • +
  • +

    avatar

    +

    Tag for avatar

    +
  • +
  • +

    round

    +

    + In same tag as avatar and makes avatar rounded. +

    +
  • +
  • +

    avatar-image

    +

    + Inner tag of avatar tag and it sets avatar + image. +

    +
  • +
  • +

    avatar-status on(off)

    +

    This is for the status of avatar.

    +
  • +
  • +

    avatar-label

    +

    This is for the label of avatar.

    +
  • +
+
-
- -
- -

Demo

- -
-
-
- -
-
- -
-
+
+ +
+ +

Demo

+ +
+
+
+ +
+
+ +
+
-
-
-
+
+
+
-
- - - - - -
-
- -
-
-
- -
+
+ + + + + +
+
+ +
+ + + +
- - + + diff --git a/docs/avatar.html b/docs/avatar.html index 5e6514c..1a04fba 100644 --- a/docs/avatar.html +++ b/docs/avatar.html @@ -1,167 +1,158 @@ - - - - - CoCreate-avatar Documentation | CoCreateCSS - - - - - + + + + + CoCreate-avatar Documentation | CoCreateCSS + + + + + - - - - + + + + - - - - - -
-
-
-
-
-

CoCreate-avatar

-
-
-
- - -
- -
-
-

- A headless vinilla javascript micro component. Easy configuration using - HTML5 attributes or Javscript api. -

-
-
-
- -

Usage

- -
-
+ + + + + +
+
+
+
+
+

CoCreate-avatar

+
+
+
+ + +
+ +
+
+

+ A headless vinilla javascript micro component. Easy + configuration using HTML5 attributes or Javscript api. +

+
+
+
+ +

Usage

+ +
+
-
-

This is xxxxx usage

+
+

+ This is xxxxx usage +

-
-
+						
+
                         
 <div class="avatar-wrapper">
     <a class="avatar round">
@@ -175,171 +166,183 @@ 

Usage

</div>
-
-

This is xxxxx usage

-

This is xxxxx usage

-
-
- -

Attributes

- -
-
-
    -
  • -

    avatar-wrapper

    -

    Wrapper div of avatar

    -
  • -
  • -

    avatar

    -

    Tag for avatar

    -
  • -
  • -

    round

    -

    In same tag as avatar and makes avatar rounded.

    -
  • -
  • -

    avatar-image

    -

    Inner tag of avatar tag and it sets avatar image.

    -
  • -
  • -

    avatar-status on(off)

    -

    This is for the status of avatar.

    -
  • -
  • -

    avatar-label

    -

    This is for the label of avatar.

    -
  • -
-
+
+

+ This is xxxxx usage +

+

+ This is xxxxx usage +

+
+
+ +

Attributes

+ +
+
+
    +
  • +

    avatar-wrapper

    +

    Wrapper div of avatar

    +
  • +
  • +

    avatar

    +

    Tag for avatar

    +
  • +
  • +

    round

    +

    + In same tag as avatar and makes avatar rounded. +

    +
  • +
  • +

    avatar-image

    +

    + Inner tag of avatar tag and it sets avatar + image. +

    +
  • +
  • +

    avatar-status on(off)

    +

    This is for the status of avatar.

    +
  • +
  • +

    avatar-label

    +

    This is for the label of avatar.

    +
  • +
+
-
- -
- -

Demo

- -
-
-
- -
-
- -
-
+
+ +
+ +

Demo

+ +
+
+
+ +
+
+ +
+
-
-
-
+
+
+
-
- - - - - -
-
- -
-
-
- -
+
+ + + + + +
+
+ +
+ + + +
- - + + diff --git a/docs/flip-item.html b/docs/flip-item.html index 2692c45..242eda9 100644 --- a/docs/flip-item.html +++ b/docs/flip-item.html @@ -1,315 +1,318 @@ - - - - - CoCreate-flip-item Documentation | CoCreateCSS - - - - - + + + + + CoCreate-flip-item Documentation | CoCreateCSS + + + + + - - - + + + - - - - - -
-
-
-
-
-

CoCreate-flip-item

-
-
-
- - -
- -
-
-

- A headless vinilla javascript micro component. Easy configuration using - HTML5 attributes or Javscript api. -

-
-
-
- -

Usage

- -
-
+ + + + + +
+
+
+
+
+

CoCreate-flip-item

+
+
+
+ + +
+ +
+
+

+ A headless vinilla javascript micro component. Easy + configuration using HTML5 attributes or Javscript api. +

+
+
+
+ +

Usage

+ +
+
-
-

This is xxxxx usage

+
+

+ This is xxxxx usage +

-
-
<div></div>
-
-

This is xxxxx usage

-

This is xxxxx usage

-
-
- -

Attributes

- -
-
-
    -
  • -

    - xxxxx - string - optional -

    -

    XXXXX-attribute

    -
  • -
  • -

    - xxxxx - string - optional -

    -

    XXXXX-attribute

    -
  • -
-
+
+
<div></div>
+
+

+ This is xxxxx usage +

+

+ This is xxxxx usage +

+
+
+ +

Attributes

+ +
+
+
    +
  • +

    + xxxxx + string + optional +

    +

    XXXXX-attribute

    +
  • +
  • +

    + xxxxx + string + optional +

    +

    XXXXX-attribute

    +
  • +
+
-
- -
- -

Demo

- -
-
-
- -
-
- -
-
+
+ +
+ +

Demo

+ +
+
+
+ +
+
+ +
+
-
-
-
+
+
+
-
- - - - - -
-
- -
-
-
- -
+
+ + + + + +
+
+ +
+ + + +
- - + + diff --git a/docs/index.html b/docs/index.html index b929d55..e66e5c4 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,336 +1,348 @@ - - - - - CoCreateCSS - A utility first, atomic CSS framework - - - - - - - - + .hide-nav + #menuL { + margin-top: 0px; + max-height: -moz-available; + max-height: -webkit-fill-available; + max-height: fill-available; + will-change: transform; + transition: background 0.3s, + -webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1); + transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1), + background 0.3s; + transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1), + background 0.3s, + -webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1); + transform: translateY(0); + -webkit-transform: translateY(0); + } + - - - + + + - - + + - - + + - -
-
-
-
-
- -
-
-

- A Utility First, - Atomic CSS Framework -

- For Building Collaborative Apps, Platforms and UI's - - -
-
-
-
+ +
+
+
+
+
+ +
+
+

+ A Utility First, + Atomic CSS Framework +

+ For Building Collaborative Apps, Platforms and + UI's + + +
+
+
+
- -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
- -
-
-
-
- -
-
-

- Micro Component Architecture -

-

- Vanilla javascript, lightweight, single purpose micro - components. Easily modify, remove and/or replace components. - Highly configuarable using HTML5 attributes. HTML5 developers - can use a combination of attributes to create a dynamic - experience. Javascript developers still have access to API, - callbacks and events. -

-

- -
-
-
-
+ +
+
+
+
+ +
+
+

+ Micro Component Architecture +

+

+ Vanilla javascript, lightweight, single purpose + micro components. Easily modify, remove and/or + replace components. Highly configuarable using + HTML5 attributes. HTML5 developers can use a + combination of attributes to create a dynamic + experience. Javascript developers still have + access to API, callbacks and events. +

+

+ +
+
+
+
- -
-
-
-
- -
-
-

- Collaborative Headless CMS -

-

- A lighting fast headless CMS over websocket, providing CRUD and - CRDT functionality. Create, Read, Update, Delete and Filter - lists. Collaborate on Text, DOM and Objects. Configure using - HTML5 data-attibutes. Supports offline editing and user cursor - positions in Inputs, Textareas, Rich Text Editors and Code - Editors. But of course... Javascript developers still have - access to API, callbacks and events. -

- Get Your API Key -
-
-
-
+ +
+
+
+
+ +
+
+

+ Collaborative Headless CMS +

+

+ A lighting fast headless CMS over websocket, + providing CRUD and CRDT functionality. Create, + Read, Update, Delete and Filter lists. + Collaborate on Text, DOM and Objects. Configure + using HTML5 data-attibutes. Supports offline + editing and user cursor positions in Inputs, + Textareas, Rich Text Editors and Code Editors. + But of course... Javascript developers still + have access to API, callbacks and events. +

+ Get Your API Key +
+
+
+
- -
-
-
-
- -
-
-

- Fully Customizable Admin Panel -

-

- HTML5 Admin dashboard UI powered by CoCreateJS. It is 100% - editable and used to manage and create views for your data and - content. Use it as a Collaborative CRM, CMS and ERP. Can be - modified, replaced or used as an example to build your own - custom HTML5 admin dashboard. -

-

- -
-
-
-
+ +
+
+
+
+ +
+
+

+ Fully Customizable Admin Panel +

+

+ HTML5 Admin dashboard UI powered by CoCreateJS. + It is 100% editable and used to manage and + create views for your data and content. Use it + as a Collaborative CRM, CMS and ERP. Can be + modified, replaced or used as an example to + build your own custom HTML5 admin dashboard. +

+

+ +
+
+
+
- -
-
-
-
- -
-
-

- Collaborative Drag-n-Drop Builder -

-

- We are in the process of using CoCreateJS components to create - an experimental NO Code expereince. Every page of the adminUI - can be edited in the drag and drop builder. CoCreate builder UI - is completely customizable and supports editing of any html5 - template. Can be modified, replaced or used as an example to - build your own custom drang and drop builder. -

-
-
-
-
+ +
+
+
+
+ +
+
+

+ Collaborative Drag-n-Drop Builder +

+

+ We are in the process of using CoCreateJS + components to create an experimental NO Code + expereince. Every page of the adminUI can be + edited in the drag and drop builder. CoCreate + builder UI is completely customizable and + supports editing of any html5 template. Can be + modified, replaced or used as an example to + build your own custom drang and drop builder. +

+
+
+
+
- -
-
-
-
- -
-
-

- Thirdparty API Intergration -

-

- We have put together a few thirdparty APIs and developed them to - be used and configured with HTML5 attributes. Build custom flows - and logic without ever leaving the html page... The CoCreate - Way... Almost forgot, Javascript developers still have access to - API, callbacks and events. -

-

- -
-
-
-
+ +
+
+
+
+ +
+
+

+ Thirdparty API Intergration +

+

+ We have put together a few thirdparty APIs and + developed them to be used and configured with + HTML5 attributes. Build custom flows and logic + without ever leaving the html page... The + CoCreate Way... Almost forgot, Javascript + developers still have access to API, callbacks + and events. +

+

+ +
+
+
+
- -
+ +
- - + + - - + + diff --git a/docs/utility.html b/docs/utility.html index 4152a0b..a9f7664 100644 --- a/docs/utility.html +++ b/docs/utility.html @@ -1,1250 +1,1155 @@ - - - - - CoCreate Utility CSS Documentation | CoCreateCSS - - - - - + + + + + CoCreate Utility CSS Documentation | CoCreateCSS + + + + + - - - + + + - + - - - - - -
-
-
-
-
-

CoCreate utility CSS

-
-
-
- - -
- -
-
-

- CoCreate provides the most convenient utility class. -

-
-
-
- -

Usage

- -
-
+ + + + + +
+
+
+
+
+

CoCreate utility CSS

+
+
+
+ + +
+ +
+
+

+ CoCreate provides the most convenient utility class. +

+
+
+
+ +

Usage

+ +
+
-
-

- CoCreate utility Classes are very easy to use. -

-

- We can use exactly same class names with "style:value". -

-
-
+					
+

+ CoCreate utility Classes are very easy to use. +

+

+ We can use exactly same class names with + "style:value". +

+
+
                                 
 <div class="padding:16px"></div>
 <div class="font-size:0.5rem color:red"></div>
                                 
                             
-
-

- Main styles and values provided as utility classes are as follows. -

-
-
-
- -
-

- direction -

-
-
<div class="direction:ltr"></div>
-

ltr

-

rtl

-
-

- display -

-
-
<div class="display:block"></div>
-

block

-

inline-block

-

inline

-

none

-

inherit

-

table

-

table-cell

-

flex

-
-

- overflow -

-
-
<div class="overflow:auto"></div>
-

auto

-

visible

-

scroll

-

hidden

-
-

- float -

-
-
<div class="float:left"></div>
-

left

-

right

-

none

-
-

- position -

-
-
<div class="position:relative"></div>
-

inherit

-

relative

-

absolute

-

fixed

-

sticky

-
-

- z-index -

-
-
<div class="z-index:auto"></div>
-

auto

-

inherit

-

initial

-

-2

-

-5

-

1 ~ 15

-

100

-

101

-

111

-

1000

-

1111

-
-

- top / bottom / left / right -

-
-
<div class="top:auto"></div>
-

auto

-

0

-

1px ~ 50px

-

55px

-

60px

-

65px

-

...

-

100px

-

150px

-

200px

-

...

-

400px

-

-1px ~ -50px

-

-55px

-

-60px

-

-65px

-

...

-

-100px

-

-150px

-

-200px

-

...

-

-400px

-
-

- bottom -

-
-
<div class="bottom:auto"></div>
-

auto

-

0

-

1px ~ 50px

-

55px

-

60px

-

65px

-

...

-

100px

-

150px

-

200px

-

...

-

400px

-

-1px ~ -50px

-

-55px

-

-60px

-

-65px

-

...

-

-100px

-

-150px

-

-200px

-

...

-

-400px

-
-

- left -

-
-
<div class="left:auto"></div>
-

auto

-

0

-

1px ~ 50px

-

55px

-

60px

-

65px

-

...

-

100px

-

150px

-

200px

-

...

-

400px

-

-1px ~ -50px

-

-55px

-

-60px

-

-65px

-

...

-

-100px

-

-150px

-

-200px

-

...

-

-400px

-
-

- right -

-
-
<div class="right:auto"></div>
-

auto

-

0

-

1px ~ 50px

-

55px

-

60px

-

65px

-

...

-

100px

-

150px

-

200px

-

...

-

400px

-

-1px ~ -50px

-

-55px

-

-60px

-

-65px

-

...

-

-100px

-

-150px

-

-200px

-

...

-

-400px

-
-

- height -

-
-
<div class="height:0"></div>
-

0

-

1px ~ 10px

-

20px

-

30px

-

40px

-

45px

-

48px

-

50px

-

70px

-

80px

-

90px

-

100px

-

130px

-

150px

-

200px

-

250px

-

300px

-

350px

-

...

-

700px

-

auto

-

25%

-

33%

-

50%

-

66%

-

75%

-

100%

-

100%-120px

-

100vh-120px

-

100vh-100px

-

100vh-90px

-

100vh-70px

-

100vh-50px

-

80vh

-

90vh

-

100vh

-

fill-available

-

fit-content

-
-

- min-height -

-
-
<div class="min-height:100px"></div>
-

100px

-

200px

-

...

-

700px

-
-

- max-height -

-
-
<div class="max-height:300px"></div>
-

60px

-

100%

-
-

- width -

-
-
<div class="width:0"></div>
-

0

-

1px ~ 10px

-

15px

-

20px

-

25px

-

...

-

90px

-

100px

-

110px

-

120px

-

130px

-

150px

-

180px

-

200px

-

250px

-

300px

-

350px

-

...

-

1000px

-

10%

-

12%

-

15%

-

20%

-

25%

-

30%

-

35%

-

40%

-

41% ~ 50%

-

55%

-

60%

-

65%

-

70%

-

75%

-

80%

-

85%

-

90%

-

95%

-

100%

-

auto

-

unset

-

fill-available

-
-

- min-width -

-
-
<div class="min-width:75px"></div>
-

75px

-

100px

-

200px

-

250px

-

300px

-
-

- max-width -

-
-
<div class="max-width:300px"></div>
-

75px

-

100px

-

300px

-

400px

-

500px

-

600px

-

1050px

-
-

- margin -

-
-
<div class="margin:auto"></div>
-

auto

-

0

-

5px

-

10px

-

15px

-

...

-

100px

-

auto-lr(left & right)

-

0-lr

-

0px_5px

-

0px_10px

-

10px_5px

-

...

-

100px-lr

-

auto_0px(top & bottom)

-

0_0px

-

5px_0px

-

10px_0px

-

15px_0px

-

...

-

100px_0px

-
-

- margin-top -

-
-
<div class="margin=top:auto"></div>
-

auto

-

0

-

5px

-

10px

-

15px

-

...

-

100px

-
-

- margin-bottom -

-
-
<div class="margin-bottom:auto"></div>
-

auto

-

0

-

5px

-

10px

-

15px

-

...

-

100px

-
-

- margin-left -

-
-
<div class="margin-left:auto"></div>
-

auto

-

0

-

5px

-

10px

-

15px

-

...

-

100px

-
-

- margin-right -

-
-
<div class="margin-right:auto"></div>
-

auto

-

0

-

5px

-

10px

-

15px

-

...

-

100px

-
-

- padding -

-
-
<div class="padding:0"></div>
-

0

-

5px

-

10px

-

15px

-

...

-

100px

-

0_0px(top & bottom)

-

5px_0px

-

10px_0px

-

15px_0px

-

...

-

100px_0px

-

0-lr(left & right)

-

1px-lr ~ 10px_5px

-

20px-lr

-

20px_5px

-

30px-lr

-

...

-

100px-lr

-
-

- padding-top -

-
-
<div class="padding-top:0"></div>
-

0

-

5px

-

10px

-

15px

-

...

-

100px

-
-

- padding-bottom -

-
-
<div class="padding-bottom:15px"></div>
-

0

-

5px

-

10px

-

15px

-

...

-

100px

-
-

- padding-left -

-
-
<div class="padding-left:15px"></div>
-

0

-

5px

-

10px

-

15px

-

...

-

100px

-
-

- padding-right -

-
-
<div class="padding-right:15px"></div>
-

0

-

5px

-

10px

-

15px

-

...

-

100px

-
-

- border-width -

-
-
<div class="border-width:0"></div>
-

0

-

1px ~ 10px

-

20px

-
-

- border-color -

-
-
<div class="border-color:black"></div>
-

white

-

black

-

extra-dark-gray

-

medium-dark-gray

-

dark-gray

-

extra-medium-gray

-

medium-gray

-

extra-light-gray

-

light-gray

-

light-pink

-

deep-pink

-

transparent-pink

-
-

- border-style -

-
-
<div class="border-style:dotted"></div>
-

dotted

-

dashed

-

solid

-

double

-

groove

-

ridge

-

inset

-

outset

-

none

-

hidden

-

transparent

-
-

- border-radius -

-
-
<div class="border-radius:0"></div>
-

0

-

1px ~ 10px

-

50px

-

50%

-

100%

-
-

- font-size -

-
-
<div class="font-size:18px"></div>
-

6px ~ 25px

-

30px

-

40px

-

50px

-

...

-

80px

-

01rem

-

02rem

-

03rem

-

04rem

-

05rem

-

1rem

-

2rem

-
-

- font-weight -

-
-
<div class="font-weight:800"></div>
-

100

-

200

-

300

-

...

-

900

-

bold

-
-

- font-align -

-
-
<div class="font-align:center"></div>
-

center

-

left

-

right

-
-

- color -

-
-
<div class="color:blue"></div>
-

white

-

black

-

extra-dark-gray

-

dark-gray

-

extra-medium-gray

-

medium-gray

-

extra-light-gray

-

light-gray

-

light-gray

-

very-light-gray

-

deep-pink

-

light-blue

-

blue

-
-

- text-overflow -

-
-
<div class="text-overflow:ellipsis"></div>
-

ellipsis

-
-

- text-transform -

-
-
<div class="text-transform:uppercase"></div>
-

uppercase

-
-

- text-decoration -

-
-
<div class="text-decoration:underline"></div>
-

underline

-
-

- background-attachment -

-
-
<div class="background-attachment:scroll"></div>
-

scroll

-

fixed

-

local

-

initial

-

inherit

-
-

- background-repeat -

-
-
<div class="background-repeat:repeat"></div>
-

repeat

-

repeat-x

-

repeat-y

-

no-repeat

-

initial

-

inherit

-
-

- background-size -

-
-
<div class="background-size:auto"></div>
-

auto

-

cover

-

contain

-

initial

-

inherit

-
-

- background-position -

-
-
<div class="background-position:center"></div>
-

left-top

-

left-center

-

left-bottom

-

right-top

-

right-center

-

right-bottom

-

center

-

center-top

-

center-center

-

center-bottom

-

initial

-

inherit

-
-

- bg (background) -

-
-
<div class="background:blue"></div>
-

transparent

-

white

-

black

-

dark-blue

-

extra-dark-gray

-

dark-gray

-

extra-medium-gray

-

medium-gray

-

extra-light-gray

-

medium-light-gray

-

light-gray

-

very-light-gray

-

deep-pink

-

transparent-white

-

transparent-black

-

white-opacity

-

black-opacity

-

black-opacity-light

-

deep-pink-opacity

-

charcoal-gray

-

blue

-
-

- background -

-
-
<div class="background:black"></div>
-

transparent

-

white

-

black

-

dark-blue

-
-

- opacity -

-
-
<div class="opacity:block"></div>
-

0

-

0.1

-

0.2

-

0.3

-

...

-

0.9

-

1

-
-

- cursor -

-
-
<div class="cursor:auto"></div>
-

alias

-

all-scroll

-

auto

-

cell

-

context-menu

-

col-resize

-

copy

-

crosshair

-

default

-

e-resize

-

ew-resize

-

grab

-

grabbing

-

help

-

move

-

n-resize

-

ne-resize

-

nesw-resize

-

ns-resize

-

nw-resize

-

nwse-resize

-

no-drop

-

none

-

not-allowed

-

pointer

-

progress

-

row-resize

-

s-resize

-

se-resize

-

sw-resize

-

text

-

url

-

w-resize

-

wait

-

zoom-in

-

zoom-out

-
-
-
-
- -
- -

Demo

- -
-
-
- -
-
- -
-
+
+

+ Main styles and values provided as utility classes + are as follows. +

+
+
+
+ +
+

+ direction +

+
+
<div class="direction:ltr"></div>
+

ltr

+

rtl

+
+

+ display +

+
+
<div class="display:block"></div>
+

block

+

inline-block

+

inline

+

none

+

inherit

+

table

+

table-cell

+

flex

+
+

+ overflow +

+
+
<div class="overflow:auto"></div>
+

auto

+

visible

+

scroll

+

hidden

+
+

+ float +

+
+
<div class="float:left"></div>
+

left

+

right

+

none

+
+

+ position +

+
+
<div class="position:relative"></div>
+

inherit

+

relative

+

absolute

+

fixed

+

sticky

+
+

+ z-index +

+
+
<div class="z-index:auto"></div>
+

auto

+

inherit

+

initial

+

-2

+

-5

+

1 ~ 15

+

100

+

101

+

111

+

1000

+

1111

+
+

+ top / bottom / left / right +

+
+
<div class="top:auto"></div>
+

auto

+

0

+

1px ~ 50px

+

55px

+

60px

+

65px

+

...

+

100px

+

150px

+

200px

+

...

+

400px

+

-1px ~ -50px

+

-55px

+

-60px

+

-65px

+

...

+

-100px

+

-150px

+

-200px

+

...

+

-400px

+
+

+ bottom +

+
+
<div class="bottom:auto"></div>
+

auto

+

0

+

1px ~ 50px

+

55px

+

60px

+

65px

+

...

+

100px

+

150px

+

200px

+

...

+

400px

+

-1px ~ -50px

+

-55px

+

-60px

+

-65px

+

...

+

-100px

+

-150px

+

-200px

+

...

+

-400px

+
+

+ left +

+
+
<div class="left:auto"></div>
+

auto

+

0

+

1px ~ 50px

+

55px

+

60px

+

65px

+

...

+

100px

+

150px

+

200px

+

...

+

400px

+

-1px ~ -50px

+

-55px

+

-60px

+

-65px

+

...

+

-100px

+

-150px

+

-200px

+

...

+

-400px

+
+

+ right +

+
+
<div class="right:auto"></div>
+

auto

+

0

+

1px ~ 50px

+

55px

+

60px

+

65px

+

...

+

100px

+

150px

+

200px

+

...

+

400px

+

-1px ~ -50px

+

-55px

+

-60px

+

-65px

+

...

+

-100px

+

-150px

+

-200px

+

...

+

-400px

+
+

+ height +

+
+
<div class="height:0"></div>
+

0

+

1px ~ 10px

+

20px

+

30px

+

40px

+

45px

+

48px

+

50px

+

70px

+

80px

+

90px

+

100px

+

130px

+

150px

+

200px

+

250px

+

300px

+

350px

+

...

+

700px

+

auto

+

25%

+

33%

+

50%

+

66%

+

75%

+

100%

+

100%-120px

+

100vh-120px

+

100vh-100px

+

100vh-90px

+

100vh-70px

+

100vh-50px

+

80vh

+

90vh

+

100vh

+

fill-available

+

fit-content

+
+

+ min-height +

+
+
<div class="min-height:100px"></div>
+

100px

+

200px

+

...

+

700px

+
+

+ max-height +

+
+
<div class="max-height:300px"></div>
+

60px

+

100%

+
+

+ width +

+
+
<div class="width:0"></div>
+

0

+

1px ~ 10px

+

15px

+

20px

+

25px

+

...

+

90px

+

100px

+

110px

+

120px

+

130px

+

150px

+

180px

+

200px

+

250px

+

300px

+

350px

+

...

+

1000px

+

10%

+

12%

+

15%

+

20%

+

25%

+

30%

+

35%

+

40%

+

41% ~ 50%

+

55%

+

60%

+

65%

+

70%

+

75%

+

80%

+

85%

+

90%

+

95%

+

100%

+

auto

+

unset

+

fill-available

+
+

+ min-width +

+
+
<div class="min-width:75px"></div>
+

75px

+

100px

+

200px

+

250px

+

300px

+
+

+ max-width +

+
+
<div class="max-width:300px"></div>
+

75px

+

100px

+

300px

+

400px

+

500px

+

600px

+

1050px

+
+

+ margin +

+
+
<div class="margin:auto"></div>
+

auto

+

0

+

5px

+

10px

+

15px

+

...

+

100px

+

+ auto-lr(left & right) +

+

0-lr

+

0px_5px

+

0px_10px

+

10px_5px

+

...

+

100px-lr

+

+ auto_0px(top & bottom) +

+

0_0px

+

5px_0px

+

10px_0px

+

15px_0px

+

...

+

100px_0px

+
+

+ margin-top +

+
+
<div class="margin=top:auto"></div>
+

auto

+

0

+

5px

+

10px

+

15px

+

...

+

100px

+
+

+ margin-bottom +

+
+
<div class="margin-bottom:auto"></div>
+

auto

+

0

+

5px

+

10px

+

15px

+

...

+

100px

+
+

+ margin-left +

+
+
<div class="margin-left:auto"></div>
+

auto

+

0

+

5px

+

10px

+

15px

+

...

+

100px

+
+

+ margin-right +

+
+
<div class="margin-right:auto"></div>
+

auto

+

0

+

5px

+

10px

+

15px

+

...

+

100px

+
+

+ padding +

+
+
<div class="padding:0"></div>
+

0

+

5px

+

10px

+

15px

+

...

+

100px

+

+ 0_0px(top & bottom) +

+

5px_0px

+

10px_0px

+

15px_0px

+

...

+

100px_0px

+

0-lr(left & right)

+

1px-lr ~ 10px_5px

+

20px-lr

+

20px_5px

+

30px-lr

+

...

+

100px-lr

+
+

+ padding-top +

+
+
<div class="padding-top:0"></div>
+

0

+

5px

+

10px

+

15px

+

...

+

100px

+
+

+ padding-bottom +

+
+
<div class="padding-bottom:15px"></div>
+

0

+

5px

+

10px

+

15px

+

...

+

100px

+
+

+ padding-left +

+
+
<div class="padding-left:15px"></div>
+

0

+

5px

+

10px

+

15px

+

...

+

100px

+
+

+ padding-right +

+
+
<div class="padding-right:15px"></div>
+

0

+

5px

+

10px

+

15px

+

...

+

100px

+
+

+ border-width +

+
+
<div class="border-width:0"></div>
+

0

+

1px ~ 10px

+

20px

+
+

+ border-color +

+
+
<div class="border-color:black"></div>
+

white

+

black

+

extra-dark-gray

+

medium-dark-gray

+

dark-gray

+

extra-medium-gray

+

medium-gray

+

extra-light-gray

+

light-gray

+

light-pink

+

deep-pink

+

transparent-pink

+
+

+ border-style +

+
+
<div class="border-style:dotted"></div>
+

dotted

+

dashed

+

solid

+

double

+

groove

+

ridge

+

inset

+

outset

+

none

+

hidden

+

transparent

+
+

+ border-radius +

+
+
<div class="border-radius:0"></div>
+

0

+

1px ~ 10px

+

50px

+

50%

+

100%

+
+

+ font-size +

+
+
<div class="font-size:18px"></div>
+

6px ~ 25px

+

30px

+

40px

+

50px

+

...

+

80px

+

01rem

+

02rem

+

03rem

+

04rem

+

05rem

+

1rem

+

2rem

+
+

+ font-weight +

+
+
<div class="font-weight:800"></div>
+

100

+

200

+

300

+

...

+

900

+

bold

+
+

+ font-align +

+
+
<div class="font-align:center"></div>
+

center

+

left

+

right

+
+

+ color +

+
+
<div class="color:blue"></div>
+

white

+

black

+

extra-dark-gray

+

dark-gray

+

extra-medium-gray

+

medium-gray

+

extra-light-gray

+

light-gray

+

light-gray

+

very-light-gray

+

deep-pink

+

light-blue

+

blue

+
+

+ text-overflow +

+
+
<div class="text-overflow:ellipsis"></div>
+

ellipsis

+
+

+ text-transform +

+
+
<div class="text-transform:uppercase"></div>
+

uppercase

+
+

+ text-decoration +

+
+
<div class="text-decoration:underline"></div>
+

underline

+
+

+ background-attachment +

+
+
<div class="background-attachment:scroll"></div>
+

scroll

+

fixed

+

local

+

initial

+

inherit

+
+

+ background-repeat +

+
+
<div class="background-repeat:repeat"></div>
+

repeat

+

repeat-x

+

repeat-y

+

no-repeat

+

initial

+

inherit

+
+

+ background-size +

+
+
<div class="background-size:auto"></div>
+

auto

+

cover

+

contain

+

initial

+

inherit

+
+

+ background-position +

+
+
<div class="background-position:center"></div>
+

left-top

+

left-center

+

left-bottom

+

right-top

+

right-center

+

right-bottom

+

center

+

center-top

+

center-center

+

center-bottom

+

initial

+

inherit

+
+

+ bg (background) +

+
+
<div class="background:blue"></div>
+

transparent

+

white

+

black

+

dark-blue

+

extra-dark-gray

+

dark-gray

+

extra-medium-gray

+

medium-gray

+

extra-light-gray

+

medium-light-gray

+

light-gray

+

very-light-gray

+

deep-pink

+

transparent-white

+

transparent-black

+

white-opacity

+

black-opacity

+

black-opacity-light

+

deep-pink-opacity

+

charcoal-gray

+

blue

+
+

+ background +

+
+
<div class="background:black"></div>
+

transparent

+

white

+

black

+

dark-blue

+
+

+ opacity +

+
+
<div class="opacity:block"></div>
+

0

+

0.1

+

0.2

+

0.3

+

...

+

0.9

+

1

+
+

+ cursor +

+
+
<div class="cursor:auto"></div>
+

alias

+

all-scroll

+

auto

+

cell

+

context-menu

+

col-resize

+

copy

+

crosshair

+

default

+

e-resize

+

ew-resize

+

grab

+

grabbing

+

help

+

move

+

n-resize

+

ne-resize

+

nesw-resize

+

ns-resize

+

nw-resize

+

nwse-resize

+

no-drop

+

none

+

not-allowed

+

pointer

+

progress

+

row-resize

+

s-resize

+

se-resize

+

sw-resize

+

text

+

url

+

w-resize

+

wait

+

zoom-in

+

zoom-out

+
+
+
+
+ +
+ +

Demo

+ +
+
+
+ +
+
+ +
+
-
-
-
+
+
+
-
- - - - - -
-
- -
-
-
- -
- - + + // for (const copied of copy) { + // copied.onclick = function() { + // object.execCommand("copy"); + // }; + // copied.addEventListener("copy", function(event) { + // event.preventDefault(); + // if (event.clipboardData) { + // event.clipboardData.setData("text/plain", copied.textContent); + // console.log(event.clipboardData.getData("text")) + // }; + // }); + // }; + - - + + diff --git a/package.json b/package.json index 5ab8e62..bd331e9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cocreate/cocreatecss", - "version": "1.21.0", + "version": "1.21.1", "description": "A lightweight utility-first Atomic CSS framework promoting rapid UI development. No learning curve... Apply your native css property:value directly in class, then extract and transform it.", "keywords": [ "cocreatecss", @@ -45,16 +45,10 @@ }, "main": "./src/index.js", "devDependencies": { - "@babel/core": "^7.9.6", - "@babel/preset-env": "^7.9.6", - "babel-loader": "^8.1.0", - "clean-webpack-plugin": "^3.0.0", "css-loader": "^5.1.3", - "css-minimizer-webpack-plugin": "^4.2.2", - "file-loader": "^6.2.0", + "esbuild": "^0.25.2", + "esbuild-loader": "^4.3.0", "mini-css-extract-plugin": "^1.5.0", - "style-loader": "^3.3.1", - "terser-webpack-plugin": "^5.1.1", "webpack": "^5.24.4", "webpack-cli": "^4.6.0", "webpack-log": "^3.0.1" diff --git a/webpack.config.js b/webpack.config.js index 93f4339..1e3642a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,75 +1,65 @@ -const path = require("path") - -const { CleanWebpackPlugin } = require("clean-webpack-plugin") -const TerserPlugin = require("terser-webpack-plugin") -const MiniCssExtractPlugin = require("mini-css-extract-plugin") -const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); - -let isProduction = process.env.NODE_ENV === "production" - -module.exports = { - entry: { - CoCreateCSS: "./src/index.js", - }, - output: { - path: path.resolve(__dirname, "dist"), - filename: isProduction ? "[name].min.js" : "[name].js", - chunkFilename: isProduction ? '[name].min.js' : '[name].js', - libraryTarget: "umd", - libraryExport: "default", - library: ["CoCreate", "css"], - globalObject: "this", - ...(isProduction ? { /*publicPath: 'https://cdn.cocreate.app/',*/ } : {}), - }, - - plugins: [ - new CleanWebpackPlugin(), - new MiniCssExtractPlugin({ - filename: isProduction ? 'CoCreate.min.css' : 'CoCreate.css', - }), - ], - - mode: isProduction ? "production" : "development", - module: { - rules: [ - { - test: /.js$/, - exclude: /(node_modules)/, - use: { - loader: "babel-loader", - options: { - plugins: ["@babel/plugin-transform-modules-commonjs"], - }, - }, - }, - { - test: /.css$/i, - use: [ - MiniCssExtractPlugin.loader, - 'css-loader' - ] - }, - ], - }, - - // add source map - ...(isProduction ? {} : { devtool: "eval-source-map" }), - - optimization: { - minimize: true, - minimizer: [ - new CssMinimizerPlugin(), - new TerserPlugin({ - extractComments: true, - // cache: true, - parallel: true, - // sourceMap: true, // Must be set to true if using source-maps in production - terserOptions: { - compress: { - drop_console: true, - }, - }, - }), - ] - }, -} +const path = require("path"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const { EsbuildPlugin } = require("esbuild-loader"); +const { FileUploader } = require("@cocreate/webpack"); + +module.exports = async (env, argv) => { + const isProduction = argv && argv.mode === "production"; + const config = { + entry: { + CoCreateCSS: "./src/index.js" + }, + output: { + path: path.resolve(__dirname, "dist"), + filename: isProduction ? "[name].min.js" : "[name].js", + libraryExport: "default", + library: ["CoCreate", "coCreateCSS"], + clean: true + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: isProduction ? "[name].min.css" : "[name].css" + }), + new FileUploader(env, argv) + ], + mode: isProduction ? "production" : "development", + devtool: isProduction ? "source-map" : "eval-source-map", + module: { + rules: [ + { + test: /.js$/, + exclude: /node_modules/, + use: { + loader: "esbuild-loader", + options: { + loader: "js", + target: "es2017" + } + } + }, + { + test: /.css$/i, + use: [MiniCssExtractPlugin.loader, "css-loader"] + } + ] + }, + optimization: { + minimize: isProduction, + minimizer: [ + new EsbuildPlugin({ + target: "es2017", + css: true + }) + ], + splitChunks: { + cacheGroups: { + defaultVendors: false + } + } + }, + performance: { + hints: isProduction ? "warning" : false + } + }; + return config; +};