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.


Why Do You Use Frameworks?

Nicole Sullivan asked. People said: 🐦… for the same reason that I buy ingredients rather than growing/raising all of my own food. 🐦 I write too many bugs without them. 🐦 Avoiding bikeshedding. 🐦 … to solve problems that are adjacent to, but distinct from, the problem I’m trying to solve at hand. 🐦 Because to create the same functionality would require a much larger team 🐦 I want to be able to focus on building the product rather than the tools. 🐦 it’s easier to pick a framework and point to docs than teach and document your own solution. 🐦 faster development 🐦 They have typically solved the problems and in a better way than my first version or even fifth version will be. There are tons more replies. Jeremy notes “exactly zero mention end users.” I said: Sometimes I just wanna be told what to do. Nicole stubbed…

Read More →

Using Feature Detection, Conditionals, and Groups with Selectors

CSS is designed in a way that allows for relatively seamless addition of new features. Since the dawn of the language, specifications have required browsers to gracefully ignore any properties, values, selectors, or at-rules they do not support. Consequently, in most cases, it is possible to successfully use a newer technology without causing any issues in older browsers. Consider the relatively new caret-color property (it changes the color of the cursor in inputs). Its support is still low but that does not mean that we should not use it today. .myInput { color: blue; caret-color: red; } Notice how we put it right next to color, a property with practically universal browser support; one that will be applied everywhere. In this case, we have not explicitly discriminated between modern and older browsers. Instead, we just rely on the older ones ignoring features they do not support. It turns out that…

Read More →

Dealing with Dependencies Inside Design Systems

Dependencies in JavaScript are pretty straightforward. I can’t write library.doThing() unless library exists. If library changes in some fundamental way, things break and hopefully our tests catch it. Dependencies in CSS can be a bit more abstract. Robin just wrote in our newsletter how the styling from certain classes (e.g. position: absolute) can depend on the styling from other classes (e.g. position: relative) and how that can be — at best — obtuse sometimes. Design has dependencies too, especially in design systems. Nathan Curtis: You release icon first, and then other components that depend on it later. Then, icon adds minor features or suffers a breaking change. If you update icon, you can’t stop there. You must ripple that change through all of icon’s dependent in the library too. “If we upgrade and break a component, we have to go through and fix all the dependent components.” — Jony Cheung, Software Engineering…

Read More →

Redesigning a website using CSS Grid and Flexbox

For the last 15 years, I’ve been using floats for laying out a web pages on dri.es. This approach to layout involves a lot of trial and error, including hours of fiddling with widths, max-widths, margins, absolute positioning, and the occasional calc() function. I recently decided it was time to redesign my site, and decided to go all-in on CSS Grid and Flexbox. I had never used them before but was surprised by how easy they were to use. After all these years, we finally have a good CSS layout system that eliminates all the trial-and-error. I don’t usually post tutorials on my blog, but decided to make an exception. What is our basic design? The overall layout of the homepage for dri.es is shown below. The page consists of two sections: a header and a main content area. For the header, I use CSS Flexbox to position the site…

Read More →

SVG Marching Ants

Maxim Leyzerovich created the marching ants effect with some delectably simple SVG. See the Pen SVG Marching Ants by Maxim Leyzerovich (@round) on CodePen. Let’s break it apart bit by bit and see all the little parts come together. Step 1: Draw a dang rectangle We can set up our SVG like a square, but have the aspect ratio ignored and have it flex into whatever rectangle we’d like. <svg viewbox=’0 0 40 40′ preserveAspectRatio=’none’> <rect width=’40’ height=’40’ /> </svg> Right away, we’re reminded that the coordinate system inside an SVG is unit-less. Here we’re saying, “This SVG is a 40×40 grid. Now draw a rectangle covering the entire grid.” We can still size the whole SVG in CSS though. Let’s force it to be exactly half of the viewport: svg { position: absolute; width: 50vw; height: 50vh; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } Step…

Read More →

CSS border-radius can do that?

Nils Binder has the scoop on how to manipulate elements by using border-radius by passing eight values into the property like so: .element { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } This is such a cool technique that he also developed a tiny web app called Fancy-Border-Radius to see how those values work in practice. It lets you manipulate the shape in any which way you want and then copy and paste that code straight into your designs: Cool, huh? I think this technique is potentially very useful if you don’t want to have an SVG wrapping some content, as I’ve seen a ton of websites lately use “blobs” as graphic elements and this is certainly an interesting new way to do that. But it also has me wondering how many relatively old and familiar CSS properties have something sneaky that’s hidden and waiting for us.…

Read More →

The fast and visual way to understand your users

(This is a sponsored post.)Hotjar is everything your team needs to: Get instant visual user feedback See how people are really using your site Uncover insights to make the right changes All in one central place If you are a web or UX designer or into web marketing, Hotjar will allow you to improve how your site performs. Try it for free. Direct Link to Article — PermalinkThe post The fast and visual way to understand your users appeared first on CSS-Tricks. Source: CssTricks

Did we get anywhere on that :nth-letter() thing?

No, not really. I tried to articulate a need for it in 2011 in A Call for ::nth-everything. Jeremy takes a fresh look at this here in 2018, noting that the first published desire for this was 15 years ago. All the same use cases still exist now, but perhaps slightly more, since web typography has come along way since then. Our desire to do more (and hacks to make it happen) are all the greater. I seem to recall the main reason we don’t have these things isn’t necessarily the expected stuff like layout paradoxes, but rather the different typed languages of the world. As in, there are languages in which single characters are words and text starts in different places and runs in different directions. The meaning of “first” and “line” might get nebulous in a way specs don’t like. Direct Link to Article — PermalinkThe post Did…

Read More →

Introducing GitHub Actions

It’s a common situation: you create a site and it’s ready to go. It’s all on GitHub. But you’re not really done. You need to set up deployment. You need to set up a process that runs your tests for you and you’re not manually running commands all the time. Ideally, every time you push to master, everything runs for you: the tests, the deployment… all in one place. Previously, there were only few options here that could help with that. You could piece together other services, set them up, and integrate them with GitHub. You could also write post-commit hooks, which also help. But now, enter GitHub Actions. Actions are small bits of code that can be run off of various GitHub events, the the most common of which is pushing to master. But it’s not necessarily limited to that. They’re all directly integrated with GitHub, meaning you no…

Read More →

How to Import a Sass File into Every Vue Component in an App

If you’re working on a large-scale Vue application, chances are at some point you’re going to want to organize the structure of your application so that you have some globally defined variables for CSS that you can make use of in any part of your application. This can be accomplished by writing this piece of code into every component in your application: <style lang=”scss”> @import “./styles/_variables.scss”; </style> But who has time for that?! We’re programmers, let’s do this programmatically. Why? You might be wondering why we would want to do something like this, especially if you’re just starting out in web development. Globals are bad, right? Why would we need this? What even are Sass variables? If you already know all of this, then you can skip down to the next section for the implementation. Companies big and small tend to have redesigns at least every one-to-two years. If your…

Read More →

Why Using reduce() to Sequentially Resolve Promises Works

Writing asynchronous JavaScript without using the Promise object is a lot like baking a cake with your eyes closed. It can be done, but it’s gonna be messy and you’ll probably end up burning yourself. I won’t say it’s necessary, but you get the idea. It’s real nice. Sometimes, though, it needs a little help to solve some unique challenges, like when you’re trying to sequentially resolve a bunch of promises in order, one after the other. A trick like this is handy, for example, when you’re doing some sort of batch processing via AJAX. You want the server to process a bunch of things, but not all at once, so you space the processing out over time. Ruling out packages that help make this task easier (like Caolan McMahon’s async library), the most commonly suggested solution for sequentially resolving promises is to use Array.prototype.reduce(). You might’ve heard of this…

Read More →

WordPress.com

Hey! Chris here, with a big thanks to WordPress, for not just their sponsorship here the last few months, but for being a great product for so many sites I’ve worked on over the years. I’ve been a web designer and developer for the better part of two decades, and it’s been a great career for me. I’m all about learning. The more you know, the more you’re capable of doing and the more doors open for you, so to speak, for getting things done as a web worker. And yet it’s a dance. Just because you know how to do particular things doesn’t mean that you always should. Part of this job is knowing what you should do yourself and what you should outsource or rely on for a trustworthy service. With that in mind, I think if you can build a site with WordPress.com, you should build your…

Read More →

Getting Started with Vue Plugins

In the last months, I’ve learned a lot about Vue. From building SEO-friendly SPAs to crafting killer blogs or playing with transitions and animations, I’ve experimented with the framework thoroughly. But there’s been a missing piece throughout my learning: plugins. Most folks working with Vue have either comes to rely on plugins as part of their workflow or will certainly cross paths with plugins somewhere down the road. Whatever the case, they’re a great way to leverage existing code without having to constantly write from scratch. Many of you have likely used jQuery and are accustomed to using (or making!) plugins to create anything from carousels and modals to responsive videos and type. We’re basically talking about the same thing here with Vue plugins. So, you want to make one? I’m going to assume you’re nodding your head so we can get our hands dirty together with a step-by-step guide…

Read More →

HTML for Numeric Zip Codes

I just overheard this discussion on Twitter, kicked off by Dave. Me (coding a form): <input id=”zip” type=”number”>Tiny Devil (appears on shoulder): Yaaas! I love the optimism, ship it!Me: Wait, why are you here? Is this going to blow up on me? What do you know that I don’t? — Dave SPOOPert (@davatron5000) October 9, 2018 It seems like zip codes are just numbers, right? So… <input id=”zip” name=”zip” type=”number”> The advantage there being able to take advantage of free validation from the browser, and triggering a more helpful number-based keyboard on mobile devices. But Zach pointed out that type=”number” is problematic for zip codes because zip codes can have leading zeros (e.g. a Boston zip code might be 02119). Filament group also has a little lib for fixing this. This is the perfect job for inputmode, as Jeremy suggests: <input id=”zip” name=”zip” type=”text” inputmode=”numeric” pattern=”^(?(^00000(|-0000))|(d{5}(|-d{4})))$”> But the support is…

Read More →

Sass Selector Combining

Brad Frost was asking about this the other day… Sass people, which way do you do it and why? pic.twitter.com/dIBA9BIuCO — Brad Frost (@brad_frost) October 1, 2018 .c-btn { &__icon { … } } I guess that’s technically “nesting” but the selectors come out flat: .c-button__icon { } The question was whether you do that or just write out the whole selector instead, as you would with vanilla CSS. Brad’s post gets into all the pro’s and con’s of both ways. To me, I’m firmly in the camp of not “nesting” because it makes searching for selectors so much harder. I absolutely live by being able to search my project for fully expanded class names and, ironically, just as Brad was posting that poll, I was stumped by a combined class like this and changed it in one of my own code bases. Robin Rendle also notes the difficulty in…

Read More →

Lazy Loading Images with Vue.js Directives and Intersection Observer

When I think about web performance, the first thing that comes to my mind is how images are generally the last elements that appear on a page. Today, images can be a major issue when it comes to performance, which is unfortunate since the speed a website loads has a direct impact on users successfully doing what they came to the page to do (think conversation rates). Very recently, Rahul Nanwani wrote up an extensive guide on lazy loading images. I’d like to cover the same topic, but from a different approach: using data attributes, Intersection Observer and custom directives in Vue.js. What this’ll basically do is allow us to solve two things: Store the src of the image we want to load without loading it in the first place. Detect when the image becomes visible to the user and trigger the request to load the image. Same basic lazy…

Read More →

A fresh look for dri.es

In 1999, I decided to start dri.es (formally buytaert.net) as a place to blog, write, and deepen my thinking. While I ran other websites before dri.es, my blog is one of my longest running projects. Working on my site helps me relax, so it’s not unusual for me to spend a few hours now and then making tweaks. This could include updating my photo galleries, working on more POSSE features, fixing broken links, or upgrading to the latest version of Drupal. The past month, a collection of smaller updates have resulted in a new visual design for my site. If you are reading this post through an RSS aggregator or through my mailing list, consider checking out the new design on dri.es. Before (left) and after (right). The new dri.es may not win design awards, but will hopefully make it easier to consume the content. My design goals were the…

Read More →

POSTing an Indeterminate Checkbox Value

There is a such thing as an indeterminate checkbox value. It’s a checkbox (<input type=”checkbox”>) that isn’t checked. Nor is it not checked. It’s indeterminate. We can even select a checkbox in that state and style it with CSS! Some curious points though: It’s only possible to set via JavaScript. There is no HTML attribute or value for it. It doesn’t POST (or GET or whatever else) or have a value. It’s like being unchecked. So, say you had a form like this: <form action=”” method=”POST” id=”form”> <input name=”name” type=”text” value=”Chris” /> <input name=”vegetarian” type=”checkbox” class=”veg”> <input type=”submit” value=”Submit”> </form> And, for whatever reason, you make that checkbox indeterminate: let veg = document.querySelector(“.veg”); veg.indeterminate = true; If you serialize that form and take a look at what will POST, you’ll get “name=Chris”. No value for the checkbox. Conversely, had you checked the checkbox in the HTML and didn’t touch it…

Read More →

Back to Top