Repository files navigation

This is an old project, when I made it in 2014 I was tried use some possibilities about HTML/CSS and I loved the result. So I know a lot of people that used these components in production projects (I've used a lot of times).

But the things changed in the nexts years and there are better choices to made these components.

So I just maintain this project as an experimental thing and I probability won't make changes anymore.

But you is free to use it as you want 😁❤️

A set of common UI Components using the power of CSS and without Javascript

View the project

Install viaBower ordownload the zip

bower install css-components

• Carousel
• Collapse
• Dropdown
• Modal
• Tab
• Tooltip

*CSS3 transitions are not supported in IE8 and below.** Janky z-index. Seetooltip on right example.

Notes:

• Most tests performed with Browserstack.
• Components that perform action on hover may not work on touchscreens eg.dropdown with hover. Oddlytooltip does work. Bootstrap mentions this, “Sticky :hover/:focus on mobile.Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make :hover ‘sticky’. In other words, :hover styles start applying after tapping an element and only stop applying after the user taps some other element.”
• Probably the main reason why the components fail in earlier versions of IE is because they useadvanced CSS selectors which aren’t supported. It may be possible to patch this with the use of something likeselectivizr. This may defeat the purpose of using these javascript free components but on the other hand it may be acceptable for older IE.
• The components do not fail gracefully. In most cases some elements are visible but interaction will not have any effect. Thecarousel component won't show anything.
• Some layout issues withtab when wrapping on smaller screen sizes.
• Weird flash whencarousel loops around to first slide.

Please read thisCoding Style forIssues, pull requests and coding standards.

All changes must be made in/dev folder. The CSS should be modified using theStylus preprocessor.

# 1. Fork this repository and clone it into the current directorygit clone https://github.com/<your-username>/css-components.git# 2. Navigate to the newly cloned directorycd css-components# 3. Install the dependenciesnpm install

# For start the server, watching your .styl files changes and compile CSSgrunt w

# Compress zip filesgrunt build# Build the project for deploygrunt dist# View your project release in GhPageshttps://<your-username>.github.io/css-components/# Open your Pull Request

MIT License © Felipe Fialho