Category Archive for: 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.


Using Custom Properties to Modify Components

Instead of using custom properties to style whole portions of a website’s interface I think we should use them to customize and modify tiny components. Here’s why. Whenever anyone mentions CSS custom properties they often talk about the ability to theme a website’s interface in one fell swoop. For example, if you’re working at somewhere like a big news org then we might want to specify a distinct visual design for the Finance section and the Sports section – buttons, headers, pull quotes and text color could all change on the fly. Custom properties would make this sort of theming easy because we won’t have to add a whole bunch of classes to each component. All we’d have to do is edit a single variable that’s in the :root, plus we can then edit those custom props with JavaScript which is something we can’t do with something like Sass variables.…

Read More →

Saving SVG with Space Around It from Illustrator

Say you have a graphic like this in Adobe Illustrator: Note how the art doesn’t touch the edges of the artboard. Say you want that space around it, and you want to save it as SVG for use on the web. Nope: Save for Web THE CLAW! You’ll see space around here, but unfortunately the classic Save for Web dialog doesn’t export as SVG at all, so that’s not really an option. They are already calling this a “legacy” feature, so I imagine it’ll be gone soon. Nope: Export As The “Export As” feature supports SVG, and you’ll likely be pretty pleased with the output. It’s fairly optimized, cruft-free, and pretty much ready to use on the web. But… it crops to the art with no option to change that, so we’ll lose the space around that we’re shooting for here. A possible work around here is putting a rectangle…

Read More →

Visual Email Builder Apps

I bet y’all know that apps like Campaign Monitor and MailChimp have visual email builders built right into them. You drag and drop different types of content right into a layout. You edit text right within the email. It’s nice. It’s a lot nicer than editing the quagmire of HTML underneath, anyway! But not everybody needs all the rest of the features that those apps bring, like list management and the actual sending of the email. Perhaps you have an app that already handles that kind of thing. You just need to design some emails, get the final HTML, and use it in your own app. When I was looking around at email tooling, I was surprised there were a good number of apps that help just with the visual email building. Very cool. Toptol BEE free EDMdesigner RED (Responsive Email Designer) Taxi for Email I haven’t used any of…

Read More →

Oxygen – The WordPress Visual Site Builder for Real Designers?

WordPress page builders are generally shunned by those who know how to code. They are generally bloated and slow. And you are offered very limited customization options. But what if there was a visual site builder meant for advanced, professional website designers? It turns out there is! It’s called Oxygen, and it’s quickly becoming the tool of choice for WordPress web designers. Notice that with Oxygen, you design your entire site – content, headers, footers, menus, etc. It totally replaces your WordPress theme. All pages are constructed from fundamental HTML elements – section, div, h1…6, p, span, a, img, and a few more. Then, you visually edit CSS properties to get everything looking the way you want. So unlike a typical page builder, you can design anything. It’s like hand-coding, but visually. Think Webflow, but for WordPress. To integrate with WordPress and design layouts for posts, custom post types, archives,…

Read More →

Using the Paint Timing API

It’s a great time to be a web performance aficionado, and the arrival of the Paint Timing API in Chrome 60 is proof positive of that fact. The Paint Timing API is yet another addition to the burgeoning Performance API, but instead of capturing page and resource timings, this new and experimental API allows you to capture metrics on when a page begins painting. If you haven’t experimented with any of the various performance APIs, it may help if you brush up a bit on them, as the syntax of this API has much in common with those APIs (particularly the Resource Timing API). That said, you can read on and get something out of this article even if you don’t. Before we dive in, however, let’s talk about painting and the specific timings this API collects. Why do we need an API for measuring paint times? If you’re reading…

Read More →

A Poll About Pattern Libraries and Hiring

I was asked (by this fella on Twitter) a question about design patterns. It has an interesting twist though, related to hiring, which I hope makes for a good poll. Note: There is a poll embedded within this post, please visit the site to participate in this post’s poll. I’ll let this run for a week or two. Then (probably) instead of writing a new post with the results, I’ll update this one with the results. Feel free to comment with the reasoning for your vote. A Poll About Pattern Libraries and Hiring is a post from CSS-Tricks Source: CssTricks

(An Interview About) imgix Page Weight

Imgix has been a long-time display ad sponsor here on CSS-Tricks. This post is not technically sponsored, I just noticed that they released a tool for analyzing image performance at any given URL that is pretty interesting. We know web performance is a big deal. We know that images are perhaps the largest offender in ballooning page weights across the web. We know we have tools for looking at page performance as a whole. It seems fairly new to me to have tools for specifically analyzing and demonstrating how we could have done better with images specifically. That’s what this Page Weight tool is. Clearly this is a marketing tool for them. You put in a URL, and it tells you how you could have done better, and specifically how imgix can help do that. I’m generally a fan of that. Tools with businesses behind them have the resources and…

Read More →

Jacksonville, FL – Drupal Global Training Days 2017

Start:  2017-09-09 09:00 – 17:00 America/New_York Organizers:  Jitesh Doshi Event type:  Training (free or commercial) Full day of Drupal 8 training Saturday, Sep 9, 2017, 6:00 PM UNF Building 15, Room 22031 UNF Dr Jacksonville, FL 4 Drupalers Attending We are celebrating Drupal Global Training Days 2017 on September 9th with a full day of Drupal 8 training which is free and open to public at University of North Florida.Drupal 8 TrainingThis is a full day of training on Drupal 8 CMS.Drupal 8 is the CMS platform (Content Management System) that lets you build complex web sites and web applicati… Check out this Meetup → What: Drupal Global Training Day – Learn Drupal 8 CMS When: Saturday, September 9, 2017 – 9am to 5pm Cost: free, no cost Organized by: JAX Drupal User Group (Jacksonville, Florida) Where: University of North Florida, Jacksonville, FL – Building 15, Room 2203 How to register?: See…

Read More →

Using ES2017 Async Functions

ES2017 was finalized in June, and with it came wide support for my new favorite JavaScript feature: async functions! If you’ve ever struggled with reasoning about asynchronous JavaScript, this is for you. If you haven’t, then, well, you’re probably a super-genius. Async functions more or less let you write sequenced JavaScript code, without wrapping all your logic in callbacks, generators, or promises. Consider this: function logger() { let data = fetch(‘http://sampleapi.com/posts’) console.log(data) } logger() This code doesn’t do what you expect. If you’ve built anything in JS, you probably know why. But this code does do what you’d expect. async function logger() { let data = await fetch(‘http:sampleapi.com/posts’) console.log(data) } logger() That intuitive (and pretty) code works, and its only two additional words! Async JavaScript before ES6 Before we dive into async and await, it’s important that you understand promises. And to appreciate promises, we need go back one more…

Read More →

Long Distance

A podcast (turns out to be a 2-parter) from Reply All in which Alex Goldman gets a scam phone call about his iCloud account being compromised. He goes pretty far into investigating it, speaking regularly with the people who run these scams. Especially resonant for me, as someone who also spoke directly with a hacker who’s goal was doing me harm. I’ve long struggled with thinking rationally about stuff like this. Direct Link to Article — Permalink Long Distance is a post from CSS-Tricks Source: CssTricks

Crafting Webfont Fallbacks

There is a great bit in here where Glen uses Font Style Matcher to create some CSS for a fallback font that has font-size, line-height, font-weight, letter-spacing, and word-spacing adjusted so perfectly that when the web font does load, the page hardly shifts at all. Like barely noticeable FOUT. Maybe we’ll call it FOCST (Flash of Carefully Styled Text). Direct Link to Article — Permalink Crafting Webfont Fallbacks is a post from CSS-Tricks Source: CssTricks

How do you start a sentence with “npm”?

This npm. Asking this question was a fun little journey. Right on the npm website, the very first sentence starts with “npm”, and they do not capitalize it. That’s a pretty good precedent for not capitalizing it. It certainly looks awkward though, which is why I asked the question to begin with. It doesn’t feel right to me to start a sentence that way, and I’m sure other some other people would look at it and see a mistake. Their own documentation forbids capitalization as well: Straight from Raquel Vélez, an employee: always npm, even if starting the sentence. (this is a common question we get a lot 🙂 ) — Raquel Vélez (@rockbot) August 11, 2017 But! We don’t have to. Brand name capitalization is always at the discretion of the editor or style guide, so brands like WIRED or LEGO do not have to be capped — Karen…

Read More →

More CSS Charts, with Grid & Custom Properties

I loved Robin’s recent post, experimenting with CSS Grid for bar-charts. I’ve actually been using a similar approach on a client project, building a day-planner with CSS Grid. It’s a different use-case, but the same basic technique: using grid layouts to visualize data. (I recommend reading Robin’s article first, since I’m building on top of his chart.) Robin’s approach relies on a large Sass loop to generate 100 potential class-names, even though less than 12 are used in the final chart. In production we’ll want something more direct and performant, with better semantics, so I turned to definition lists and CSS Variables (aka Custom Properties) to build my charts. Here’s the final result: See the Pen Bar chart in CSS grid + variables by Miriam Suzanne (@mirisuzanne) on CodePen. Let’s dig into it! Markup First Robin was proposing a conceptual experiment, so he left out many real-life data and accessibility…

Read More →

CSS Utility Classes and “Separation of Concerns”

Adam Wathan takes us on a journey through the different ways we can approach HTML and CSS. This is a really great read that I bet will resonate with a lot of you, whether or not you agree with where he ends up. Here’s a particularly interesting bit where he specifically calls out “separation of concerns” as being a straw man: You either have separation of concerns (good!), or you don’t (bad!).This is not the right way to think about HTML and CSS. Instead, think about dependency direction. There are two ways you can write HTML and CSS: CSS that depends on HTML … In this model, your HTML is restyleable, but your CSS is not reusable. HTML that depends on CSS … In this model, your CSS is reusable, but your HTML is not restyleable. It occurs to me that there are fairly large contingents heading in both directions…

Read More →

Improving Conversations using the Perspective API

I recently came across an article by Rory Cellan-Jones about a new technology from Jigsaw, a development group at Google focused on making people safer online through technology. At the time they’d just released the first alpha version of what they call The Perspective API. It’s a machine learning tool that is designed to rate a string of text (i.e. a comment) and provide you with a Toxicity Score, a number representing how toxic the text is. The system learns by seeing how thousands of online conversations have been moderated and then scores new comments by assessing how “toxic” they are and whether similar language had led other people to leave conversations. What it’s doing is trying to improve the quality of debate and make sure people aren’t put off from joining in. As the project is still in its infancy it doesn’t do much more than that. Still, we…

Read More →

“Combine the transparency of a PNG with the compression of a JPG”

JPG doesn’t support alpha transparency. PNGs that do support alpha transparency don’t compress nearly as well as JPG. SVG has masks and clipping paths, which we can use to our advantage here. Drag and drop tool by Shaw to help do the trick. It produces an SVG containing a mask (for the transparency) and the raster graphic put together. It’s like ZorroSVG with more features. There is also some prior art here. You can see how the masking works more clearly in this (non-automated) Pen. These create raster masks. I’ve written about how vector clipping paths can be useful here too. Direct Link to Article — Permalink “Combine the transparency of a PNG with the compression of a JPG” is a post from CSS-Tricks Source: CssTricks

​The #1 Website for Coding Challenges

Coderbyte is a web application built to help you practice programming and improve your algorithm skills. We offer a collection of coding challenges and web development courses that can help you prepare for an upcoming job interview or general technical assessment. All of our coding challenges can be completed directly in our online editor, and if you need help along the way you can view thousands of user-submitted code solutions as well. View all Coding Challenges Direct Link to Article — Permalink ​The #1 Website for Coding Challenges is a post from CSS-Tricks Source: CssTricks

The Difference Between Explicit and Implicit Grids

Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don’t have to specify each track and we don’t have to place every item manually makes the new module even better. Grids are flexible enough to adapt to their items. This is all handled by the so called explicit and implicit grid. All code samples in this post are accompanied by images in order to display grid lines and tracks. If you want to tinker with the code yourself, I recommend you download Firefox Nightly because it currently has the best DevTools to debug grids. Explicit Grids We can define a fixed number of lines and tracks that form a grid by using the properties grid-template-rows, grid-template-columns, and grid-template-areas. This manually defined grid is called the explicit grid. An explicit grid…

Read More →

abovethefold.fyi

Novelty site with a message (and reference articles) by Rob Lafratta. Direct Link to Article — Permalink abovethefold.fyi is a post from CSS-Tricks Source: CssTricks

Back to Top