diff --git a/README.md b/README.md index 9f14ded..11eba7b 100755 --- a/README.md +++ b/README.md @@ -1,12 +1,23 @@ -# :computer: CSS3 New Features Code Demos & more. +# :computer: All About CSS :heart: +CSS3 new Features Code Demos & Ready to Use Code Snippts. + +This repo is dedicated to all the new CSS features releasing in the CSS (So, it will remain WIP). This repo also has ready to use CSS + HTML based code snippets such as - buttons, alert, etc. -This repo is dedicated to all the new CSS features releasing in the CSS. This is WIP repo and less jazzy UI (I know it should be jazzy , as we are talking about CSS). -# :grey_question: Why? +## :grey_question: Why? While learning new CSS3 features and making youtube videos for JSLovers, I started this repo. Also, to reduce the development efforts I have created ready-to-use code samples for the devs. +## Browser Support +Working on Chrome + +## How to use this? + +- Clone or download the repo. +- Ready to use code is marked with `css-demo`. +- Copy the code and use it in your project. + # :pushpin: TOC ### New Features @@ -29,7 +40,7 @@ While learning new CSS3 features and making youtube videos for JSLovers, I start - :white_check_mark: Tags - :white_check_mark: List - :white_check_mark: Card -- Badegs +- Badges - Tables - Images - Forms @@ -40,6 +51,9 @@ While learning new CSS3 features and making youtube videos for JSLovers, I start - Icons - Tabs - Slideshow +- Search +- Loaders +- Animations # :bulb: Ready to use code - HTML and CSS @@ -121,6 +135,15 @@ Below are the new CSS3 features code samples. # :heart: Contribution If you would like to contribute please raise the PR. +If you would like to add any CSS Demo: + +0) The demo should be only CSS based. No package, no Javascript, no pre/post-processors. +1) Create the folder with `css-demo-` +2) Add the dependent files. Keep the CSS and HTML into seprate files. +3) Add readme.md to explain how to use the code. +4) Add the screenshot of the UI +5) Make sure the HTML and CSS is valid +6) Add if any property is not supported in modern browser. # Reach Me :woman: diff --git a/cssCounter/index.html b/css-counter/index.html similarity index 100% rename from cssCounter/index.html rename to css-counter/index.html diff --git a/cssCounter/style.css b/css-counter/style.css similarity index 100% rename from cssCounter/style.css rename to css-counter/style.css diff --git a/currentcolor/index.html b/css-currentcolor/index.html similarity index 100% rename from currentcolor/index.html rename to css-currentcolor/index.html diff --git a/currentcolor/style.css b/css-currentcolor/style.css similarity index 100% rename from currentcolor/style.css rename to css-currentcolor/style.css diff --git a/css-alert-status/index.html b/css-demo-alert-status/index.html similarity index 100% rename from css-alert-status/index.html rename to css-demo-alert-status/index.html diff --git a/css-alert-status/style.css b/css-demo-alert-status/style.css similarity index 100% rename from css-alert-status/style.css rename to css-demo-alert-status/style.css diff --git a/CSSButtons/index.html b/css-demo-buttons/index.html similarity index 100% rename from CSSButtons/index.html rename to css-demo-buttons/index.html diff --git a/CSSButtons/style.css b/css-demo-buttons/style.css similarity index 100% rename from CSSButtons/style.css rename to css-demo-buttons/style.css diff --git a/cssCalc/index.html b/css-demo-calc/index.html similarity index 100% rename from cssCalc/index.html rename to css-demo-calc/index.html diff --git a/cssCalc/style.css b/css-demo-calc/style.css similarity index 100% rename from cssCalc/style.css rename to css-demo-calc/style.css diff --git a/css-cards/index.html b/css-demo-cards/index.html similarity index 100% rename from css-cards/index.html rename to css-demo-cards/index.html diff --git a/css-cards/style.css b/css-demo-cards/style.css similarity index 100% rename from css-cards/style.css rename to css-demo-cards/style.css diff --git a/css-tags/index.html b/css-demo-tags/index.html similarity index 100% rename from css-tags/index.html rename to css-demo-tags/index.html diff --git a/css-tags/style.css b/css-demo-tags/style.css similarity index 100% rename from css-tags/style.css rename to css-demo-tags/style.css diff --git a/cssFilters/index.html b/css-filters/index.html similarity index 100% rename from cssFilters/index.html rename to css-filters/index.html diff --git a/cssFilters/script.js b/css-filters/script.js similarity index 100% rename from cssFilters/script.js rename to css-filters/script.js diff --git a/cssFilters/style.css b/css-filters/style.css similarity index 100% rename from cssFilters/style.css rename to css-filters/style.css diff --git a/CSSFlexbox/#1 Template/index.html b/css-flexbox/#1 Template/index.html similarity index 100% rename from CSSFlexbox/#1 Template/index.html rename to css-flexbox/#1 Template/index.html diff --git a/CSSFlexbox/#1 Template/style.css b/css-flexbox/#1 Template/style.css similarity index 100% rename from CSSFlexbox/#1 Template/style.css rename to css-flexbox/#1 Template/style.css diff --git a/CSSFlexbox/#2 display flex/index.html b/css-flexbox/#2 display flex/index.html similarity index 100% rename from CSSFlexbox/#2 display flex/index.html rename to css-flexbox/#2 display flex/index.html diff --git a/CSSFlexbox/#2 display flex/style.css b/css-flexbox/#2 display flex/style.css similarity index 100% rename from CSSFlexbox/#2 display flex/style.css rename to css-flexbox/#2 display flex/style.css diff --git a/CSSFlexbox/#3 Flex Wrap/index.html b/css-flexbox/#3 Flex Wrap/index.html similarity index 100% rename from CSSFlexbox/#3 Flex Wrap/index.html rename to css-flexbox/#3 Flex Wrap/index.html diff --git a/CSSFlexbox/#3 Flex Wrap/style.css b/css-flexbox/#3 Flex Wrap/style.css similarity index 100% rename from CSSFlexbox/#3 Flex Wrap/style.css rename to css-flexbox/#3 Flex Wrap/style.css diff --git a/CSSFlexbox/#4 Flex JustifyContent/index.html b/css-flexbox/#4 Flex JustifyContent/index.html similarity index 100% rename from CSSFlexbox/#4 Flex JustifyContent/index.html rename to css-flexbox/#4 Flex JustifyContent/index.html diff --git a/CSSFlexbox/#4 Flex JustifyContent/style.css b/css-flexbox/#4 Flex JustifyContent/style.css similarity index 100% rename from CSSFlexbox/#4 Flex JustifyContent/style.css rename to css-flexbox/#4 Flex JustifyContent/style.css diff --git a/CSSFlexbox/#5 Flex basis/index.html b/css-flexbox/#5 Flex basis/index.html similarity index 100% rename from CSSFlexbox/#5 Flex basis/index.html rename to css-flexbox/#5 Flex basis/index.html diff --git a/CSSFlexbox/#5 Flex basis/style.css b/css-flexbox/#5 Flex basis/style.css similarity index 100% rename from CSSFlexbox/#5 Flex basis/style.css rename to css-flexbox/#5 Flex basis/style.css diff --git a/CSSFlexbox/#6 Flex grow/index.html b/css-flexbox/#6 Flex grow/index.html similarity index 100% rename from CSSFlexbox/#6 Flex grow/index.html rename to css-flexbox/#6 Flex grow/index.html diff --git a/CSSFlexbox/#6 Flex grow/style.css b/css-flexbox/#6 Flex grow/style.css similarity index 100% rename from CSSFlexbox/#6 Flex grow/style.css rename to css-flexbox/#6 Flex grow/style.css diff --git a/CSSFlexbox/#7 Flex shrink /index.html b/css-flexbox/#7 Flex shrink /index.html similarity index 100% rename from CSSFlexbox/#7 Flex shrink /index.html rename to css-flexbox/#7 Flex shrink /index.html diff --git a/CSSFlexbox/#7 Flex shrink /style.css b/css-flexbox/#7 Flex shrink /style.css similarity index 100% rename from CSSFlexbox/#7 Flex shrink /style.css rename to css-flexbox/#7 Flex shrink /style.css diff --git a/CSSFlexbox/#8 Flex order/index.html b/css-flexbox/#8 Flex order/index.html similarity index 100% rename from CSSFlexbox/#8 Flex order/index.html rename to css-flexbox/#8 Flex order/index.html diff --git a/CSSFlexbox/#8 Flex order/style.css b/css-flexbox/#8 Flex order/style.css similarity index 100% rename from CSSFlexbox/#8 Flex order/style.css rename to css-flexbox/#8 Flex order/style.css diff --git a/cssGrids/01/index.html b/css-grids/01/index.html similarity index 100% rename from cssGrids/01/index.html rename to css-grids/01/index.html diff --git a/cssGrids/01/style.css b/css-grids/01/style.css similarity index 100% rename from cssGrids/01/style.css rename to css-grids/01/style.css diff --git a/cssMixins/index.html b/css-mixins/index.html similarity index 100% rename from cssMixins/index.html rename to css-mixins/index.html diff --git a/cssMixins/style.css b/css-mixins/style.css similarity index 100% rename from cssMixins/style.css rename to css-mixins/style.css diff --git a/CSSScrollBehaviour/index.html b/css-scroll-behaviour/index.html similarity index 100% rename from CSSScrollBehaviour/index.html rename to css-scroll-behaviour/index.html diff --git a/CSSScrollBehaviour/style.css b/css-scroll-behaviour/style.css similarity index 100% rename from CSSScrollBehaviour/style.css rename to css-scroll-behaviour/style.css diff --git a/cssVariables/index.html b/css-variables/index.html similarity index 100% rename from cssVariables/index.html rename to css-variables/index.html diff --git a/cssVariables/style.css b/css-variables/style.css similarity index 100% rename from cssVariables/style.css rename to css-variables/style.css diff --git a/cssWritingModes/index.html b/css-writing-modes/index.html similarity index 100% rename from cssWritingModes/index.html rename to css-writing-modes/index.html diff --git a/cssWritingModes/style.css b/css-writing-modes/style.css similarity index 100% rename from cssWritingModes/style.css rename to css-writing-modes/style.css