10 Best Photo Gallery & Slideshow WordPress Plugins

For any portfolio or image-oriented website running on WordPress, it is imperative to have a photo gallery and slideshow plugin. They allow you to showcase your images and video content and add different features.

If you’re confused about the many choices in the market, we took out some of the best photo gallery and slideshow plugins for WordPress. Each plugin comes with a different set of features and attributes and you can learn about them in the following.

20 Plugins to Manage Multiple Authors WordPress Sites

20 Plugins to Manage Multiple Authors WordPress Sites

WordPress is an easy CMS to run your blog. So much easy to use that it now powers… Read more

LayerSlider

LayerSlider features more than just an image slider that allows you to create compelling popups as well. It offers more than 100 templates for image sliders, 90 for the popups templates, and over 200 built-in transition FX.

Finally, LayerSlider also provides an API that enables developers to extend the plugin to add custom features beyond the built-ins.

LayerSlider

Slider Revolution

Slider Revolution is a powerful plugin that offers many features to build sophisticated image sliders without needing to know how to code.

The plugin provides more than 200 templates, 20+ add-ons to spice up your image slider with special FX, and a full-fledged editor to compose your own slider with advanced settings to manage the keyframes, animations, etc.

Slider Revolution

Jetpack Carousel

It’s a bundled feature inside Jetpack that you can enable through the plugin setting. The feature is light and is pretty straightforward to use. You can include images from the WordPress Media Manager, customize the title, the caption, and the description of each image.

Additionally, with this plugin, you can show the EXIF metadata and even enable comments to allow people to comment on the image.

Jetpack Carouse

Meow Gallery

A simple WordPress plugin designed for photographers or photo enthusiasts to build gallery and image slider. The plugin includes a Block as well as Shortcode that allows you to include a gallery in both the Gutenberg and Classic editor. It’s responsive, performant, and provides a number of beautiful built-in layouts.

Meow Gallery

FooGallery

Built with performance in mind, FooGallery is a great photo gallery plugin. The developer has done a great job of optimizing the plugin front-end codes that leads to a better score on the latest Google Core Web Vitals requirements. It is responsive, loads fast, Gutenberg ready, and offers lots of other features.

FooGallery

WP Modula

Whether you’re a casual WordPress user, hobbyist, photographer, or developer, you can build a beautiful image slider in minutes using the WP Modula plugin.

It supports features beyond just adding image slider and galleries; you can, for example, edit the EXIF data of the image, add watermark, include videos on the same gallery set, add right-click protection, and a lot more.

WP Modula

Corefortress Simple Slider

This plugin makes creating a beautiful slider easy. You can add any image or video from the WordPress media library or directly upload them from your computer.

The plugin also features some pre-built styles and templates. But it also allows you to customize the slider including the heading, button, colors on every image to make the slider yours and your site unique.

Corefortress Simple Slider

Envira Gallery Lite

Envira Gallery is an easy-to-use, fast, and powerful plugin to build an image slider for your WordPress site. It allows you to build the image slider with drag-n-drop.

On top of that, you can customize the built-in templates or create your own. It’s also built with performance in mind; both the front-end and the back-end are carefully optimized.

Envira Gallery Lite

Gallery by Supsystic

This plugin offers a lot of features and flexibility to build an image slider on your WordPress site. Not only that you can include image and video, but you can also include post feed into the gallery, add captions, and add social media icons — to name a few.

The plugin also provides a couple of advanced features like the ability to set the image from FTP or social media, and integration to CDN.

Gallery by Supsystic

Master Slider

Master Slider is a plugin with extensive features to offer that both users and developers will appreciate. It provides an intuitive interface and some pre-built templates that allow users to create image sliders easily.

For developers, the plugin provides the tool to import and export slider and API to extend the plugin. The slider is compatible up to IE8+ and all the modern browsers.

Master Slider

Smart Slider

This plugin features a beautiful custom editor that allows you to create a unique image slider. You can add posts, images, and videos including videos from Youtube and Vimeo into the image slider. You can compose text, buttons, and images atop each slide to make it look more compelling.

The plugin also displays great compatibility with the WordPress ecosystem as it supports many page builders, it also works with the Multisite setup, and well-integrated with various WordPress admin interfaces such as the Media Manager, Widget, and Shortcode.

Smart Slider

MetaSlider

One of the most-used slider plugins, MetaSlider, supports different types of slideshows like Flex Slider 2, Nivo Slider, Responsive Slides, and Coin Slider. Few of its exceptional features include drag-and-drop slide rearrangement, full-width support, and multiple slideshow configuration options.

metaslider

Soliloquy Lite

This plugin runs a smart slider, loading the CSS and JS only when the slide is displayed within the post. Your posts and pages will load faster with this plugin compared to the other plugins mentioned here. The slider is responsive, touch-enabled, and built with SEO in mind.

Soliloquy Lite Cover

NextGEN Gallery

NextGEN Gallery is one of the most popular WordPress gallery plugins around. It allows batch uploading and management of image galleries, slideshow, thumbnail style galleries, and editing of thumbnails.

It also allows one to turn group galleries into albums and various other features that can really give a striking look to one ‘s website.

NextGEN Gallery

Slider by 10Web

Slider by WD supports displaying images as well as videos from YouTube and Vimeo along with transition effects and layer support. It offers image watermarking support, full-width sliders, and various customization options. However, video support is available only in the premium version.

slider-by-wd

The post 10 Best Photo Gallery & Slideshow WordPress Plugins appeared first on Hongkiat.

Hongkiat

More related website design Posts here

9 Recommended WordPress Plugins (2021 updated)

If you plan to add social media posts to a website, add a few colorful, informative, and responsive charts. Or, simply spice things up with a few carefully placed animations, you may need to enlist the aid of a plugin to do it well.

If you really want to take your site or business to the next level, it only makes sense to seek out one of the best WordPress plugins in a given category. So, you won’t get just good results, but awesome results.

Which is presumably why you’re reading this article.

Since all useful WordPress plugins are obviously not created equal you might want to do some comparisons to see what might perform best for you.

Or you could simply check out the following selection of 9 top WordPress plugins. Select one that provides the functionality you’re looking for, and get on with it.

You will not be disappointed.

  1. Amelia WordPress Booking Plugin

Automated processes can save time, minimize or eliminate stress, give you error-free performance, and make all interested parties happier than was previously the case.

At least that is what Amelia can do for fitness centers, beauty parlors, training centers, consulting firms, photographers and other businesses as 30,000+ businesses already benefit from Amelia scheduling.

  • Amelia automates the appointment booking process, while at the same time giving clients and employees full control over their respective actions.
  • Clients can make, change, or cancel appointments 24/7.
  • Appointments are only made at times that are convenient for the parties concerned (usually a client and an employee).
  • Selling packages of appointment for a single price is possible
  • There is no limit to the number of clients, the number of appointments that can be booked, or the number of employees, plus Amelia can serve multiple locations.
  • This Enterprise-Level booking manager can schedule events as well as appointments.
  • Business owners can check overall status at any time. Clients do not have to login to WordPress to cancel or reschedule an appointment.

Click on the banner to learn more.

  1. wpDataTables

wpDataTables is a WordPress table and chart plugin that gives its users the easiest way to create responsive tables and charts from a variety of sources and in a variety of formats.

wpDataTables –

  • creates simple tables, data tables, and 3 types of charts
  • easily manages massive amounts of data and organizes the data into intuitive and interactive tables and charts
  • accepts data from Google spreadsheets, Excel files, CSV files, and other sources
  • generates real-time data directly from MySQL
  • features conditional formatting techniques for highlighting and color-coding key data

While wpDataTables can be used by anyone and in any industry, this popular plugin has proven to be particularly useful when working with financial statistics, operational statistics, large product inventories, complex analyses, and comparisons.

Click on the banner to review the full range of wpDataTables’ features and capabilities. 

  1. WPC Product Bundles for WooCommerce

Cross-selling is an established marketing practice in which products from different product lines are combined or bundled, a practice that can be difficult without a well-planned system as WPC Product Bundles for promotion offering, stock management and order packaging to keep the ball rolling.

WPC Product Bundles can bring about to your business –

  • Combine simple products, variable products, selected variations of a product to form a bundle (e.g., combine a t-shirt with jeans and shoes)
  • Display bundled products with an appalling interface of your preference: ddSlick, Select2, HTML tags or Radio Buttons
  • Use drag and drop to rearrange the order of bundled products
  • Auto-calculate or manually set regular and sale prices
  • Smartly manage inventory, tax, shipping charges, and order invoice

Plus, WPC Product Bundles can work with many other WPC plugins (ie. Smart Wishlist, Quick View, and Compare) to strengthen the user experience and sales boosting effects.

Click on the banner to learn more about the benefits of this top-rated product bundling plugin. 

  1. Slider Revolution

Slider Revolution’s new template library isn’t just for building sliders. It’s also for creating stunning and responsive hero sections and other web page sections and content elements.

  • Slider Revolution’s drag and drop intuitive editor will save you hours of work on every project
  • Everything you need is there for creating jaw-dropping designs
  • Royalty-free background images, videos, font icons, and more are at your fingertips

Click to learn more about this amazing plugin. 

  1. LayerSlider

The name LayerSlider doesn’t come close to describing what this amazing WordPress builder is capable of.

LayerSlider –

  • Is a multi-purpose tool for animation and content creation
  • Is perfect for giving old and run-of-the mill websites a new lease on life
  • Can be used to create engaging popups you can use to display important messages or store offers
  • Does not require coding. It’s all drag and drop.

Click to find out even more.

  1. Logic Hop – Content Personalization for WordPress

Personalization is more important than ever. Without it, your site shows the same message to every visitor. Every time they visit…

Logic Hop shows the right message to the right person and helps you increase conversions. Features like geolocation, dynamic text replacement  and integrations with WooCommerce and Gravity Forms make Logic Hop the best personalization tool on the market.

Try Logic Hop and see what personalization can do for you. 

  1. Heroic Inbox

Instead of relying on a slap-dash method of trying to manage a customer support staff’s email inbox, Heroic inbox makes it much easier for staff members to work together.

  • With a snappy UI and fast workflows to work with, your support staff can quickly achieve Inbox Zero status and maintain it
  • Heroic Inbox tracks the key metrics involved in inbox management, so you can always see how the staff is performing
  1. Ads Pro Plugin – Multi-Purpose WordPress Advertising Manager

“More and Better” is always a nice place to be, and Ads Pro, the best ad manager for WordPress puts your ad management operation firmly in that place with its –

  • 20+ ad display techniques
  • 25+ ready-to-use user friendly and responsive ad templates
  • Intuitive Frontend User Panel and Order Form and Statistics Module
  • 4 Payment methods and 3 Billing modules

Click on the banner to learn more about how ads Pro can help you. 

  1. Flow-Flow Social Feed

Flow-Flow is a friendly, fast, and powerful way to customize the design and behavior of your site’s social media feed.

  • You can add as many social feeds to a stream as you need
  • Flow-Flow is responsive, highly customizable, and no coding is required to set it up
  • A free Lite test drive version is available

Flow-Flow has been Envato’s best-selling social media plugin since 2014.

 *****

WordPress plugins are great tools for adding and extending functionality to WordPress and WordPress user sites. To get the greatest value for your money, we recommend that you always set your sites on getting the best plugin in its category.

As you can see from the above selection, best-in-class useful WordPress plugins can be reasonably priced. Any one of these is capable of turning a website into a conversion and money-making machine.

These essential plugins for WordPress are easy to set up and work with, and were designed to make life easy for WordPress website administrators.

Read More at 9 Recommended WordPress Plugins (2021 updated)

Web Design Ledger

Find more web development articles here

These 8 WordPress Plugins Will Save You Time

WordPress is the most popular website-building platform for a variety of reasons. One of them is the vast array of tools and design options and aids it places at your disposal.

Still, there are times you’ll want to invest in a multipurpose or specialty theme if you are to have everything you need at your fingertips.

That may be enough, but if not, and a desired website feature or capability is still out of reach, you have four options:

  • Go without it
  • Code it yourself;
  • Get a developer to do the work for you
  • Find a plugin that will do the job

We suggest the latter option. After all, there are more than 55,000 plugins in the WordPress directory; admittedly more than you might care to have to plow through.

We’re willing to bet that you could use one or more of the following 8 top 2020 plugins to put your website on steroids.

One more thing — they’re free to try or use.

1. Brizy Website Builder for WordPress

Brizy Website Builder for WordPress

If you’re in the market for a free quality website building tool to supplement what the WordPress platform provides, the Brizy plugin could be just what you’ve been looking for.

There are several good reasons for choosing Brizy including —

  • Ease of setup and ease of use because of this plugin’s intuitive user interface
  • No coding is required, and since Brizy is drag and drop you can build a page in mere minutes
  • It bears repeating that using Brizy won’t cost you one cent. You can download it and start working with it today if you want to.
  • There’s no shortage of useful design aids and options, including 500+ pre-made blocks, 40 popups, 150 layouts, and thousands of icons, colors, and font styles.

Should you run into a problem or want to learn as much as you can about where this plugin can take you, there’s plenty of documentation and an excellent selection of tutorial videos.

2. wpDataTables

wpDataTables

When confronted with vast amounts of data (thousands and thousands of rows) gathered from several sources and presented in several formats is precisely what wpDataTables plugin can do to prepare colorful, informative, responsive, and editable tables or charts. Without wpDataTables, it could take you hours or even days to complete the task.

On the other hand, it would take wpDataTables only a few minutes. That, in a nutshell, is one of the reasons why you might choose this WP plugin to do the heavy lifting for you.

wpDataTables can work with data from most, if not all, standard sources such as Excel and CSV files, MySQL queries, JSON feeds, and Google spreadsheets.

It’s ideal for presenting data relating to operational or financial statistics, complex analysis, comparison data, or building and maintaining a product catalog.

3. Logic Hop — Content Personalization for WordPress

Logic Hop

It’s 2020, why is your website showing the same content to every visitor? With Logic Hop, you can display personalized content to each person that visits your site. Why? Because personalized websites perform 200% better. That’s more sales, more signups, more conversions, and lower bounce rates!

Logic Hop automagically pulls over 50 points of data, including geolocation, that can be used to personalize almost any aspect of your site. Want to show a different CTA at night? Easy. Want to show coupons for returning visitors? Done.

Take our word for it; Logic Hop is hands-down the best personalization plugin for WordPress. It’s fully integrated with your favorite page builders like Divi, Beaver Builder, and Elementor, and it’s surprisingly easy to use. Another plus, Logic Hop, is the only personalization tool that works with caching — And it’s GDPR compliant! Give it a try and see what personalization can do for your site.

4. StarCat Reviews

StarCat Review

Product reviews can often play a key role in eCommerce sales. StarCat Reviews is a WooCommerce Review plugin that replaces outmoded WooCommerce reviews with a review and rating system designed to give your business a boost by increasing your eCommerce conversions.

These reviews can feature Multiple Rating options, products, or services. Pros & Cons and overall review scores. You can manage the review process easily. You can display product ratings on Google search pages, and you can put into play premium add-ons like the Photo/Video Review add-on to make the reviews more effective. 

5. Amelia WordPress Booking Plugin

Amelia WordPress Booking Plugin

The Amelia plugin does three essential things for you and does them well.

  • Automates your business’s appointment and event bookings; saving you a ton of money and time in the process
  • Keeps customers happy by enabling them to book, cancel and reschedule appointments online 24/7
  • Keeps your employees happy by matching customer appointment bookings with their availability and preferences

Plus, you can manage bookings from a central location and customize the design and application questions to match your business needs.

6. Heroic KB — Knowledge Base Plugin

Heroic

A hallmark of excellent customer service is the ability to offer a speedy, informative response to their questions. An FAQ page is one approach, but not always a satisfactory one.

Customers always appreciate getting knowledgeable answers and information, especially when they can get it on a 24/7 basis. The Heroic KB knowledge base plugin’s features include live search, article feedback, and answers based on its analysis of actions visitors have taken while visiting your site.

7. Rank Math SEO

Rank Math SEO

You can tie yourself in knots trying to make a website as SEO friendly as possible. Rank Math, with its clean and straightforward interface together with a host of SEO-enhancing features, will do the job for you, saving you a lot of time and needless stress in the process.

Key features include Automated Image SEO, WooCommerce SEO, Automated Image SEO, and several Local SEO options. It will also evaluate 40 different SEO factors to help make your site an e-commerce powerhouse.

8. WordPress Review

WordPress Review

WordPress Review gives you an ideal solution for setting up your website to review books, games, videos, or anything else. You can choose among several types of reviews, circle, star, percentage, and thumbs up, for example, as well as creating product comparison tables.

WordPress Review provides 19 time-saving rich snippets and 16 pre-defined website designs to work with. This plugin is compatible with any WordPress theme and integrates with WooCommerce.

This little gold mine of 8 top plugins for 2020 likely contains one or more nuggets that can put a new or an existing website of yours on steroids. Each provides features or functionalities lacking in most WordPress themes, including specialty themes.

Since they are free to try or use, don’t wait to try one or more of them out to see where you might put them to good use.

The post These 8 WordPress Plugins Will Save You Time appeared first on Hongkiat.

Hongkiat

Check here for more website design posts

10 WordPress plugins you need to try (You’re welcome!)

The cool thing about plugins is that most of them either make something easier, make it better or both. They do so by extending the functionality of software programs. This is why they’re sometimes referred to as software extensions. They benefit web designers and website owners and their users.

The main problem you might have in selecting a useful plugin would be a need to sift through thousands of them. It is not easy to find a “must-have” solution or at least one that would best serve your needs.

Some plugins, like page builders or sliders, you need to use often, if not always. Your need for others, like many of those we’ve listed here, would typically depend on the type of your website. Purpose, and niche matter a lot, too.

If you spot one you could use, grab it. It could make your day!

1. Amelia

          Taking an appointment is a simple task. Taking and scheduling multiple appointments and managing them in a way that satisfies all parties concerned is a different manner.

Doing so manually takes time managers and employees alike would rather spend on their core responsibilities. Manual processes can also be error prone, which in this case could lead to unhappiness among clients and employees alike.

Amelia is a professionally-designed automatic booking system that’s fast, efficient, and essentially error free. The ROI this WordPress plugin provides is in most instances nearly instantaneous. Amelia is on the job around the clock, it matches clients with employees, and it doesn’t make mistakes or let appointments fall through the cracks.

Amelia also manages booking changes and cancellations, sends out reminders, collects payments online, and has been used by more than 1000 businesses that have given it a 4.8 rating in its first 6 months.

2. wpDataTables

          “Advanced”, “powerful”, and “game-changing” are adjectives you see all too often in software product ads and even in reviews. In the case of the wpDataTables WordPress plugin however, they seem to fit quite nicely.

Here are several situations you might typically encounter where wpDataTables will really strut its stuff:

–       You need to create a table or tables based on massive amounts of complex data (and do so relatively quickly).

–       Data you’ll be using can come from a variety of sources and in a variety of formats.

–       You want to build a table (or chart) that’s totally responsive, interactive, and front-end editable so it can easily be changed or updated.

–       Your table or chart should fit in nicely with the overall appearance of your site (i.e., it’s customizable and responsive) and key data elements or functions should be color coded or otherwise highlighted.

In other words, you’re looking for a plugin that’s advanced, powerful, a game changer, and has been used by more than 20,000 businesses and individuals.

That’s why we recommend trying wpDataTables.

3. NextGEN Gallery & NextGEN Pro

          When a software solution is available in both free and premium versions, it usually makes sense to try the free version first. That may be true for the NextGEN WordPress gallery plugins as well. The free version, NextGEN Gallery, has the tools to take your gallery building projects a long way. It allows you to manage and display thousands of images in various gallery and album styles and formats.

The premium version, NextGEN Pro, offers more as you would expect, thanks to its comprehensive set of software extensions that give you a wealth of gallery-building tools, options and additional approaches to building award-winning galleries.

There’s also a middle approach in which for a fee a bundle of Pro extensions can be used with the free version. Once you’ve settled on a NextGEN solution that works best for you, you should never have to search for another gallery-building software solution.

4. MapSVG WordPress map plugin

          In terms of map-making options, MapSVG may well offer more than any map-producing WordPress plugin or software solution on the market. The MapSVG WordPress plugin lets you incorporate customized interactive vector maps, Google maps, and image maps into your website designs.

You can also make maps from PNG and JPEG files, add markers and directory information to existing maps, and overlay custom SVG files on Google maps with this handy WordPress plugin.

5. Logic Hop – Personalized Marketing for WordPress

          Imagine the power of being able to change design elements automatically based on who’s visiting your site. With Logic Hop for WordPress you can! Sound difficult? Logic Hop makes it easy with ready-made recipes, smart CTAs and conditional CSS. Personalize your site using geolocation, social media posts, visitors actions, and even what they’re interested in. Wow your visitors and clients! Try it free for 14 days and take your designs to the next level.

6. Rank Math SEO

          Rank Math’s Content Analysis feature makes it much easier to overcome the challenges associated with a website’s SEO and writing SEO-friendly content. This WordPress plugin can do much more than that however.

Rank Math is a veritable Swiss Army knife of search engine optimization tools designed to make your websites as SEO friendly as possible.

7. Heroic FAQs

          As a business’s website attracts more visitors, its owner is often faced with having to respond to more questions, the bulk of which are repetitive. The Heroic FAQs plugin is a real time saver in this respect.

Heroic FAQs is an excellent tool for creating website FAQ pages. Using drag and drop, you can assemble, order, and categorize questions and answers and add images and videos as appropriate.

8. Heroic Knowledge Base

          If you’ve been looking for a WordPress knowledge base plugin to beef up your online presence you can stop right here. With the Heroic Knowledge Base plugin, you can create a knowledge base to help users find information they are looking for or of interest to them and do so rapidly thanks to its super-speedy Ajax search feature.

You can also get feedback that will help you determine where your website needs improvement.

9. Blog2Social – Smart social media automation for WordPress

          More and more website owners post on one or more social media networks to get their messages across. Blog2Social gives you access to all 16 major social media networks.

With the help of its social media calendar, you can schedule posts on Facebook, LinkedIn, and the other social media networks at the times and in the formats you choose. Share your posts effectively, efficiently, automatically, and error free.

10. WordLift

          If you’ve been wondering when or if you’d be able to put the power of artificial intelligence to good use, here’s your chance. WordLift is an AI-driven WordPress plugin that measures a website content’s performance in a way that enables you optimizing the content, improve your website’s navigation, and boost search engine rankings.

Conclusion

          There should be at least one of these best in their class plugins that could make your day. That being the case, imagine the potential rewards if you find several you could put to good use.

What these software extensions have in common is the ability to make your work easier, extend the features and capabilities of a website to benefit its owner and users, or all the above.

Read More at 10 WordPress plugins you need to try (You’re welcome!)

Web Design Ledger

Check here for more web development posts

10 Awesome PostCSS Plugins to Make You a CSS Wizard

PostCSS is an incredibly versatile tool that makes it possible to transform CSS styles with JavaScript plugins. Its flexibility lies in the way it’s built.

The core part of PostCSS is a Node.js module that you can install with npm, and it has an ecosystem of more than 200 plugins you can choose to use in your project.

PostCSS is neither a preprocessor, nor a postprocessor, as different PostCSS plugins may fall into either of these categories, or both of them; it depends entirely on you what you make of it. With PostCSS, you don’t need to learn a different syntax like in the case of Sass or LESS; you can immediately start to use it.

PostCSS takes your existing CSS file and turns it into JavaScript-readable data, then the JavaScript plugins perform the modifications, and PostCSS returns the altered version of the original file. Sounds cool, doesn’t it?

In this post we will take a look at 10 PostCSS plugins to give you an insight into some of the great things you can achieve with this awesome tool.

1. Autoprefixer

Autoprefixer is probably the most well-known PostCss plugin, as it’s used by notable tech companies such as Google, Twitter, and Shopify. It adds vendor prefixes to CSS rules where it’s necessary.

Autoprefixer uses data from Can I Use. This way it doesn’t get dated, and can always apply the most recent rules. You can check out how it works on its interactive demo site.

Autoprefixer PostCSS Plugin

2. CSSnext

CSSnext is a CSS transpiler that allows you to use future CSS syntax on current sites. W3C has many new CSS rules that aren’t currently implemented by browsers, but could enable developers to write more sophisticated CSS faster and easier. CSSnext has been made to bridge this gap.

It’s worth to take a look at its features to see what you can accomplish with it, for example you can use custom media queries, custom selectors, colour modifiers, SVG filters, and new pseudoclasses in your designs.

CSSnext PostCSS Plugin

3. PreCSS

PreCSS is one of the PstCSS plugins that work like a CSS preprocessor. It makes it possible to take advantage of a Sass-like markup in your sytlesheet files.

By introducing PreCSS into your workflow you can use variables, if-else statements, for loops, mixins, @extend and @import rules, nesting, and many other handy features in your CSS code. PreCSS’s Github documentation gives you detailed instructions on how to make the most of it.

PreCSS PostCSS Plugin

4. StyleLint

StyleLint is a modern CSS linter that proofreads and validates your CSS code. It makes it easy to avoid errors and pushes you to follow consistent coding conventions.

StyleLint understands the latest CSS syntax, so it can be used along with the previously mentioned PreCSS plugin. It also allows you to make your own configuration, and even checks if your settings are valid.

5. PostCSS Assets

The PostCSS Assets plugin is a handy asset manager for your CSS files. It can be a great choice if you tend to have trouble with URL paths, as PostCSS Assets isolates your stylesheet files from environmental changes.

You need to define load paths, relative paths, and a base path, and the plugin will automatically look up the assets you need. For example you can write the following code if you need the proper URL of the foobar.jpg image:

 body {  background: resolve('foobar.jpg'); }

PostCSS Assets also takes care of the assets cache, as you can set the cachebuster variable to true if you want URL paths to be automatically changed in case an asset is modified. This smart plugin also calculates the dimensions (width and height) of image files, or even resizes them using a preset ratio.

6. CSSNano

If you need optimized and minified CSS files for a production site, it’s worth to check out CSSNano. It’s a modular plugin that consists of many smaller, single-responsibility PostCSS plugins. It doesn’t only perform basic minification techniques such as removing whitespaces, but also has advanced options that make focused optimizations possible.

Among many other features, CSSNano is capable of rebasing z-index values, reducing custom identifiers, converting length, time and colour values, and removing outdated vendor prefixes.

CSSNano PostCSS Plugin

7. Font Magician

If you are a fan of sophisticated typography, you will surely like the Font Magician PostCSS plugin. The magic of Font Magician relies in its capability of automatically generating all the necessary @font-face rules.

How it works is pretty straightforward, you only need to add the font-family: "My Fav Font"; CSS rule to an HTML element, and Font Magician does the rest of the work. It can add Google Fonts, the local copy of a font, Bootstrap typography, and can also load fonts asynchronously. Here’s its interactive demo site.

Font Magician PostCSS Plugin

8. Write SVG

Have you ever wondered about how cool it would be to write SVG right into your CSS files? With the help of the Write SVG PostCSS plugin you can easily achieve this goal.

This handy plugin, for example, makes it possible to store your SVG backgrounds and icons in your CSS file, and later add them to the relevant HTML element in the following way:

 @svg square {  @rect {   fill: var(--color, black);   width: 100%;   height: 100%;  } }  .example {  background: white svg(square param(--color #00b1ff)) cover; }

9. Lost Grid

Lost Grid is a great PostCSS plugin that provides you with an impressive CSS grid system that doesn’t only works with plain CSS but also with preprocessor languages (Sass, LESS, Stylus). It uses the calc() CSS function to create beautiful grids that you can easily use without spending too much time with customization.

Lost Grid has pretty much straightforward rules, for example defining a column with 25% width doesn’t takes more than this little code snippet:

 div {  lost-column: 1/4; }
Lost Grid PostCSS Plugin

10. PostCSS Sprites

The PostCSS Sprite plugin makes it easy to generate image sprites, i.e. collections of images placed into a single file. After setting a few options, the plugin takes the images from your stylesheet file, merges them into a sprite, then updates the image references wherever it’s necessary.

You can use different filters and groupers to determine which images you want to put into the sprite, and you can set the dimensions of the output image as well.

The post 10 Awesome PostCSS Plugins to Make You a CSS Wizard appeared first on Hongkiat.

Hongkiat