15 Useful Tools & Resources Worth Checking Out

Original Source: https://www.webdesignerdepot.com/2021/03/15-useful-tools-resources-worth-checking-out/

As a web designer, you face plenty of challenges, both good and bad. One of the bad ones is to suddenly find out that you’re either in danger of missing a client’s deadline or will be unable to meet it at all.

A missed deadline could be due to something beyond your control and no fault of your own. There are measures you can take to avoid what you do have control over. Such as not having the right design tool or design resources to do a task that has to be done.

An ounce of prevention can definitely be worth a pound of cure in this case. Before starting a project, make sure the tool or tools you will be using will be up to the task.

The 15 design tools presented here are the tops in their respective categories. You should be better able to handle whatever is thrown at you.

1. Be Theme

Its more than 200,000 sales to date have certainly established the BeTheme multipurpose WordPress theme as an all-time favorite among web designers.

In truth, “multipurpose” doesn’t do BeTheme justice. Users might argue that “all-purpose” would be a more accurate description.

Be’s 40+ core features give web designers plenty to work with in terms of page-building tools, design aids, design options, and special effects.

Most notably:

The Muffin Builder, which when used with other core features, makes building a website quick, easy, and coding-free;
The Admin Panel/Shortcode Generator combo gives all the flexibility designers need;
BeTheme’s 600+ customizable pre-built websites could well be the star of the show. They cover 30 business sectors and all the popular website types, they are customizable, responsive, and feature cool UX features, and they can get any project off to a rapid start.

Click on the banner to learn more about Be’s other core features.

2. Timezy Booking Software

Timezy will help you create a booking environment that works best for your business by allowing clients and customers to book your services as easily as possible. You can then integrate Timezy into your website to streamline and speed up your booking operation.

Clients and customers can book appointments online 24/7;
They can receive real-time email notifications and reminders;
Timezy can be integrated with Zoom;
You can reorder steps on the booking form to fit your needs;
Timezy can be used to manage employee assignments and schedules, vacations, and special days.

If you lack a website of your own, Timezy will provide you with a modern web page you can customize to fit your brand for clients to book appointments at any time.

3. wpDataTables

wpDataTables is the top-selling and most powerful WordPress table and chart-building plugin on the market. There are other good ones, but their table and chart-building capabilities quickly become inadequate as you go down the list of what wpDataTables can do that most others cannot.

wpDataTables key features and capabilities:

The ability to create interactive and responsive tables and charts;
The ability to create frontend editable and easily maintainable tables and charts;
The ability to rapidly process massive amounts of data that come in various formats and from various sources;
The ability to build tables and charts using real-time data.

You can also brighten up or improve a table or chart’s readability by highlighting or color-coding key information.

Click on the banner to find out more about what this plugin can do for you.

4. LayerSlider

LayerSlider is not for sliders only. This multipurpose WordPress tool can also be used to create eye-catching animations and engaging content.

Add a little spice to a stale website;
Create popups with stunning effects to interact better with visitors;
Avoid coding, since LayerSlider is drag and drop.

This popular design tool has been assisting web designers for nearly a decade and serves millions of active monthly users.

5. Amelia Booking Plugin

Amelia is a user-friendly WordPress booking plugin you can use to manage your appointments and events on a single platform.

Clients can instantly book, change, or cancel appointments online 24/7;
Employees and customers can manage meetings, appointments, and events from their own dashboards;
Amelia can be integrated with Zoom to conduct training or consultation sessions;
Amelia can also create packages of services with discounts and validity periods.

Amelia can service multiple business locations.

6. Uncode – Creative Multiuse & WooCommerce WordPress Theme

With its more than 80.000 sales to date, Uncode has become one of ThemeForest’s all-time best sellers.

You can create custom layouts and designs with Uncode’s Dynamic Content feature and use them as templates for category pages;
Uncode features the WooCommerce Product Builder, custom Checkout, Cart, My Account, Quick-View, etc.

Uncode has a comprehensive library of tutorial videos and a showcase of user-created websites that is well worth visiting.

7. Total WordPress Theme

Created with perfection in mind, Total is nonetheless an extremely user-friendly WordPress theme.

This drag and drop website building tool’s extreme flexibility allows users to create any type or style of website;
The WPBakery page builder is accompanied by an assortment of custom modules;
Total is RTL and Translation-ready and easily integrates with WooCommerce;
Total is developer-friendly.

Click on the banner to learn more.

8. Dr. Link Check

Dr. Link Check saves you the inconvenience of having to periodically conduct a manual search of your site for broken links.

Dr. Link Check inspects for:

Broken links and improper URL formatting;
Blacklisted malicious content links;
Websites that do not contain any valuable content, including ad-only sites.

Dr. Link Check publishes downloadable daily, weekly, or monthly reports.

9. Mobirise Website Builder

Mobirise is not only a top tool for creating fast, responsive, user-friendly websites. It also has the advantages of being offline. Mobirise is also free.

Factors that contribute to Mobirise’s excellent performance include:

Google Amp and Bootstrap 4 frameworks;
Professionally-crafted website templates, popups, sliders, and eCommerce features;
Mobirise is all drag and drop.

Click on the banner to download your very own copy.

10. 8b Website Builder

When a website builder is fast, free, responsive, user friendly, and Google-friendly as well, it is certainly worthy of consideration.

The 8b website builder:

Allows you to create websites at home or on the go on any device;
Features templates and website sections designed to get projects off to a rapid start;
It gives your site a Google ranking with a couple of clicks;
It can be hosted wherever you want.

Download your copy now.

11. WHATFONTIS

WhatFontIs, with its database of more than 700K commercial and free fonts and font-finding AI functionality enables you to identify fonts from images you upload.

This top-of-the-line font-finding tool:

Identifies an uploaded font 90% of the time;
Gives answers in seconds;
Identifies cursive fonts (the letters in the image must be separated);
Displays 60+ similar fonts for each uploaded image.

12. Litho – The Multipurpose HTML5 Template

Litho is a responsive multipurpose Bootstrap 4 HTML5 template that gives startups, design agencies, and other businesses an ideal website-building starting point.

Litho’s features include:

Cool selections of ready-made home pages, inner pages, and template blocks;
Page styles for portfolio, shop, and blogging sites;
Sliders, banners, forms, and other creative design elements.

Litho offers 5-star professional support.

13. XStore – The Most Customizable WooCommerce Theme Ever

XStore may be the best tool anyone could have at their fingertips when looking for a fast and easy way to create a high-performance eCommerce website –  for only $39.

XStore’s key features include:

100+ customizable ready-to-go shops;
$500+ worth of premium WordPress plugins;
A Single Product builder and a Header builder.

14. Goodiewebsite

GOODIE’s web development platform assists clients who are eager to get a professionally-coded website quickly up and running.

GOODIE’s services focus on:

Web designers seeking a development partner;
Startups looking for ways to test their ideas and concepts;
Small businesses seeking an online presence or improvement of an existing one.

GOODIE’s specialties include 1-10 page, WordPress, and eCommerce websites.

15. Heroic Inbox

There are several excellent reasons for letting Heroic Inbox manage your business’s departmental email inboxes.

They include:

Encouraging efficient staff collaboration on email assignments and responses;
Helping staff members accomplish and maintain Inbox Zero status;
Tracking key team performance metrics.

Two key Heroic Inbox features are its smart workflows and a fast and friendly UI.

Every web designer owns a toolbox of tips and tricks they use in their website building projects. Even when a toolbox is superbly stocked, it is always challenging to keep it up to date. Doing so requires maintaining a knowledge of the latest and greatest web design resources and tools—some of which you may need to meet ever-changing industry demands.

This article features the top tools & resources for designers and agencies for 2021. Choosing one or more of them could not only help you stay on top of your game but could even make your day.

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

The post 15 Useful Tools & Resources Worth Checking Out first appeared on Webdesigner Depot.

Muko© Los Angeles Branding & Web Design

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/2qcW9e6Ncwc/mukoc-los-angeles-branding-web-design

Muko© Los Angeles Branding & Web Design
Muko© Los Angeles Branding & Web Design

abduzeedo03.30.21

Vitali Zahharov shared a really stylish branding, product and UX design for Muko© Los Angeles. Vitalin hasn’t shared much information about the project, but we really love the overall look and feel with the beautiful typography and layout compositions. The project was commissioned by MODDEN

Image may contain: cartoonImage may contain: template and businesscardImage may contain: cartoon and illustrationImage may contain: poster and smile


Introducing abdz.do iOS app

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/iXleRySNkn8/abdz_ios_app

Introducing abdz.do iOS app
Introducing abdz.do iOS app

abduzeedo03.30.21

I created Abduzeedo in 2006 as a collective of individual writers sharing articles about design, photography, and UX. Initially launched as a personal blog, Abduzeedo later grew to become a digital publication with several writers from all over the world, working independently.  Founded with the main goal of sharing inspiration, the blog (as we call it) has been offering its curation free of charge sustained by the placement of advertising. As the digital world evolves we continue our evolution in tandem with a vision to always deliver content in the best way possible. Today, we are proud to introduce our iOS app. With it you will be able to enjoy our daily, curated content on your iPhone and iPad without any pesky ads.

Download it now on the 🍎 App Store


Distributed Letters Animation Layout

Original Source: http://feedproxy.google.com/~r/tympanus/~3/v6oHNoIFsaE/

A while back I stumbled upon this great Dribbble shot by Seth Eckert. I love that letter effect and so I was thinking about a layout where I could incorporate this kind of animation.

After playing around a bit, I thought that a layout that allows for opening a panel would be interesting. So here it is; a little layout with a distributed letter animation on hover. When clicking, the letters will move to their respective place in the panel and the other elements will animate in.

I really hope you like this and that it comes in handy.

Thank you for checking by!

The post Distributed Letters Animation Layout appeared first on Codrops.

Adobe Creative Cloud discount: All your favourite creative apps for less

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/kr2s2pnzcZk/adobe-deals

Today’s best CC deals.

Collective #654

Original Source: http://feedproxy.google.com/~r/tympanus/~3/ujRA7ZrOBI4/

Collective 654 item image

Inspirational Website of the Week: Pam

Clarity and beauty combined with wonderful colors. Our pick this week.

Get inspired

Collective 654 item image

The Component Gallery

Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems.

Check it out

Our Sponsor
10% Discount: One License. Complete Access. Unlimited Websites. Unlimited Users.

Join 767,154 customers and get access to Divi, Extra, Bloom, Monarch and more. Power your entire team and build unlimited websites. The ultimate WordPress toolkit awaits.

Check it out

Collective 654 item image

Accessible Text Labels For All

Sara Soueidan writes on improving eCommerce experiences for screen reader users without breaking them for speech-input users. Also, watch her great talk Applied Accessibility.

Check it out

Collective 654 item image

How to Improve CSS Performance

Learn the most common speed issues caused by CSS and how to avoid them. By Milica Mihajlija.

Read it

Collective 654 item image

Building a Settings component

A foundational overview of how to build a settings component of sliders and checkboxes. By
Adam Argyle.

Read it

Collective 654 item image

A Complete Guide To Accessible Front-End Components

In this part of the Smashing Magazine series on useful tools and techniques for designers and devs, Vitaly Friedman looks into reliable accessible components: from tabs and tables to toggles and tooltips.

Read it

Collective 654 item image

Garet Font

A beautiful presentation for the Garet font family. A modern geometric sans serif font with two free weights.

Check it out

Collective 654 item image

SVG Explained in 100 Seconds

A super-cool video explaining SVG and how it differs from other image formats.

Watch it

Collective 654 item image

Cryptocurrency 3D Illustrations

A free cryptocurrency royalty-free 3D illustration pack from Iconscout.

Check it out

Collective 654 item image

The End of AMP

Dwayne Lafleur shares some interesting news and insights about the failure of Accelerated Mobile Pages (AMP).

Read it

Collective 654 item image

Animating Underlines

Michelle Barker shares some fantastic tips about underline styles and animations.

Read it

Collective 654 item image

Handling Text Over Images in CSS

Learn how to handle text over images in CSS by taking accessibility in mind. By Ahmad Shadeed.

Read it

Collective 654 item image

Image Fragmentation Effect With CSS Masks and Custom Properties

Temani Afif explains how to code a creative image fragmentation effect with CSS magic.

Check it out

Collective 654 item image

Why skip-links are important for accessibility

Learn why skip-links play an important role in making a website accessible for everybody and how you can implement them consistently.

Read it

Collective 654 item image

Good, Better, Best: Untangling The Complex World Of Accessible Patterns

Carie Fisher helps with the question on how we know which patterns are good, better, best when it comes to accessibility.

Read it

Collective 654 item image

Baserow

A Self hosted open source online database built with Django and Nuxt for creating your own database without technical experience.

Check it out

Collective 654 item image

Clone Wars

100+ open-source clones of popular sites. The list contains source code, demo links, tech stack, and Github stars count.

Check it out

Collective 654 item image

Building Dark Mode

Robin Rendle gives great insight into how Dark Mode was pulled off at Sentry.

Read it

Collective 654 item image

Taming Blend Modes: `difference` and `exclusion`

Ana Tudor takes a close look at the ‘difference’ and ‘exclusion’ blend modes and shows some use cases.

Read it

Collective 654 item image

Sorted CSS Colors

A fantastic tool that sorts CSS colors by their hue, saturation and lightness. By Mustafa Enes.

Check it out

Collective 654 item image

Now THAT’S What I Call Service Worker!

A great article about the power of the Service Worker API and how to get the best out of it practically. By Jeremy Wagner.

Read it

Collective 654 item image

Making the slowest ‘fast’ page

Can you make a webpage which gets 100 score in Lighthouse and passes all the Core Web Vitals and still feels slow? Barry Pollard gives it a try.

Read it

Collective 654 item image

Transition.css

In case you didn’t know about it yet: Drop-in CSS transitions with clip-path.

Check it out

Collective 654 item image

Scrollycoding (Preview)

Watch this new way to write code walkthroughs for blogs or docs. By Rodrigo Pombo.

Watch it

Collective 654 item image

security.txt

A proposed standard which allows websites to define security policies.

Check it out

Collective 654 item image

Photo Tear

A really awesome photo gallery by Steve Gardner.

Check it out

Collective 654 item image

Progress Nav with IntersectionObserver

Bramus shares Anders Grimsrud’s solution of a progress nav with IntersectionObserver based on Hakim El Hattab’s previous creation.

Check it out

Collective 654 item image

Focalboard

An open source alternative to Trello, Asana, and Notion. It helps define, organize, track and manage work across individuals and teams. Currently in early-access beta.

Check it out

Collective 654 item image

From Our Blog
Distributed Letters Animation Layout

A distributed letters animation in the context of a triple panel layout with hover effect.

Check it out

The post Collective #654 appeared first on Codrops.

Best web hosting: The top web services in 2021

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/WPgACeLxt_0/12-best-web-hosting-services

Discover the best web hosting services.

A Deep Dive Into Eleventy Static Site Generator

Original Source: https://smashingmagazine.com/2021/03/eleventy-static-site-generator/

But first — let’s quickly review what is meant by a “static site” and then what a generator provides. A static site is composed of static content — as in, the HTML, CSS, assets, and all content are already compiled together before pushing to a website host. This is different from a dynamic site that compiles those things from querying a database at run time (like WordPress) or that pulls content from APIs client-side (like JavaScript frameworks without server-side rendering).

A static site generator is an environment and build processor to compile your content into static HTML. They usually offer helpers to provide flexibility in writing your content (like supporting Markdown) and include methods for templating. So instead of writing HTML pages one by one and having to copy and paste the repeated parts, a generator will support breaking those things into components via a certain templating language. Then the generator’s build process will bring everything together and output the final HTML that can be uploaded to a web host to be served as your website. Depending on the web host you use, this build process can even be done by the host.

There are many static site generators available. You may have heard of or even used ones like Jekyll, Hugo, Gatsby, Next and Nuxt. A comprehensive list is provided by Jamstack.org.

What Makes Eleventy Different From Other Static Site Generators?

Eleventy is exceptionally fast both during builds and in the browser. This is largely thanks to not requiring the loading of a client-side JavaScript bundle in order to serve content (compared to something like Gatsby). Server-side rendering isn’t even a concern here, since the filesystem page creation defaults to static HTML.

What really makes Eleventy unique is the ability to select from and intermix up to ten different templating languages:

Intermixing languages can happen in the same file, or between layouts. For example, I often write my main content with Markdown that feeds into a Nunjucks layout. In some projects, I’ve found it useful to be able to loop over some data using Nunjucks while in the Markdown file. This ability to combine languages is very powerful, and allows you to design a write-and-build workflow that works best for you and your project.

Eleventy includes a –serve flag that uses BrowserSync to enable serving the site locally and with hot-reload upon file changes. This is a great convenience, and is good to keep in mind if you’re not looking for a static site generator but perhaps an upgrade from build tools like Gulp.

As part of being zero-config, all your site files could live in the root of your project. To alter the input and output directories, you can create an Eleventy config, which is expected to be a root file called .eleventy.js. Here’s a quick snippet showing how to make this modification:

module.exports = function (eleventyConfig) {
return {
dir: {
// default: [site root]
input: “src”,
// default: _site
output: “public”,
},
};
};

As noted earlier, the default behavior is filesystem page creation which is generally of great benefit especially for rapidly getting started. This is easily overrideable by assigning a custom permalink and that can be done per file, for an entire directory, or dynamically for a set of data. Permalinks also offer another superpower which we’ll explore in a bit!

Uniquely, during the build, you can prepare content, data, and transforms on that content and data by using JavaScript and leveraging filters and shortcodes (we’ll talk about those later). Again, this all happens without adding a JavaScript bundle client-side, while still enabling the use of JavaScript as a templating language.

Important Note: You can successfully use Eleventy with no or low JavaScript knowledge.

Unlike other SSGs like Gatsby, or environments like WordPress, most Eleventy sites do not require any plugins. There are some plugins available, but they are not necessary for essential functionality.

When building with Eleventy, you can add on features as you need them. In fact, you could just use HTML and never work with any of the other templating languages. Eleventy is only as complex as your project requires!

Understanding Essential Eleventy Concepts

Let’s go over a few bits of terminology and concepts that will help you be successful in creating your Eleventy projects.

Layouts And Templates

You may think of these terms as interchangeable, but in Eleventy’s context, they do have contextual meanings:

Template is the generic term for all content files.
Layouts are special templates that wrap other content.

For example, template refers to all your Markdown files, whereas a layout might be a Nunjucks file that contains the HTML5 boilerplate and a slot for the template content. We’ll learn how to make this work in the section on getting started.

Filters And Shortcodes

These are additional ways to modify content output, and create reusable template parts. They are available for use with Nunjucks, Liquid, Handlebars, and JavaScript templating. Filters and shortcodes are defined within .eleventy.js.

Beyond variables and operators available in your templating language of choice, Eleventy has unified the concept of filters across the previously listed languages. Filters transform content in some way specific to the content type. For example, you may create a filter intended for strings to uppercase them. Or you might have a filter intended to be used on arrays to alter what is returned, like picking a random item. Some filters are provided by Eleventy, a few of which we’ll use in the getting started tutorial.

Shortcodes allow creating reusable template parts and are able to accept arguments. They can be either standalone or paired, meaning they wrap content with a start and end tag.

One of my favorite shortcodes is to render the current year — meaning no more out of date copyright years in your footer! Here’s how to create a year shortcode:

eleventyConfig.addShortcode(“year”, () => ${new Date().getFullYear()});

To use it in a Nunjucks or Liquid template looks like this: {% year %}.

You can review the Eleventy docs for examples of paired shortcodes.

Collections

Collections are groups of related content, and are typically created within frontmatter by defining tags. Tag syntax options include single strings, single-line arrays — [“tagA”, “tagB”] — for multiples, or YAML-style lists to assign multiple tags. For example, I can create a “pages” collection by adding the following frontmatter to all content I want to be included in that collection:


tags: pages

Once you have defined a collection, you can access it via your templating language of choice within the global collections object. To access our “pages” collection would look like collections.pages. This returns an array of that collection’s data, and so you can perform array operations like looping over it such as to produce a list of links or article teaser cards. You can even suppress normal file output and use only collections to manage data display, which is useful for managing single-page site content.

Custom Data

So far we’ve talked about creating content as files, but Eleventy also makes it very easy to maintain different data sources. This is called “custom data” and lives as JavaScript module exports or JSON files in the _data directory.

Custom data can be used to:

Define a basic JSON array.
Return the results of a fetch operation.
Retrieve and re-format content from a headless CMS.

Eleventy makes all data from within _data available under a variable matching the filename. For example, if I create posts.json then I can access that in my templates as posts. Using Nunjucks, here’s an example of looping over the posts data:

{% for post in posts %}
{{ post.title }}
{% endfor %}

Pagination And Creating Pages From Data

In Eleventy terms, pagination refers to iterating over a data set and defining a template for the output of that data “chunk”. This is done with a dedicated file that defines the pagination within frontmatter. The file also includes setting up your intended output for the data, meaning it becomes its own template as well. We can define a layout to send the content to and also add tags to create a collection for ease of reference and flexibility for the output.

Note: If you use custom data to retrieve content from a CMS, then pagination is the Eleventy method you’re looking for to turn that data into pages dynamically.

Here’s an example of referencing our posts custom data which we’ll assume we’re retrieving via a fetch from a headless CMS. Importantly, the size is set to 1, which means each “pagination chunk” should produce one single page of output. We then use the alias to create a reference to the current item in the pagination loop, and then use that reference in the permalink definition and the template body.

The file that defines the pagination can live wherever you’d like within your input directory. My organizational preference is to create a generate directory, and then name it the same as the collection it will be creating. Consider the following to be src/generate/posts.njk:


pagination:
data: posts
size: 1
alias: post
addAllPagesToCollections: true
permalink: “/{{ post.title | slug }}/”
tags: posts
layout: post
templateEngineOverride: njk, md

{{ post.body | safe }}

In this case, the permalink is assigning the page to be output directly off of the site root. You could change this to add a prefix such as /posts/{{ post.title | slug }}, for example.

Additionally, if you want all of the generated pages to be available in the collection created by the tags, you must set addAllPagesToCollections to true to include more than the first item.

Lastly, if your content is coming in as Markdown instead of pre-compiled HTML, you’ll need to use the templateEngineOverride. In the example snippet, I’ve set it to njk, md which means the template content will need to be processed both as Nunjucks in order to convert the variable, and then Markdown to compile the contents returned in the variable.

If you’re wondering what safe means, we’re going to learn that next!

How To Get Started With Eleventy

Alright, so you’re ready to get going with your first Eleventy project! This brief tutorial will help you get a starting structure in place to continue building from. We’ll use the concepts we’ve already learned about and add a few new ideas, too.

The first important note here is that Eleventy is a scoped package, so here’s the install command:

npm install @11ty/eleventy

Next, a handy convenience I like to do is add the following scripts into my package.json:

“scripts”: {
“start”: “eleventy –serve”,
“build”: “eleventy”
}

As mentioned previously, the –serve flag will enable a local server via BrowserSync.

My preference is to update the input/output directories as we already looked at, so now it’s time to create some content within src or the input directory of your choosing.

In order to prepare our project to be more flexible and scalable from the start, I would suggest creating at least one layout that contains the HTML5 boilerplate. Layouts need to be defined within a directly called _includes, which is one of a handful of expected directories.

A convention that you’ll often find among starters is to call this layout base. I have a preference for making it a Nunjucks file.

Here’s a sample base.njk:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>{{ title }}</title>
</head>
<body>
<header>
<h1>{{ title }}</h1>
</header>
<main>
{{ content | safe }}
</main>
</body>
</html>

The double curly braces are Nunjucks syntax for variables. Here, we’ve prepared for an incoming title variable that will shortly be supplied via front matter. The content variable is provided by Eleventy and marks the slot where all incoming non-front matter content should go. Importantly, this is used in conjunction with the provided safe filter which prevents compiled HTML from being escaped versus rendered.

Now it’s time to create our site index, which we’ll add as index.md:


title: Hello Smashing Readers!
layout: base.njk

Thanks for reading — hope you’re excited to try Eleventy!

Notice that in the front matter we added our title, and also defined the layout.

At this point, we can run our project with the script we added: npm start. This will trigger BrowserSync to setup localhost:8080 (if it’s available) but you will need to manually open it in the browser. Check out this quick tip if you’d like it to open the browser automatically.

The last critical step is to add a stylesheet. Currently, CSS isn’t recognized as an automatically included filetype so we’ll have one extra config step after we create our stylesheet.

You can add a CSS file wherever you’d like in your input directory, such as css/style.css. Then, open .eleventy.js (or create it in the project root if you didn’t do the input/output customization) and add the following :

module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy(“./src/css/”);
eleventyConfig.addWatchTarget(“./src/css/”);

// – input/output customization if using –
};

First, we add the css directory as a “passthrough copy” which means Eleventy should include it in the push to the output directory. Then we also add it as a “watch target” so that as we make changes to our styles while running our start command, Eleventy will trigger a rebuild to update our local site.

Lastly, we need to remember to add the link to our stylesheet within our base layout:

<link rel=”stylesheet” href=”{{ ‘/css/style.css’ | url }}” />

When we define the stylesheet’s location, we pass it through Eleventy’s url filter which will adjust the relative file path as needed upon build.

Next, let’s create a “pages” post type to explore using collections and layouts a bit more. To do this, add the directory of pages and create one or two Markdown files, including a title front-matter key but not a layout.

We’re going to use a slightly different method to define the layout this time — a data directory file. This file is generally formatted as JSON and enables us to add data that should be applied to all files within a directory, which prevents having to duplicate it across files. The file needs to be named the same as the directory it will be used for, so create the file pages.json and add the following content:

{
“layout”: “page.njk”,
“tags”: “pages”
}

We’ve also gone ahead and defined tags in order to create the “pages” collection. But the layout we defined doesn’t actually exist yet, so create _includes/page.njk and add the following:


layout: base.njk

<article>
{{ content | safe }}
</article>

Here we’re using the Eleventy concept of layout chaining to be able to re-use our base template but also add a unique element for our page layout, which is the <article>. This means that all of the content of our pages will use both the page layout and base layouts.

Layout chaining reduces duplication by allowing re-use of boilerplates and base site layout structures.

Now that we’ve created content for the pages content type and defined it as the “pages” collection via the tags, let’s see how we can access that collection. Here, we’ll use Nunjucks to loop over the collection and output a list of links to each page. This loop will be added within our index.md file.

{% for post in collections.post -%}
– [{{ post.data.title }}]({{ post.url }})
{% endfor %}

We’ve done something unique though which is that the inside of the loop actually switches back to Markdown to render the links. This is not a required way to handle this scenario, but it can be very handy! Sometimes, depending on complexity, this may not work. The real reason is that the Markdown renderer defaults to Liquid templating language, so if you’re using Nunjucks features beyond basic loops, you will have to let Eleventy know how to process the file.

In the earlier section on pagination, we actually already looked at the solution for this. And that is to make use of the templateEngineOverride to indicate that the file should be processed as both Nunjucks and Markdown. The following full solution should be placed in the template’s front matter: templateEngineOverride: njk, md.

At this point, you’ve created a basic multi-page site! If you have need of using external data, jump back up to the section on pagination.

Other Ways To Start An Eleventy Project

Whereas some other static site generators and environments like WordPress have the concept of “themes”, Eleventy uses the term “starter”. There is a growing collection to choose from, and many can be found in the listing within the Eleventy docs.

My preference is to use Sass with my Eleventy projects, and I have a Sass starter available if you’d like to see how to add that into your build process. Others may choose to add in Gulp if they are used to that build pipeline for assets and processing.

I’ve also created a minimal starter that includes the features discussed in this article and shares similarities with the tutorial result. It also has a small example of fetching external data, and shows how to add in a partial to display site navigation based on a collection.

Expanding On The Basics

Once you’ve experimented with creating your first site with some basic content and maybe some custom data, it’s helpful to know additional ways to work with that content. Here is a brief overview of some other concepts to be aware of.

Altering File Output Type With Permalinks

I mentioned earlier that permalinks have a superpower. And that is that you can use them to output non-HTML file types.

Two useful examples are creating an RSS feed and a sitemap, both of which happen to typically be XML files. What’s really powerful is that you can continue to use the templating language of your choice to help generate those files, so you can loop over page data with Nunjucks to keep your RSS feed fresh, for example.

Customizing Collections

Sometimes using tags to create collections may not be sufficient. Or, you may want to create filtered variations of an existing collection. We can alter or create collections by using a series of provided functions. These will live in the .eleventy.js config file.

In this example, we’re using the addCollection function to filter items in an existing collection. The new collection will be based on the existence of customKey within front matter. This key is returned off of the data object which is attached to all generated Eleventy content.

eleventyConfig.addCollection(“specialCollection”, function (collection) {
return collection.getAll().filter((post) => post.data.customKey);
});

You can review other ways to create, modify, and use collections in the Eleventy docs.

Working With The Data Cascade

Eleventy has a more full concept of how data is compiled for a template called the data cascade which we only just began exploring in this guide. You will get the most out of Eleventy if you review how that works, starting in the docs. Ben Myers also has an excellent guide to understanding the data cascade.

Recommended Eleventy Plugins

In the intro, I briefly mentioned there were plugins available, but that they aren’t always needed. However, there are a few I tend to use on most projects, which include:

@11ty/eleventy-plugin-rss
If you would like to have an RSS feed, this official plugin provides some filters to help you to generate the feed. The linked repo includes a sample feed, which you may also find in use within some starters.
@11ty/eleventy-plugin-syntaxhighlight
Instead of loading Prism as a script for code highlighting, this plugin allows that processing to be applied as part of the Eleventy build process. This means code blocks are transformed to include the classes for applying a Prism theme ahead of time, so you will only need to add a Prism CSS theme of your choice.
@11tyrocks/eleventy-plugin-social-images
A feature I sought out early in my Eleventy exploration was the ability to generate social media share images. This led me to create a plugin that uses Puppeteer behind the scenes to take the snapshot. The plugin comes with prebuilt templates as well as config options to define your own template file.

I would also recommend becoming familiar with the rest of the official Eleventy plugins as they address other common needs including navigation and image handling.

Deciding If Eleventy Is Right For Your Project

Eleventy, like most static sites, is best for content that doesn’t typically need to be served dynamically or on-demand. This is not to say all of the site has to be static, or that there are not ways to make content dynamic. You may still load JavaScript to enable dynamic content like fetching from APIs or creating interactive widgets. You can also use services like IFTTT or Zapier to facilitate rebuilding your site if your host supports build webhooks and you have parts that you want to refresh on a schedule.

Thanks to custom data and pagination, we saw it was easy to include external data as from a headless CMS or any other API. So although it will be served statically, you still have a lot of flexibility in where you pull content and how you manage it.

My favorite thing about Eleventy is that it doesn’t impose many opinions on how I should structure my site, beyond the few expected directories we talked about for _includes and _data (and you can update the naming convention of those, too). This can also be helpful if you are looking to migrate a site and being able to potentially move some existing file structure as well. However, if you prefer a more opinionated architecture, you might seek a different option.

I also enjoy how I can mold Eleventy to fit my mental model for a given project by leveraging multiple templating languages as well as filters, shortcodes, and layouts. Starters also help give a boost so that you can focus on what’s really important: your content. And the high performance of purely static output is also a great benefit.

If you do need a bit more in your build process, you can add other familiar tools like Webpack, Gulp, or Parcel. You may be able to find a starter that already includes those things. Keep in mind you can also leverage Node scripts which are already inherent to the Eleventy build process.

Eleventy is very capable of handling large amounts of page generation. It has been used for some large and complex sites such as Google’s web.dev and Netlify’s marketing site. I’ve also used Eleventy for some unconventional purposes, like email and web component generators, along with some others which are described in this overview.

Additional Resources

I hope this guide has both peaked your interest and prepared you to begin using Eleventy! It included a lot of points that I found a bit tricky to uncover when I was creating my first project with it. Since I first found Eleventy in April 2020, I’ve built over 20 Eleventy projects counting starters, plugins, side projects, and course materials. Many of those can be found on my site 11ty.Rocks which also has tutorials and tips. Eleventy is something I really enjoy discussing, so feel free to reach out on Twitter!

The following are more resources for helping you on your journey to learn and get the most out of Eleventy:

Andy Bell offers a very comprehensive paid course — “Learn Eleventy From Scratch”.
Tatiana Mac’s tutorial series, starting with “Beginners Guide to Eleventy”, provides thorough explanations that assume no previous experience with static site generators.
Bryan Robinson offers a YouTube course for converting a free HTML theme into an Eleventy site.

Finally, I want to note that the Eleventy community is small but active! If you ever have difficulty finding some information, you can tweet your question to the official @eleven_ty account. Eleventy’s creator, Zach Leatherman, is quick to answer or RT questions to help get you back on your way!

ACCENT Branding and Visual Identity

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/nO3fufIPokc/accent-branding-and-visual-identity

ACCENT Branding and Visual Identity
ACCENT Branding and Visual Identity

abduzeedo03.18.21

VELKRO shared a branding and visual identity project for Accent, a new brand created in 2019 that specializes in image services, such as hair styling and image coaching. It focuses on providing accurate, individualised advice and making every client feel like one-of-a-kind.

We imagined a concept that highlights and champions individuality. As every client is unique, we sought to ensure that this (corporate) identity reflected that. We decided to play with the concept of personalised and cut accents by hand, making every piece of each application as unique as any customer. An identity with a strong retro personality, sober, professional and colorful at the same time.

Credits

Photography Cassandra Stuyt