Posts Tagged:css

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.

The Different Logical Ways to Group CSS Properties

Over on the MediaTemple Blog, I talk about some logical possibilities for how you might arrange the declarations within a ruleset. Personally: I’ll admit, I traditionally haven’t had much of an opinion about the ordering of CSS properties. I just add what I need. I think they end up largely “grouped” by related things because that’s just how my brain spits them out. While writing this, I looked into CSS Comb again, and I’m starting to be convinced this is a good idea. I don’t know if it’s worth the tedious work of manually organizing properties, but I can see the advantages of code that is meticulously organized, so having a computer do it seems like a good idea. Direct Link to Article — Permalink The Different Logical Ways to Group CSS Properties is a post from CSS-Tricks Source: CssTricks

Which Projects Need React? All Of Them!

When does a project need React? That’s the question Chris Coyier addressed in a recent blog post. I’m a big fan of Chris’ writing, so I was curious to see what he had to say. In a nutshell, Chris puts forward a series of good and bad reasons why one might want to use React (or other similar modern JavaScript libraries) on a project. Yet while I don’t disagree with his arguments, I still find myself coming to a different conclusion. So today, I’m here to argue that the answer to “When does a project need React?” is not “it depends”. It’s “every time”. React vs Vue vs Angular vs… First, let’s get something out of the way: in his article, Chris picked React as a stand-in for “front-end libraries” in general, and I’ll do the same here. Plus, React is what I’m most familiar with from my ongoing work…

Read More →


The “normal” workflow I’m sure we’ve all lived is that design happens, then coding happens. A healthy workflow has back-and-forth between everyone involved in a project, including designers and developers, but still: The code is the final product. You design your way to code, you don’t code your way to designs. It was only a little over a month ago when it was news that Sketch 43 was moving to a .JSON file format. The final release notes drop the news quite blasé: Revised file format But Jasim A Basheer rightly made a big deal of it: … it will fundamentally change how the design tools game will be played out in the coming years. “enables more powerful integrations for third-party developers” is stating it lightly. This is what the fine folks at Bohemian Coding has done — they opened up Sketch’s file format into a neat JSON making it possible for…

Read More →

Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually

In CSS, some properties have shorthand. One property that takes separated values. Syntactic sugar, as they say, to make authoring easier. Take transition, which might look something like: .element { transition: border 0.2s ease-in-out; } We could have written it like this: .element { transition-property: border; transition-duration: 0.2s; transition-timing-function: ease-in-out; } Every “part” of the shorthand value has its own property it maps to. But that’s not true for everything. Take box-shadow: .element { box-shadow: 0 0 10px #333; } That’s not shorthand for other properties. There is no box-shadow-color or box-shadow-offset. That’s where Custom Properties come to save us! We could set it up like this: :root { –box-shadow-offset-x: 10px; –box-shadow-offset-y: 2px; –box-shadow-blur: 5px; –box-shadow-spread: 0; –box-shadow-color: #333; } .element { box-shadow: var(–box-shadow-offset-x) var(–box-shadow-offset-y) var(–box-shadow-blur) var(–box-shadow-spread) var(–box-shadow-color); } A bit verbose, perhaps, but gets the job done. Now that we’ve done that, remember we get some uniquely cool things:…

Read More →

PWA Directory

The other day I was watching an interview with Ade Oshineye where he discussed his work on the PWA Directory at Google, a showcase of progressive web apps. And it’s pretty neat! It lists a whole bunch of PWAs out there and you can filter them by Lighthouse metrics – that’s the auditing tool from Google that scores a web app and gives us developers the ability to improve them. Direct Link to Article — Permalink PWA Directory is a post from CSS-Tricks Source: CssTricks

The Many Tools for Shape Morphing

To no one’s surprise, I’m sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There are some native technologies, some libraries that leverage those, and some libraries that do things all on their own. Let’s look at some of the options (with demos) and weigh the advantages and disadvantages. SMIL The original, native technology for shape morphing is SMIL. We have both a guide to SMIL on CSS-Tricks, and an article talking about replacements for it, since it doesn’t work in Microsoft browsers and Blink threatened to yank it at one point. I wouldn’t suggest doing important work in SMIL but it is OG shape morphing. See the Pen Sitepoint Challenge #1 in SVG and SMIL by Noah Blon (@noahblon) on CodePen. Our article How SVG Shape Morphing Works covers SMIL shape morphing…

Read More →

How to Create the Standard Bootstrap Navbar Button for Mobile Devices

Bootstrap is an HTML, CSS and JavaScript framework. Using it, you can easily build mobile-first responsive websites. It offers you plenty of pre-set CSS styling for web elements, including navigation bars. In this tutorial, you will learn how to easily create a basic Bootstrap responsive navbar. Then you’ll learn how to use a Bootstrap Standard Navbar Button for mobile devices. [[ This is a content summary only. Visit for full links, other content, and more! ]] Source:

Think you know the top web browsers?

If I had to blindly guess about global marketshare, I would have gotten it wrong. I probably would have forgotten about UC browser (kind of the point of Peter O’Shaughnessy’s article) that’s so huge in Asia. I would have guessed Firefox has a slight edge on Safari (turns out Firefox is half the share of Safari), and that Edge would be outpacing IE by now (also only half). This is good dinner party conversation fodder, but I wouldn’t base any major decision making on it. The only stats that matter at your websites stats. Here’s this sites, in the last 7 days. There is always the chicken-or-egg conundrum though. If you support a browser that you didn’t before, doesn’t it stand to reason the numbers would go up for it? The time-on-site and bounce rate stuff would get better, anyway. Direct Link to Article — Permalink Think you know the…

Read More →

Persistence Has a Weird Way of Getting Things Done

I like to think of myself as having a decent amount of persistence. But of course, life is complicated. Sometimes I have it and sometimes I don’t. I have in some areas and not in others. C’est la vie. Here’s two very short things that I’ve written up along this theme. I once wrote this about it, in a little article I called Mediocre Ideas, Showing Up, and Persistence: Truly great ideas are rare. Jokers like us will probably never have one. That’s OK. We have mediocre ones all the time and they work just fine. I once had an idea to start a blog about CSS. I sucked at writing. I sucked at designing. The vibe at the time was that everything important about CSS had already been written. Nobody told me. I didn’t just have the idea, I did it. That’s the showing up part. Hands on the…

Read More →

Senior Python Developer. ONLY H4,L2,GC,GC-EAD,USC – PIVOSYS – Iselin, NJ

Senior Python Developer*. JavaScript (React, jQuery), PHP (CodeIgniter, Drupal), CSS Bootstrap. West Chester Pennsylvania*….From Indeed – Thu, 20 Apr 2017 21:59:09 GMT – View all Iselin jobs Source:

Legally Binding Electronic Signatures with eversign

There are few things more obnoxiously tedious than being asked to sign a document over email, where they tell you to print it, sign it, scan it, and email it back. One time I Photoshopped my signature onto a document, and they were able to tell somehow and made me go through the whole rigamarole instead. We’re working with highly sophisticated computers here, can’t I sign this thing with the web somehow? Yes, you can! As long as the company asking is using eversign, that is. Companies of any size can use eversign, from individual freelancers to medium-sized businesses to mega corporations. You upload your documents (like a PDF contract, rental agreement, or anything else you need a legally-binding signature on) and use their wonderfully nice Document Builder UI to indicate the areas that information or signatures from who the document is being sent to. Here’s a little video of…

Read More →

The Power of Custom Directives in Vue

When you’re initially learning a JavaScript framework, it feels a little like being a kid in a candy store. You take in everything available to you, and right off the bat, there are things that will make your life as a developer easier. Inevitably though, we all reach a point working with a framework where we have a use-case that the framework doesn’t cover very well. The beautiful thing about Vue is that it’s incredibly feature-rich. But even if you have an edge case not covered by the framework, it’s got your back there as well, because you can quite easily create a custom directive. What are directives? I’ve written a post here on directives in my guide on Vue.js, but let’s do a refresher. Directives are tiny commands that you can attach to DOM elements. They are prefixed with v- to let the library know you’re using a special…

Read More →

When Does a Project Need React?

You know when a project needs HTML and CSS, because it’s all of them. When you reach for JavaScript is fairly clear: when you need interactivity or some functionality that only JavaScript can provide. It used to be fairly clear when we reached for libraries. We reached for jQuery to help us simplify working with the DOM, Ajax, and handle cross-browser issues with JavaScript. We reached for underscore to give us helper functions that the JavaScript alone didn’t have. As the need for these libraries fades, and we see a massive rise in new frameworks, I’d argue it’s not as clear when to reach for them. At what point do we need React? I’m just going to use React as a placeholder here for kinda large JavaScript framework thingies. Vue, Ember, Svelte… whatever. I understand they aren’t all the same, but when to reach for them I find equally nebulous.…

Read More →

Total HTML Agnosticism

A couple of good posts on technology agnosticism lately. Brad Frost says the design system itself is higher level than any particular technology: … it doesn’t bet the farm on any one technology, the system is able to adapt to inevitable changes to tools, technologies, and trends. Jonathan Snook thinks Mustache is good choice for otherwise technologically agnostic templating: I like it because of its simplicity and because it requires the heavy work with the data to be done before it sees a template. Here’s a slide I used at a recent workshop: What I was mostly referring to is total HTML agnosticism. It doesn’t matter (to me) where the HTML comes from. Did Drupal produce the HTML? Fine. Is the HTML in JSX? Fine. Is it a Mustache template? Fine. Am I editing totally raw HTML like elite hacker? Fine. Am I piecing together partials in Nunjucks. Fine. Is…

Read More →

Visual Designer – U.S. Small Business Administration – Washington, DC

Knowledge of HTML/CSS and Drupal. Deliver final design assets with annotations for developers to implement on the live website…. $66,510 – $131,767 a yearFrom Indeed – Wed, 19 Apr 2017 15:36:38 GMT – View all Washington jobs Source:

UX/Product Designer – U.S. Small Business Administration – Washington, DC

Knowledge of HTML/CSS and Drupal. Deliver final design assets for developers to implement on the live website…. $66,510 – $131,767 a yearFrom Indeed – Wed, 19 Apr 2017 15:34:29 GMT – View all Washington jobs Source:

The Can-Do’s of CodePen Projects

We just recently launched Projects, the latest big feature over on CodePen. It’s quite a bit different than the Pen Editor, so let’s take a look at all the things it can do! A Complete File System, and Complete HTML Files With CodePen Projects, you get a sidebar of files for you to put whatever files you like. That’s different than the Pen Editor on CodePen, which only gives you the HTML, CSS, and JavaScript editor to work with. While that’s super convenient for many types of demos, it can be limiting. What if you need multiple HTML files to link between? What if you need partials to include as needed? What if you need to upload other files to work with just for this demo? With Projects, you have complete control over the entire file structure. Create files and folders as needed. HTML files are complete documents, so you…

Read More →

A Vue.js introduction for people who know just enough jQuery to get by

Matt Rothenberg with a Vue.js tutorial playing off Shu Uesugi’s 2015 article React.js Introduction For People Who Know Just Enough jQuery To Get By. Matt doesn’t spend quite as much time comparing what building the UI component would be like in jQuery as compared to Vue as Shu did comparing with React, but it’s just as well. It’s literally the exact same UI component (a New Tweet box) as the React article, and now, 2 years later, without downplaying or knocking jQuery, most folks are ready to just jump in with new frameworks. Remember we have a guide as well! Direct Link to Article — Permalink A Vue.js introduction for people who know just enough jQuery to get by is a post from CSS-Tricks Source: CssTricks

Between the Lines

Media queries are great for changing values in sudden snaps at different screen sizes. But, combining the power of calc() and viewport units like vw and vh , we can get an awful lot of fluidity across our layouts. For this we’ll use a technique called linear interpolation. Linear interpolation is a formula used to find a value between two points on a line. In our case those two points are CSS values, like font-sizes, margins or widths, that we want to interpolate between over a set of viewport widths. The reason we might want to interpolate between values over a set of viewport widths is to avoid having to create multiple breakpoints to control the flow of our content when the viewport changes. Instead, we let the user’s browser calculate, according to our instructions, what values it gets. Let me explain. The following snippet is a Sass function based…

Read More →

Back to Top