Tag: CSS

5 Standardized Methods for Writing CSS

CSS is hard to maintain and scale without a well-defined approach. Here are five CSS development methodologies and style guides that can help. 1. SMACSS SMACSS stands for Scalable and Modular Architecture for CSS. A core idea behind this CSS development approach is minimizing the depth of selectors in order to keep them modular as well as to lower dependency on the HTML structure. In SMACSS, there are five style-rule categories: Base, Layout, Module, State, and Theme. 2. CSS Guidelines CSS Guidelines is a comprehensive guide for writing maintainable CSS. It has rules such as limiting stylesheet lines to 80 characters, using soft tabs equal to four spaces, and so forth. 3. OOCSS OOCSS stands for Object-oriented CSS. The central component of this …

Original Article Can Be Found Here:

5 Standardized Methods for Writing CSS

An Introduction to Icon Fonts with Font Awesome and IcoMoon

Icon fonts are all the rage nowadays, with more and more developers taking advantage of them in their designs. If you haven’t yet looked into icon fonts, this article can get you started.I’ll demonstrate the great things we can achieve using icon fonts but first I’ll take a look at what icon fonts are and what are their pros and cons. Then, we’ll examine two popular icon fonts and we’ll see different examples showing how we can use them in our projects. What are Icon Fonts? Icon fonts are just fonts. However, instead of containing letters or numbers, they contain symbols and glyphs. You can style them with CSS in the same way you style regular text which has made them …

View original:

An Introduction to Icon Fonts with Font Awesome and IcoMoon

Why do I love Custom CSS module in Jetpack?

Made by Automattic, Jetpack is one of the most popular plugin for WordPress. It’s not only used on WordPress.com but also on millions of hosted WordPress.org blogs. I did use it when it was first born a long time ago and wasn’t too impressed. But now it has changed a lot and what it brings to users is really powerful. I’m not going to talk everything about Jetpack (you can read a very informative blog post here). I will talk about Custom CSS module in Jetpack, which I’ve just experienced and really love it! 0. What is Custom CSS feature? If you customize a website for clients, there’re occasionally situations that you have to fix CSS or change a small bits …

Original Article Can Be Found Here:

Why do I love Custom CSS module in Jetpack?

Copy Codes from Websites Easily with SnappySnippet

As a web developer, we may occasionally find some inspiring elements on a website that makes you wonder how did they build that thing. Then, you’d think about getting a copy of that code. Chrome Devtools as well as Firebug of Firefox has actually shipped with the feature that makes it easy for us to copy HTML and CSS off a website. However, these tools work to copy only HTML or CSS; you can’t use these tools to copy the CSS related to the HTML element you selected. For example, let’s say you are selecting an HTML element containing a couple of child elements, as follows…

Original Article Can Be Found Here:

Copy Codes from Websites Easily with SnappySnippet

Ideas Behind Responsive Emails

Say you’ve designed an HTML email with 3 columns. Because of limited and weird CSS support in email clients, email design is done with tables. That 3 column design looks great on large-ish screens, but it squishes awkwardly on small screens. Theoretically a media query would save us here, but as we can’t even count on floats we sure can’t count on those. There is still a way though. In this article, I’m just going to poke at some ideas around responsive email. These are not robust, production-ready ideas, I just thought it was fun to think about. It was inspired by listening to Fabio Carneiro speak recently. Fabio works for MailChimp doing all this hardcore email layout wrangling and shared some of the ideas behind responsive …

Original Article Can Be Found Here:

Ideas Behind Responsive Emails


Also published on Medium.

© 2024 Paul Parisi

Theme by Anders NorénUp ↑