Skip to content

Latest commit

 

History

History
executable file
·
127 lines (90 loc) · 2.16 KB

README.md

File metadata and controls

executable file
·
127 lines (90 loc) · 2.16 KB
Raw

💻 CSS3 New Features Code Demos & more...

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

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

📌 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

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

Reach Me 👩

You can email me at [email protected] or reach me on twitter @hellonehha