Tag: CSS

Cutestrap – Sassy, Opinionated CSS Framework

Posted · Category: Framework, MIT License Cutestrap is a sassy, opinionated CSS Framework. A tiny alternative to Bootstrap. It supports Vertical Rhythm, Consistent pattern for form fields, 8kb minified, Smart defaults for all default elements (Conventional), CSS specificity is very low in the class hierarchy (Configurable), Solid foundation for a living styleguide using KSS. It… Continue reading Cutestrap – Sassy, Opinionated CSS Framework

How to Build a News Website Layout with Flexbox

What You’ll Be Creating It’s not necessary to understand every aspect of Flexbox before you can jump in and get started. In this tutorial, we’re going to introduce a few features of Flexbox whilst designing a “news layout” like the one you can find on The Guardian. The reason we’re using Flexbox is that it… Continue reading How to Build a News Website Layout with Flexbox

15 Free Admin Dashboard Templates (PSD & Sketch)

In recent years, much has changed in the way web users interact with dashboard data and complete simple backend tasks. Layouts are more spacious and mobile-friendly, colors are simpler, typography is highly-readable, interactive charts make data much easier to digest, and advancements in technology have made completing tasks much quicker. The admin panels of 2016… Continue reading 15 Free Admin Dashboard Templates (PSD & Sketch)

Optimizing Google PageSpeed to 100 in WordPress

What You’ll Be Creating How to Reach a PageSpeed of 100 Welcome to part two of our series on Google PageSpeed. In the first episode, I optimized the PageSpeed of my site’s then theme, MySiteMyWay’s Construct. I managed to get to 70 Mobile and 86 Desktop.  However, with MySite’s closure, I chose a new theme and reached… Continue reading Optimizing Google PageSpeed to 100 in WordPress

New Course: Practical Web Animation

The days of animation-heavy websites are fading, but there is still something to be said for a site with small amounts of subtle, eye-catching motion to help users interpret interfaces.  In our new course, Practical Web Animation, Envato Tuts+ instructor Craig Campbell will show you practical ways to create animations for buttons, pricing tables, and other… Continue reading New Course: Practical Web Animation

27 Search Boxes With HTML and CSS – CSS Paradise

CSS experiments with a search form input and button. In this collection are the pens for anything related to search box, search bar, global search area that we can put to a website page. Searching Animation Inspired by Another Set of Eyes by Frank Rodriguez.*needs work in Firefox but looks quite nice in Chrome and… Continue reading 27 Search Boxes With HTML and CSS – CSS Paradise

Selecting Parent Elements with CSS and jQuery

There have been occasions where I’ve wished I was able to select a parent element with CSS–and I’m not alone on this matter. However, there isn’t such thing as a Parent Selector in CSS, so it simply isn’t possible for the time being. In this tutorial we will walk through a few cases where having a CSS… Continue reading Selecting Parent Elements with CSS and jQuery

New Course: The Complete Guide to CSS Positioning

If you want to get a comprehensive but concise overview of CSS positioning, our new course is for you.  The Complete Guide to CSS Positioning consists of just eight video lessons totalling less than an hour of viewing time, but by the time you’ve finished it, you’ll have a firm grasp of the essential principles you… Continue reading New Course: The Complete Guide to CSS Positioning

Hands On Improving Google PageSpeed

What You’ll Be Creating What Is Google PageSpeed? Google PageSpeed is a free tool that assesses the performance and usability of your website for mobile and desktop platforms. It’s extra important because Google uses it in determining key elements of our SEO ranking, i.e. how high we appear in their search results. If you want more background… Continue reading Hands On Improving Google PageSpeed

How Designers and Developers Can Collaborate Using Sketch and Zeplin

Collaboration between designers and developers is essential to the success of a web project, and it’s a measure of a team’s success. Whilst sharing the same workspace is invaluable, having an online source of truth that helps with this collaboration is incredibly helpful. In this article we’re going to look at Zeplin and how it… Continue reading How Designers and Developers Can Collaborate Using Sketch and Zeplin

Quick Tip: Using CSS Counters to Style Incremental Elements

In this quick tip, we’ll cover the very basics of CSS counters; a useful, yet not so well-known CSS feature. When we’re done building our demo, we’ll take a look at some real world examples of sites which take advantage of CSS counters. The Goal: Styling an Ordered List As a first step, let’s look at the… Continue reading Quick Tip: Using CSS Counters to Style Incremental Elements

An Interactive 3D Mall Map Concept

Advertise here via BSA Today Codrops has shared an Interactive 3D Mall Map experiment with us. The idea is to show a mall map with all its floors in perspective. Additionally, we have a search in a sidebar that allows to filter mall spaces. Once a floor is selected, we show some pins as indicators… Continue reading An Interactive 3D Mall Map Concept

New Course: Advanced Animation With GSAP Plugins

What You’ll Be Creating The GreenSock Animation Platform is a powerful JavaScript library for animating HTML elements in the browser. In our new course, Advanced Animation With GSAP Plugins, you will learn how to take your GSAP animations to the next level using the plugins that come with the platform. What You’ll Learn Our recent GreenSock Animation… Continue reading New Course: Advanced Animation With GSAP Plugins

Better CSS Drop Caps With “initial-letter”

Drop caps are a form of decoration sometimes used at the beginning of a block of text; the initial letter running several lines deep and indenting the body text within these lines.  Drop cap example, as found on The Walrus Drop cap example, as found on Nautilus It’s a typographic tradition as old as the… Continue reading Better CSS Drop Caps With “initial-letter”

How to Use BrowserSync for Faster Development

BrowserSync is an automation tool that makes web development faster. In the past we’ve automated a lot of actions like compilation of SASS files, image compression etc. BrowserSync brings a whole new type of automation to the table with batteries included. BrowserSync makes your tweaking and testing faster by synchronizing file changes and interactions across… Continue reading How to Use BrowserSync for Faster Development

Weekly Inspiration: Full-on Full Screen Home Pages

The full screen splash is one of the most familiar patterns on the web at the moment. Some love it, some loath it, but whatever your feelings let’s take a look at some noteworthy examples and talk about best practices while we’re at it. A Note on Design Convergence The term “design convergence” refers to… Continue reading Weekly Inspiration: Full-on Full Screen Home Pages

Everything You Need to Know About WordPress Child Themes

A child theme is a set of styling guidelines and/or functions which are utilized to incorporate functionality or replace the appearance of an existing WordPress theme. Child themes can be modified without altering the original code of your theme, allowing you to make changes as small as changing a couple of colors, or as extensive… Continue reading Everything You Need to Know About WordPress Child Themes

Style Guides in Sketch

Product design is a team sport. The best teams tend to have lots of moving parts: designers and developers and managers and researchers all working in concert on a single, refined vision. All those moving pieces come with a cost, though, in the form of meetings, emails, and file versioning—all things we do in order… Continue reading Style Guides in Sketch

How to Work With Images in Shopify

When starting out with a new platform, such as Shopify, there’s a lot to learn. Whilst Liquid, the template language used in Shopify themes, is very readable and easy to get started with, one area of Shopify development which can often cause confusion for new theme developers is images. I believe the main reason for… Continue reading How to Work With Images in Shopify

How Good Is JavaScript for Building a Large Scale Web Application?

According to the most statistics that are recent on w3techs.com, significantly more than 89percent of sites presently utilize JavaScript as a client-side program writing language. As a cross-platform and programming that is lightweight, JavaScript makes it easier for programmers to build responsive websites and web applications that work with seamlessly with popular web browsers, operating… Continue reading How Good Is JavaScript for Building a Large Scale Web Application?

How to Make Floating Input Labels With HTML5 Validation

TL;DR Replace your JavaScript validation with HTML5 validation. It’s easier than you think, and gives you a ton of markup and styling control. Try this demo: What We’re Doing Here So you need to validate a form. You do the right thing and start with server-side validation. Then, if you’re a good web-designer, you add… Continue reading How to Make Floating Input Labels With HTML5 Validation

The 15 Best Material Design Frameworks and Libraries

Material design was developed by Google, with the basic idea to create a unified style for all of the company’s web and mobile apps. It is based on many principles including things like proper animations, responsiveness, and smart usage of colors and shadows. You can read about the guidelines in full detail here. Although Google’s design language is… Continue reading The 15 Best Material Design Frameworks and Libraries