TUTORIALS - Designbeep

Kickoff – A Lightweight Front-end Framework

Kickoff is a lightweight front-end framework for creating scalable, responsive sites.Kickoff comes with a robust CSS framework; it provides many sensible defaults so that you can get your project up and running in the shortest possible time. Features: – Mobile-first, responsive philosophy – Rock-solid CSS framework using Sass (.scss) preprocessor – Starter content styles: typography, grids & components – Starter form element styles: stacked on small-screen to 2-column (if you choose) at the breakpoint of…

Grd – A CSS grid framework using Flexbox

Grd is a CSS grid framework using Flexbox. Only 512 bytes (Gzipped).Grd is simple, lightweight and flexible. Features: – Simple: Provides just 2 base classes Grid and Cell and some modifiers – Light-weight: Only 512 bytes (Gzipped) – Flexible: Easy to use Flexbox features

StringBean – Responsive CSS Framework

The featherweight responsive CSS Framework based on a 16-point system, rather than the traditional 12-point system that other frameworks use. Sometimes, 12 is just too few, especially on a high resolution screen, such as 4K – at 4K String Bean comes into its own! This gives the developer the power to divide the screen up in more finite segments providing you with greater control over the widths of content on your site, especially at higher…

Blaze.CSS – Open Source CSS Framework

Blaze.CSS is an open source modular CSS framework providing great structure for building websites quickly.Blaze is a comprehensive starting point for any website. Components provide great structure, designed to help you improve your development speed it has a shallow learning curve and intuitive naming conventions. You can use any part of Blaze.css in isolation to make your payload small and focused.In 3 easy steps you can have a custom build with easy to use variables…

imagehover.css – A Scalable & Light Image Hover CSS Library

Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable image hover effects. You can choose from over 40 hover effect classes from a CSS library weighing in at a minified size of only 19KB. Once you have included the imagehover.css. Place the following markup in to your HTML document. Edit the URL to your image and add your hover content. Then simply set the imagehover.css class of your choice to the…

Superplaceholder.js – Super charge your input placeholders

Superplaceholder.js is a library to bring your input placeholders to life by cycling multiple instructions in a single input placeholder. Superplaceholder.js works best on latest versions of Google Chrome, Firefox and Safari and Chrome mobile. For all non-supported browsers, the library will graceful degradate without any explicit handling in your code. Superplaceholder.js is less than 1KB minified & gzipped.

Balloon.css – Pure CSS Tooltips

Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS.You can also add any HTML special character to your tooltips, or even use third-party Icon fonts: Balloon.css make use of pseudo-elements thus self-closing elements such as img, input and hr will not render tooltips. Also keep in mind that if pseudo elements are already in use on a element, the tooltip will conflict with them resulting in potential…

Tasty – CSS Animated Hamburger Icons

Tasty Hamburgers is a collection of tasty CSS-animated hamburger icons. There are 10 animated hamburger icons and also included is the source as a Sass library(Download and unzip the source files. Copy the files from the _sass/hamburgers directory into your project). It’s modular and customizable, so cook up your own hamburger. Hamburger menu icons can be useful in the right context, but they’re not the most accessible. A label can help make it more obvious…

Creative Letter Animations With SVG

This is an experimental plugin for animating SVG letters using Segment. The idea is to animate the path strokes of an interesting display font in a creative way.It’s been created by Codrops. Letters disappear and appear in an artistic way, getting drawn along their lines that allows to animate a font letter-by-letter.The first demo shows various use cases for different setting of the plugin and for the last couple of examples mo.js has been used.…

Tachyons – Functional CSS for Humans

Tachyons was built for designing fast loading, highly readable, and 100% responsive interfaces with as little css as possible.Modules can be altered, extended, or changed to meet your design needs. Tachyons is available as a series of small self contained CSS modules. They aren’t dependent on each other but are designed to play well together. But Tachyons is also just CSS. And you should feel free to edit CSS that is in your project. Features…