Skip to content
☕️ A set of common UI Components using the power of CSS and without Javascript.
Branch: gh-pages
Clone or download
Latest commit 28877e8 Feb 21, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
build build Oct 1, 2018
index.html Create Mar 2, 2017
logo-pcc.jpg Add Logo Apr 16, 2014
package.json Change CSS Preprocessor to Stylus Jun 30, 2015

Pure CSS Components Logo

license GitHub contributors

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

View the project


Install via Bower or download the zip

bower install css-components


Browser Support

Chrome Firefox Internet Explorer Opera Safari Edge
Android Yes Yes N/A Untested N/A
iOS No N/A N/A Untested Yes
Mac OS X Yes Yes N/A Untested Yes
Windows Yes Yes Yes (9+) Untested Yes
Internet Explorer
Carousel 9+ *
Collapse 9+ *
Dropdown 9+ *
Modal 9+ *
Tab 9+ *
Tooltip 8+ * **

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


  • Most tests performed with Browserstack.
  • Components that perform action on hover may not work on touchscreens eg. dropdown with hover. Oddly tooltip 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 use advanced CSS selectors which aren’t supported. It may be possible to patch this with the use of something like selectivizr. 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. The carousel component won't show anything.
  • Some layout issues with tab when wrapping on smaller screen sizes.
  • Weird flash when carousel loops around to first slide.


Please read this Coding Style for Issues, pull requests and coding standards.

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

Getting Started

# 1. Fork this repository and clone it into the current directory
git clone<your-username>/css-components.git

# 2. Navigate to the newly cloned directory
cd css-components

# 3. Install the dependencies
npm install


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

Pull Requests

# Compress zip files
grunt build

# Build the project for deploy
grunt dist

# View your project release in GhPages

# Open your Pull Request


MIT License © Luiz Felipe Tartarotti Fialho

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.