background preloader

One% CSS Grid - 12 Columns Fluid CSS Grid System

One% CSS Grid - 12 Columns Fluid CSS Grid System
Related:  Front-endCSSCSS

Making a jQuery Countdown Timer Martin Angelov When building a coming soon or event page, you find yourself in search for a good way to display the remaining time. A countdown gives the feel of urgency, and combined with an email field will yield more signups for your newsletter. Today we are going to build a neat jQuery plugin for displaying a countdown timer. Let’s start with the markup! The HTML We will give the plugin the creative name of “countdown”. Generated markup In the above example, the plugin has been originally called on a div with an id of countdown. Inside is the markup for the digits. The static class of the digits gives them their gradient background and box-shadow. A jQuery Countdown Timer The .countDiv spans are the dividers between the units. But how is this markup generated exactly? The jQuery First let’s write two helper functions used by the plugin: init generates the markup you saw above;switchDigit takes a .position span and animates the digits inside it; assets/countdown/jquery.countdown.js Great! — Your Web, documented Proto: Rapid Prototyping for Responsive Web Design Getting started Proto uses a combination of HTML and compiled SCSS to create your prototypes. If you're new to SCSS there's a quick guide for you to follow below. If you've worked with it before keep going. SCSS 101: The quick guide. At the top of the proto.scss file, you'll find the Proto variables. // Proto vars// Be sure to inlclude appropriate units i.e. Proto comes with these variables predefined, but feel free to change any of the values to match your own requirements. The 'block' class The single most important part of Proto is the .block class. <! Any 'containing' element you create - header,section,article,footer,div etc - should have the .block class applied it. The 'center' class Apply this class to a block to center it within its parent. <! The 'grid' class Grids are a cinch. <! Nesting grids Grids can be nested as far down as you'd like allowing the creation of intricate layouts. <! Hide or show? <! The 'demo' class <! <! The '-to-' class <!

The Square Grid - A simple CSS framework for designers and developers 30 Awesome SVG Animation For Your Inspiration Designers used to create animations in HTML elements using CSS. However, due to the limitations of HTML elements in creating patterns, shapes, and others, they naturally turn to SVG, which offers more interesting capabilities. Working with SVG, we enjoy good browser supprot for SVG animation, and we have more ways to create new animation. You can use both the built-in SVG animation functionality or CSS3 animation (note that not everything can be done by CSS so there is still need for JavaScript). Here I have compiled some amazing animated SVG. Border Animation by Sean McCaffery Made only with CSS, a border forms smoothly around the text, when you hover over the “HOVER” instruction. Elastic SVG Sidebar by Nikolay Talanov The sidebar becomes elastic when you try to pull it away from the side. Pull Down to Refresh by Nikolay Talanov Most pages allow you to “pull down” on the page to refresh. Animated Gradient on Text by Patrick Young Heart Animation by Nikolay Talanov Clock by Mohamad Mohebifar

ColorBox A lightweight customizable lightbox plugin for jQuery View Demos Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content.Lightweight: 10KB of JavaScript (less than 5KBs gzipped).Appearance is controlled through CSS so it can be restyled.Can be extended with callbacks & event-hooks without altering the source files.Completely unobtrusive, options are set in the JS and require no changes to existing HTML.Preloads upcoming images in a photo group.Currently in use on a million-plus websites. Instructions & Help The FAQ has instructions on asking for help, solutions to common problems, and how-to examples. Usage Colorbox accepts settings from an object of key/value pairs, and can be assigned to any HTML element. Settings Public Methods Event Hooks Hey, | Collecting all the cheat sheets 960 Grid System Toast • The no-nonsense CSS grid Unprecedented Control Twelve columns. Six columns. Nine columns. As many columns as you want, in as many combinations as you want. $col-groups: (12, 6, 9); Fixed width gutters No fluid gutter width bullcrap. $gutter-width: 20px; Easy to use, hard to break It takes just a few lines of code to start using Toast. <div class="grid"><div class="grid__col grid__col--3-of-5 grid__col--centered"><p>Centered columns? Limitless* possibilities Nested grids, custom namespaces, simple switches for features like pulls and pushes, responsive layouts, and more. View on GitHub Download Quickstart CSS

Introducing the CSS Grid Layout spec | CSS3 For over half of my career on the web, frontend development involved a lot of creating images in Photoshop, then chopping them up and using markup to construct the design in a browser. Thankfully, CSS has evolved to a level at which we don't need to do much of that any more. Creating rounded corners, gradients and even animations are now possible just using CSS. One area of CSS hasn't evolved quite so quickly: CSS for layout. What is CSS Grid Layout? CSS Grid Layout is a specification for creating two-dimensional grids. Grid is a companion to the Flexible Box Module (flexbox). Creating a Grid To create a grid, we need to use the grid or inline-grid value of the display property, and then set up rows and columns. I then create a grid with CSS: The grid has five equal-width columns and three auto-size rows. grid-template-columns: 1fr 1fr 1fr 1fr 1fr; All the immediate child elements of .grid are now able to be positioned on the grid. Positioning by line numbers Positioning by template areas

Circular, Responsive jQuery Carousel - CarouFredSel Easy Carousels in jQuery & WordPress Carousels in WordPress just got a thousand times better. carouFredSel takes the awesome power of the carouFredSel jQuery plugin and integrates it into WordPress so you can create unlimited carousels in your WordPress site without touching any code. Simply upload your images, drag and drop re-order them, add some captions and you’re good to go. Simple or Advanced Configuration carouFredSel comes with three configurations modes, “Basic” mode where you can choose some of our built in layout styles and keep things uber simple, “Advanced” mode or “Super User” mode where you can literally edit the configuration like you would when using the jQuery plugin for ultimate control and flexibility. Usual Awesomeness Built In Not only do you get the amazing features above, but you get all the other awesome features that we bake in to our WordPress plugins to make the experience as ninja as possible. Free to Use & Abuse Media Manager Plus Integration

Web Culture: Grid-based Layout Designs The semantic web has brought on a new generation of Internet technology. As designers and developers work together to redefine the rules of the web, the number of open-source projects and third-party APIs continues to grow. The opinions of web scholars differ on the use of grid systems. Many argue that setting grid points limits the creativity of designers. Others contend that a grid provides a scientific basis for a design to be perfected. Both sides provide interesting arguments. The grid isn’t a master key to perfect design. A Comparison to the Classic Web Older generations used design as a control mechanism. In their wake, a new web culture is stirring. One reason for this development is the significant increase in the number of people working on the semantic web. Working for a pay day is satisfying, but not something to be passionate about. Where Grids Have Evolved There hasn’t been a major study comparing pre-standards and post-standards web design techniques. Visual Grid Designs

34 Responsive Grid System