💻 All About CSS ❤️

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 is WIP repo and less jazzy UI (I know it should be jazzy , as we are talking about CSS).

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

📌 TOC

New Features

• ✅ calc
• ✅ counter
• ✅ filters
• ✅ mixins [UPDATE: NOT ANYMORE SUPPORTED]
• ✅ scroll behaviour
• ✅ variables
• ✅ writing modes
• ✅ current color
• flexbox - work in progress
• grids

CSS + HTML Ready to use code

• ✅ Buttons
• ✅ Alerts & Notification
• ✅ Tags
• ✅ List
• ✅ Card
• Badges
• Tables
• Images
• Forms
• Navigation
• Layouts
• Gallery
• Accordion
• Icons
• Tabs
• Slideshow
• Search
• Loaders
• Animations

💡 Ready to use code - HTML and CSS

Below are the ready-to-use CSS and HTML code snippts for your project. Right now, this is work-in-progress repo.

CSS Buttons

CSS Tags

CSS Alerts

CSS Cards

💡 CSS3 New Features:

Below are the new CSS3 features code samples.

• current color

 .border{
     color: red;
     border: 1px solid currentColor;
 }

• Writing Modes

 .border{
     color: red;
     border: 1px solid currentColor;
 }

• CSS calc

 .box{
     width: calc(100 * 2px);
  }

• CSS filters
• CSS Mixins
• CSS Variables

:root: {
 --red : red;
}

.block {
    color :var(--red)
}

• CSS Grids
• CSS Flexbox

⌚ What's next?

• Add all possible 'ready to use' codes.
• Make the code responsive.
• Make the all examples accessible.
• Add colors options.
• Add styleguide.

❤️ 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-<nameofthecomponent>
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 👩

You can email me at nsharma215@gmail.com or reach me on twitter @hellonehha