Taking the survey in Russian
Strategy

Announcing the 2020 State of CSS Survey


Back in 2016 we launched the very first edition of the State of JavaScript survey, and last year we decided to give it a little sister in the form of the State of CSS survey.

It’s taken us a while (is it October already?!) but we’re happy to announce that the 2020 edition of the State of CSS survey is now live, with the results hopefully following a few weeks from now.

It’s no secret that the web ecosystem never stays still, so the goal of the survey is to identify the latest trends in order to help you decide what to learn and use next!

And speaking of not staying still, we’ve got our own share of innovations this year.



Take the Survey in Your Language!

Our biggest change is that we’ve localized the survey in as many languages as we could, thanks to a team of absolutely awesome volunteers.

Taking the survey in Russian

We knew that an English-only survey would always bias our results towards English-speaking countries, which meant writing off huge sections of the web development community.

So we’ve always wanted to translate our surveys, and after building our own survey platform from scratch we’re finally able to do it!

We’ve also adopted a new way of serving the translations via our GraphQL API that will hopefully make it much easier to reuse translations from one survey to the next without having to start over each time.



New CSS Features

The survey itself has also changed. The past year has seen its fair share of new CSS innovations, and we wanted the survey to reflect that. Some of the new features we’re asking about include:

…and many more!



Find out Your CSS Score

If you’re not feeling familiar with these few fresh-faced features, feel no fear: at the end of the survey, we’ll show you a scorecard of sorts, along with a couple links where you can learn more about anything you missed.

Get your CSS Knowledge Score!



Take (and Share!) the Survey

The more inputs we have, the more insights we’ll be able to extract from out data. So that’s why we’re asking anybody who builds websites and uses CSS to take the survey. It takes about 15 minutes, and after you create an account you can come back anytime to finish it.

The survey will be open until November 5th, so stay tuned for the results soon after that!



Source link

r/web_design - 1,285 free icons for Visual Studio Code
Strategy

1,285 free icons for Visual Studio Code : web_design


I’ve just launched this free icon pack for VS Code, so you can stay focused on your coding. ✌️??‍??‍??‍? https://www.streamlinehq.com/dsp
Quickly insert 1,285 icons in Visual Studio Code, using this free DSP package. Access instantly the icons with your keyboard: instant search, auto-completion, preview in code.
The best part? It’s free ?

r/web_design - 1,285 free icons for Visual Studio Code

DSP extension for VS Code

r/web_design - 1,285 free icons for Visual Studio Code

1,285 beautiful icons for your next designs 🙂

r/web_design - 1,285 free icons for Visual Studio Code

They work perfectly for small inline text or buttons



Source link

r/webdev - 1,285 interface icons for Visual Studio Code
Strategy

1,285 interface icons for Visual Studio Code : webdev


I’ve just launched this free icon pack for VS Code, so you can stay focused on your coding. ✌️??‍??‍??‍? https://www.streamlinehq.com/dsp
Quickly insert 1,285 icons in Visual Studio Code, using this free DSP package. Access instantly the icons with your keyboard: instant search, auto-completion, preview in code.
The best part? It’s free ?

r/webdev - 1,285 interface icons for Visual Studio Code

DSP Extension for VS Code

r/webdev - 1,285 interface icons for Visual Studio Code

1,285 icons

r/webdev - 1,285 interface icons for Visual Studio Code

Use case with small buttons and inline text



Source link

WooCommerce Payments, Now with Support for Subscriptions and...
Strategy

WooCommerce Payments, Now with Support for Subscriptions and…


A little while back we shared the news that WooCommerce shipped a beta payments feature as part of its 4.0 release. It’s a free plugin with no monthly costs or setup fees. You only pay when you make a sale.

We’re actually using this right here at CSS-Tricks. In fact, Chris blogged it back in July. Back then, we were using the WooCommerce Payments beta so we could start selling memberships here on the site and do it while taking payments without anyone having to leave the site to complete the transaction with a third-party.

The big news now is that WooCommerce Payments now supports WooCommerce Subscriptions. This is game-changer. It means you can offer a recurring payment option on subscription-based products and have all of those payments integrated with WooCommerce Payments reporting and features.

WooCommerce Payments works alongside other payment methods! We’ve enabled PayPal for anyone who prefers paying that way.

Enter subscriptions

The thing that makes WooCommerce Subscriptions such a great extension is that it turns any WooCommerce product into a possible subscription. So, yes, even a t-shirt can generate recurring payments (a shirt is not a good example of a subscription product, but the point is that subscriptions can be tied to anything). Anything you want to renew after a period of time is fair game. That could be a publication subscription that renews annually, a record of the month club with a monthly subscription, or even a payment plan that allows customers to pay for large purchases in monthly installments.

No no, the poster is not a subscription… but you can buy it with a one-time payment!

Now that WooCommerce Payments supports WooCommerce Subscriptions, not only are recurring payments a thing, but it brings all of those transactions to your store’s dashboard, making it a cinch to track those payments, as well as your cash flow. Payment disputes can even be handled without ever having to leave WordPress.

Oh, and saved credit cards!

In addition to subscriptions, WooCommerce Payments also supports saved credit cards. So now, when someone purchases anything on your site — whether it’s a single product or a recurring subscription — they can choose to save their payment information with you for faster transactions on future purchases!

Heck yeah, checking out next time will be a breeze!

All the things, all on WordPress

WooCommerce has been great for a long time, but it’s these sorts of enhancements that make it not just a killer experience but makes powerful e-commerce capabilities open to big and small stores alike. Get started with WooCommerce and WooCommerce Payments — it’s totally free to pick up and try out.



Source link

r/web_design - Building a tiered price component in pure HTML & CSS
Strategy

Building a tiered price component in pure HTML & CSS : web_d…


A few weeks ago tiiny.host (a simple way to share your web project) launched a deal but presented it in a creative way:

r/web_design - Building a tiered price component in pure HTML & CSS

Original order-based price tiered component

A few asked how it was made so I wanted to break it down for others.

The original was created with react & bootstrap so I re-created it in pure HTML & CSS to breakdown it’s components. Feel free to use the component yourself if you like it 🙂

—————

The container is a simple, rounded rectangle with a white background featuring two child divs:

<div class="container">
  <div class="price-tiers-container">

    <!-- Prices tiers go here -->

  </div>
  <div class="features-container">

    <!-- Prices tiers go here -->

  </div>
</div>

Let’s look at the price tiers first. These contained three further divs wrapped by the price-tiers-container class.

r/web_design - Building a tiered price component in pure HTML & CSS

Price-tiers container

In order to make the divs extend out of it’s parent container class we needed to apply the position: absolute for price-tiers-container. We also ensured it had a fixed width and used a flex layout to divide the space amongst the three price tiers.

The final class looked like this:

.price-tiers-container {
    display: flex;
    position: absolute;
    width: 530px;
}

Within this we have three price-tier divs with these styles:

.price-tier {
    flex: 3;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: white;
    border: solid 2px #c1c1c1;
    border-radius: 8px;
    margin-top: 10px;
    margin-left: 10px;
    padding: 12px;
}

Each price-tier is given a default equal width by setting flex of 3 (but the active one is flex: 4). We also use flex to align items within the price-tier div and space the items evenly using justify-content: space-between. Finally we apply some individual border, padding etc styles.

Within each price tier we just have three divs:

r/web_design - Building a tiered price component in pure HTML & CSS

Non-active price tier

.title {
    color: grey;
}

.price {
    font-size: 1.5rem;
}

.price-period {
    font-size: 0.7rem;
}

.label {
    font-size: 0.8rem;
}

<div class="price-tier">
  <div class="title">
    Stage 2
  </div>
  <div class="price">
    <b>$99</b><span class="price-period"> / onetime</span>
  </div>
  <div class="label">Coming soon</div>
</div>

With the active price tier, the set up is slightly different:

r/web_design - Building a tiered price component in pure HTML & CSS

Active price tier

.active {
    border-color: blue;
    flex: 4 **!important**;
    height: 150px;
}

<div class="price-tier active">
  <div class="p-title">
    Stage 1
  </div>
  <div class="price">
    <b>$59</b><span class="price-period"> / onetime</span>
  </div>
  <div class="progress-bar">
    3/50 sold
  </div>
</div>

The active price-tier swaps out the label for a progress-bar and applies the active class as well. To make it more prominent we assign it a fixed height, override the default border-color and increase the flex to 4.

Additionally, we grey out the content in the non-active price-tiers like so:

.price-tier > div {
    opacity: 0.4;
}

.active > div {
    opacity: 1;
}

Finally in order to make the progress bar in the active price tier we use a css-gradient trick:

r/web_design - Building a tiered price component in pure HTML & CSS

Progress bar

.p-progress-bar {
    background: linear-gradient(90deg, #2BC147 0%, #2BC147 15%, #575757 15%, #575757 100%);
    color: white;
    border-radius: 8px;
    width: 100%;
    font-size: 0.7rem;
}

We set the background to 90 degree but set the green (#2BC147) at 0% and 15% and the the grey (#575757) at 15% and 100%. This gives the illusion of a progress bar. If we need to increase the progress then we just modify 15% to the new progress level.

Finally, we complete the features-container:

r/web_design - Building a tiered price component in pure HTML & CSS

Features container

.features-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 168px 12px 12px 12px;
    align-content: space-evenly;
}

.feature::before {
    content: '✅ ';
}

.feature {
    margin: 3px;
    font-size: 0.8rem;
}

<div class="features-container">
  <div class="feature">This feature</div>
  <div class="feature">And this</div>
  <div class="feature">Great at this</div>
  <div class="feature">Plus this feature</div>
</div>

Here, we use a flex layout again and set align-content: space-evenly to evenly space the list of features within the container.

We apply large top padding of 168px to leave space for the pricing-tier-container. This is because it has position: absolute meaning it takes no space in parent div. In order for it to not overlap we reserve artificial space for it.

We apply a ::before selector to each feature and set the content to a tick emoji (you can use anything) to add ticks to each item.

r/web_design - Building a tiered price component in pure HTML & CSS

Putting it altogether in pure CSS & HTML

And that’s it! Hope that was helpful, let me know if you have any questions in the comments.

Full HTML & CSS CodePen link: https://codepen.io/rabbitsfoot8/pen/MWeeMQv



Source link

r/web_design - I made this minimal chrome extension that lets you visualize your life
Strategy

I made this minimal chrome extension that lets you visualize…


r/web_design - I made this minimal chrome extension that lets you visualize your life

I’d love to read your suggestions and opinions! ?I’m just getting started in web design and development, and this is the first thing I published online!I built this tool for myself, but realized everyone could get a lot of value from it, so I made it into a free chrome extension. Hope you find it valuable as well!
Here’s the link: https://chrome.google.com/webstore/detail/visualize-life/enclepkojflpdjeabafigjjajhaafdmm?hl=en



Source link