Get into the CSS Flow: Code snippets you can use

Ryan Boudreaux recommends a web developer resource that features open source code snippets using HTML 5, CSS3, and Sass for UI elements, kits and widgets.

The web developer resource, CSS Flow (Figure A), created by the French developer Thibaut Courouble, includes a compilation of open-source code snippets including web UI elements, complete UI kits, and widgets which are coded with HTML5, CSS3, and Sass/SCSS. Since the source code is registered under an MIT License, the only requirement is that you need to keep the copyright notice and license information within the source code when you use it for your websites and repositories. Several of the CSS code snippets are reviewed below. Figure A

The CSS code snippets assortment now offers fifty selections ranging from 3D buttons and 3D navigation to windows for alerts and notifications. However, I have found that several of the CSS code snippets provide the styling without much function, or a limited functionality in some cases. For example, the Flip-down Clock snippet (Figure B) has the example countdown time of 42 minutes 8 seconds hard coded into the HTML and the styling looks great, but for you to get it into a functional state, you will need to find a script or code for counting down. This is not that hard to incorporate, in fact, Tripwire has a good article on 25 Cool jQuery Countdown Scripts, which would allow you to manipulate the styles to match the particular countdown script.

Figure B

The Flip-down Clock code snippet has been tested with success in Firefox 4, Safari 4, Chrome 14, Opera 10, and IE 9.

Multicolored Push Buttons is a set of CSS-generated buttons with cool active states, and a generator is included in the Sass source, which allows you to create button styles from a single input color. The CSS also includes several @media screen states for 800px and 400px breakpoints, and also uses several CSS3 styles such as box shadow, border radius, and linear gradients to create the effects as displayed in Figure C.

The Multi-colored Push Buttons have been tested with success in Firefox 4, Safari 4, Chrome 13, Opera 10, and IE 8.

Notepaper Blockquote includes properties such as radial gradient, repeating linear gradients, transforms, and some before/after settings for the larger quotes. A portion of the demo page highlighting the effect is shown in Figure D. The snippet also has flexible width and height settings and degrades well in older browsers. The Notepaper Blockquote code has been tested with success in Firefox 4, Safari 4, Chrome 13, Opera 10, and IE 6.

Figure D

Currently CSS Flow offers five functional UI kits built entirely with CSS and these include Mobile, Colorful, Flat, Graphite, and Dark as displayed in Figure E. The mobile CSS UI kit uses clean, organized HTML5 and CSS with Sass as a foundation that can be incorporated into a new or existing mobile web application project. The Mobile kit has been tested in iOS 5+, Android 4+, and Opera Mobile 12.1+.

Figure E

The UI kits range in price from $9 to $19 each, or can all five be purchased for $39.

While several of the CSS code snippets provided by CSS Flow will require some added scripting and coding to get them fully functioning as parts of your existing or new code, the snippets do afford a great starting point for specific requirements you may have in your web development efforts.

About Ryan Boudreaux

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks