neha/css3-demos

This repo is the code and demo of new features in CSS and ready-to-use css code.

💻 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

css3-demos's Issues

Create the code example of the images gallery (4 developers can contribute to it)

Develop the HTML and CSS based image gallery. Do not use Floats or positions. You can use only flex or grids only.

We will have 4 types of Gallery:

1. Gallery displaying only images thumbnails - @rzdev is working on it.
2. Gallery with image and the caption or title over image thumbnail - @joshuafbarker worked on it and it is merged too.
3. Gallery with clickable thumbnail - @shubhamx is working on it
4. Gallery with image, caption/title, description text and clickable. - @imrishabh18 is working on it.

The gallery should be accessible and responsive. On desktop the grid should be of 4X4 , on tab 3X3 and on mobile 2X2.

The gallery version # 3 and # 4 should have hover effect.

Create the code example of Forms ( 2 developers can contribute to this issue)

Develop the forms in HTML and CSS ( you can use your creativity ).

There will be 2 type of forms: one-column and two-column.

One column form:

• Labels will be on the top the input fields

Two column form:

• Labels will be on the left column and input will be in the left

Both form should consider the following edge cases:

1. Error , success, or warning messages display
2. Any helper text could come to the right side eg: tooltip
3. Forms should be accessible
4. Forms should be responsive

Create the example of CSS Flexbox

PR

Develop the new type in badges for handling the text overflow

Hello,

Add one more style in the badges to handle the text-overflow by ellipse.
Maximum characters could be 15.

Thanks,
Neha

Create the example of Badges

Develop the code example for the badges (or chips, tags). The code should be only HTML5 and CSS3. No JavaScript at all.

• The code should be generic to use
• The HTML should be HTML5 and valid
• The code should be ready to use
• The code example should be made in the folder with name 'badges'

Space in folder name causing error when checkout

The folder name #7 Flex Shrink contains space at the beginning and end which is showing as an error when checkout the repo.

The folder is located at the following place: CSSFlexbox/#7 Flex shrink

Create the code example of Navigation

Develop the ready to use CSS and HTML only Navigation. There could be different types of navigation but we will start with the simple one with no jazzy styling. (use your creativity for the design)

• One level navigation
• Should be responsive
• Hover styling should be there
• active class should be there
• ready to use
• Accessible it should be.

Create the code example of Tables

Develop the code example of the Tables.

There should be different kind of behaviour to be taken care:

1. Table with fixed header
2. Table with scrollable header
3. Rows could be of 2 different height - small and normal (you can decide the height)
4. Hover: there should be 2 types of hover : no-hover style and hover style.
5. Select: If there is any checkbox of selecting then there should be select style too.

By default the table should have:

• Normal height
• Hover style
• No selectable
• Fixed header

Rest should be controlled by add on classes. There should be the README.md to how to use.
For code guidelines please check the main Readme.md

Create the Accordion

Develop the accordion with HTML and CSS only.

TIP: you can use the HTML5 new tag for same too.

• Accordion should be accessible by the keyboard.
• The image-icon should always be there and toggle as per the action.
• By default the tabs will toggle (only one can stay open at a time)