Link Hover Style 79

The post Link Hover Style 79 appeared first on Best jQuery.

by Admin via Best jQuery

Pagination Style 54

The post Pagination Style 54 appeared first on Best jQuery.

by Admin via Best jQuery

Web Design Weekly #363

Headlines

Using the Web On A Budget

Data can be prohibitively expensive, especially in developing countries. Chris Ashton puts himself in the shoes of someone on a tight data budget and offers practical tips for reducing our websites’ data footprint. (smashingmagazine.com)

Jumpstart Your Career in User-Centered Design (UX/UI)

Improve the usability and accessibility of websites, apps, and more with a new online certificate in User-Centered Design (UX/UI), offered from Parsons at Open Campus. Get started now. (newschool.edu)

Articles

Why React Hooks?

The marketing pitch for Hooks is that you’re able to use state inside function components. In reality, Hooks are much more than that. They’re about improved code reuse, composition, and better defaults. Tyler McGinnis explains. (tylermcginnis.com)

Truths about digital accessibility

Creating, maintaining, or evaluating accessible technology? Here are some things to keep in mind. (ericwbailey.design)

Don’t Build That App

Luke Jackson demonstrates how to build up a modern dev environment (like create-react-app) just by using “the platform” and squeezing out every drop of potential from the latest language features. (formidable.com)

What I Like About Vue

Dave Rupert has been enjoying working with Vue and thought he’d compile a simple list of the things he likes about it. (daverupert.com)

CSS Mistakes

I’m not a fan of the title of this post but it actually has some good tips for people getting into writing CSS. (painlesscss.com)

Tools / Resources

Form design

This guide is quick and to the point — a whistle stop tour of the knowledge Adam Silver has accrued over the years of form design. It’s not exhaustive, but rather an entry point, designed to save you time on the basics. (adamsilver.io)

Open Source Gatsby Themes

High-quality and customizable Gatsby themes to quickly bootstrap your website. (themes.lekoarts.de)

Linc in 3 Minutes – Continuous Delivery for Front-end Applications (linc.sh)

Blazing Fast WordPress Sites With Gatsby (scotch.io)

What’s new in Streamline 3.0 (medium.com)

Font Style Matcher (meowni.ca)

Inspiration

Ooops, I guess we’re full-stack developers now. (full-stack.netlify.com)

A Beginner’s Journey to Launching a Website (css-tricks.com)

Jobs

User Experience Researcher at TaskRabbit

We’re looking for an experienced user researcher to help us understand and empathize with our Clients and Taskers so we can make informed and data-driven decisions when solving product challenges. (taskrabbit.com)

Senior UI/UX Designer at ClickView

We’re looking for someone who loves to both take on challenging design problems and rapidly iterate designs based on feedback from our UX Researcher and most importantly, our customers. (clickview.com.au)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

Designing in tools like Sketch, Figma, etc. seem like a waste of time. (twitter.com)

The post Web Design Weekly #363 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Pinterest Hopeful to Generate an Annual Revenue of $1 Billion for the Very First Time

Pinterest had a decline in its earnings lately, but according to the latest report, the visual-discovery platform has an increase of more than 15% in its shares. The revenue of the platform grew 62% to $261 million, though it was expected to reach $235.53 million, as per Refinitiv. Previously...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Aqsa Rasool via Digital Information World

Twitter will soon be able to Filter Out Low Quality Messages from the DMs!

In the 2 last decades, several Social Networking platforms have been introduced but only the best ones have managed to thrive. Luckily, Twitter is one of the big ones. Twitter offers people a platform to voice their opinions in front of the whole world, a perk which has been exploited by countless...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Ali Siddiqui via Digital Information World

5 Super CSS Grid Generators for Your Layouts

CSS Grid has turned out to be the most exciting evolution of CSS for quite a while. It's a specific CSS tool for building any web layout you can think of, from the simplest to the most complex. Today, CSS Grid is widely supported by all major browsers — it's clear that the dark days of hacking layouts using floats are gone forever.

Coding your CSS Grid layout directly in your code editor can be fun. Although the spec is a complex document, the key concepts you would need to build a simple layout don't have a steep learning curve. There are many resources that will get you started in no time, with CSS Master by Tiffany Brown, Rachel Andrew's Grid by Example, and Jen Simmons's Layout Land at the top of the list.

For those of you who feel more comfortable coding layouts using a visual editor, there are several interesting online options that you can try out.

Here are five CSS online tools with great visual interfaces that I'm going to put through their paces. The idea is: design your CSS Grid-based layouts in a few clicks, grab the code and run with it! Let's put this idea to the test and see what happens.

The Test Page Layout

In this article, I'm going to provide this simple hand-coded CSS Grid layout.

See the Pen
responsive CSS Grid example by Maria Antonietta Perna (@antonietta)
on CodePen.

The layout has more than one HTML container tag working as a Grid container in a nested structure. I could have used the new subgrid feature that's been recently added to Grid, but at the time of writing only Firefox 69+ supports it, and none of the online generators discussed here have implemented this functionality yet.

For most of the CSS Grid generators, I'm going to focus my tests only on the <ul> that works as Grid container for the individual cards. This is what the code looks like:

    .kitties > ul {
      /* grid styles */
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      grid-gap: 1rem;
    }

Notice how the value of the grid-template-columns property alone enables you to add responsiveness without media queries by:

• using the CSS Grid repeat() function together with the auto-fit property. You can add as many columns as you want and they will fit perfectly into the grid's width, whatever that may be.
• using the minmax() function, which ensures that each column is at least 320px wide, thereby displaying nicely on smaller screens.

Most CSS Grid generators don't include the ability to set the grid-template-columns using the CSS Grid features above, so you'll need to adjust the values generated by the tool inside media queries to add responsiveness to your layouts.

As I try out the CSS Grid generator tools, I'm going to replace the code above with the code generated by each tool, and examine its capabilities against the results displayed on the screen. The exception will be the fourth CSS Grid generator in the list, a Vue-powered tool by Masaya Kazama. This is because it makes it quite straightforward and quick to build the entire layout, including header and footer, with a few clicks and minor adjustments to one of its preset layouts.

Enough talking, let's dive right in!

1. CSS Grid Generator by Sarah Drasner

CSS Grid Generator is a shiny new generator coded by Sarah Drasner. The interface is super sleek and you can put together a basic CSS Grid layout in no time.

I generated a 2-column grid and dumped the code in my original example. You need media queries to make the layout responsive. Here's the result:

See the Pen
CSS Grid Generator #1 by Sarah Drasner by Maria Antonietta Perna (@antonietta)
on CodePen.

The code looks like this:

    .kitties > ul {
      /* grid styles */
      display: grid;
      grid-template-columns: 320px 320px;
      grid-template-rows: 1fr 1fr;
      /* units for row and column gaps
       only available in px */
      grid-column-gap: 16px;
      grid-row-gap: 16px;
    }

This tool lets you:

• set the numbers and units of rows and columns
• drag within the boxes to place divs within them

At the time of writing, Sarah's CSS Grid generator lets you create simple implementations of CSS Grid-based layouts. This is clearly stated by the author:

Though this project can get a basic layout started for you, this project is not a comprehensive tour of CSS Grid capabilities. It is a way for you to use CSS Grid features quickly.

However, since this is a brand new open-source tool, it's still in active development and the community is invited to contribute. Complex features like minmax() are not implemented yet, but they might find their way into it at a later time.

2. LayoutIt by Leniolabs

LayoutIt is quite intuitive and has a few more features than CSS Grid Generator. For example, it lets you set the grid-gap property in px, em and % units, and set grid-template-columns and grid-template-rows using minmax(). However, this is not enough to ensure responsiveness, so you'll still need to adjust your values using media queries.

Also, I found no way of setting the grid-gap property, so you'll have to do it manually if you'd like some white space in between rows and columns.

Here's the result as I entered the generated code into my original example:

See the Pen
CSS Grid Generator #2 by Leniolabs by Maria Antonietta Perna (@antonietta)
on CodePen.

Below is what the relevant code looks like:

    .kitties > ul {
      /* grid styles */
      display: grid;
      grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
      grid-template-rows: 1fr 1fr;
      /* grid gap not in code
      repeat, auto-fit, and auto-fill
      not there */
    }

3. Griddy by Drew Minns

With Griddy you can set the number of columns and rows using fr, px, % and auto units, but there's no minmax() function. You can add gaps to your columns and rows using both px and % and set justify-items and align-items properties to align items within the grid. You'll need media queries for responsiveness.

Below is what the generated code displays on the screen:

See the Pen
CSS Grid Generator #3 by Drew Minns by Maria Antonietta Perna (@antonietta)
on CodePen.

Here's the generated code in place on the original demo:

The post 5 Super CSS Grid Generators for Your Layouts appeared first on SitePoint.

by Maria Antonietta Perna via SitePoint

Codeimg.io

The execution is quite something in this One Page for Codeimg.io – a web app helping you create and share beautiful images of your source code.

Full Review

by Rob Hope @robhope via One Page Love