6 Free Material Design CSS Frameworks for 2017 Compared

It was 2014 when Google introduced Material Design as their design language. Since then it has been adopted and implemented in a plethora of Google products including Gmail, Docs and Drive, to name just a few. Material Design is seen both in native Android and modern web applications - in fact, nowadays it has become increasingly popular.

Those involved with web development may wish to keep up with the latest design trends and implement Material Design in their work. This article sets out to list Material Design CSS frameworks and their specific features, which will hopefully help you pick the best one suited to your project. Choose your partner in crime wisely - you're going to need help when creating those outstanding web experiences after all!

It should be noted that some of the following details, such as framework polularity and available features, may slightly differ over time. Should you be interested in any framework, make sure to check the original resources for any last minute update.

1. Materialize

Materialize is arguably one of the most well-known Material Design CSS frameworks out there. Developed by a team of highly skilled, passionate students, Materialize is widely used with many available third party themes. It provides an ideal opportunity to get started with Material Design for the web without sticking your feet into cold water.

• Maintainers: Alvin Wang et al.

• Release: 2014

• Version: 0.99.0

• Popularity: 27,000 stars and 3,900 forks on GitHub

• Description: "A modern responsive front-end framework based on Material Design"

• Core concepts/principles: Responsive web design and UX focused

• Framework size: 931 KB (download)

• Preprocessors: Sass

• Responsive: Yes

• Modular: Yes

• Starting templates/layouts: Yes

• Icons: Material Design Icons

• Typography: Roboto

• Documentation: Good

• Browser support: Firefox 31+, Chrome 35+, Safari 7+, IE 10+

• License: MIT

• Code sample:

  [code language="html"]
  <a class="waves-effect waves-light btn">Button</a>
  [/code]

• Pros: Large user base, continuous development, good documentation, third party support (e.g., templates, extensions, etc.)

• Cons: N/A

• Ideal for: Getting started with Material Design on the web

2. MUI

MUI is quite popular as well. Although an individual effort, it raises the bar by providing out-of-the-box support for Angular, React and WebComponents. The detailed documentation also deserves a thumbs-up.

• Maintainers: Andres Morey

• Published: 2015

• Current version: 0.9.17

• Popularity: 3,400 stars and 370 forks on GitHub

• Description: "A lightweight CSS framework that follows Google's Material Design guidelines"

• Core concepts/principles: Cross platform support

• Framework size: 461 KB (download) / 6.7 KB (NPM package, minified)

• Preprocessors: Sass

• Responsive: Yes

• Modular: Yes

• Starting templates/layouts: Yes

• Icons: None bundled

• Typography: Arial, Verdana, Tahoma

• Documentation: Very good

• Browser support: Firefox, Chrome, Safari, IE 10+

• License: MIT

• Code sample:

  [code language="html"]
  <button class="mui-btn mui-btn--primary">Button</button>
  [/code]

• Pros: Default support for Angular, React, WebComponents and HTML Email, extensive documentation

• Cons: Lack of third party support, e.g., themes, add-ons, etc.

• Ideal for: Hassle-free integration with Angular, React or WebComponents

3. Surface

Continue reading %6 Free Material Design CSS Frameworks for 2017 Compared%

by Giannis Konstantinidis via SitePoint

Fresh Design Agency

Fresh Design is a web-development agency, which main feature is development of high-load web-services, corporate websites and social networks.

by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery

Cocoon

Responsive portfolio for UK based digital agency, Cocoon Development.

by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery

Waymark

Waymark is an art and technology company that creates smart marketing tools to grow your business and drive more traffic to your site.

by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery

The Beginner’s Guide to Website Staging

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

Are you thinking of making changes to your site? Perhaps an update or a redesign?

Before you jump in head first, you should know there is a quicker and safer way to do that.

Enter website staging.

A handful of hosting companies offer website staging to their clients and this article aims to unveil all the greatness that is website staging and why they are a game changer for not only designers and developers, but everyday site owners.

What is Website Staging?

A staging site is essentially a clone of your website that is actually independent from your live site that visitors can see. It has the same settings, same software, and same hardware as your live site but is safely placed in a staging area while you work on it. This staging area can be thought of as a sandbox or demo site that can be altered for any purpose while having no effect on your live site.

When you are satisfied with the changes you have made, then this clone site can be pushed live with the click of a button at any time. The staged site will essentially overwrite or become your live site.

Why is Website Staging Important?

Website staging is a key feature in any great hosting package because it allows you to make changes to your website without interrupting your live site. This means no downtime while making changes, so you can keep on engaging your readers and selling products. This also means you won’t take a hit on your SEO ranking because search engines won’t be indexing the staging copy of your site.

Website staging is important not just to keep your site operational at all times but also to test out site changes before making them live. Installing a new plugin or theme? That’s a perfect time to test it on a staging site. Making routine updates to your WordPress themes or plugins? Another great scenario to use a cloned site. Making a staging site a part of your website maintenance schedule is definitely a best practice that will pay dividends in the long run. It will prevent downtime from faulty plugins or theme updates being incompatible with your unique site features.

Another key feature of website staging is the ability to do site redesigns on the fly without any site interruption. You or your designer can create a quick clone of the site in the staging area and make all the necessary changes without having to go through the arduous process of downloading all the files, plugins, themes, etc. and setting them up on a new site. That process can take hours. With a staging site, you are making changes in a matter of minutes. Once everything is complete, and you're satisfied that the changes look good and function properly you can simply click a button and push that site live for your customers to see.

How Can You Use Website Staging?

While the exact staging process may differ with each hosting provider, you can rest assured they all work in a similar fashion. Here’s a breakdown of the standard step-by-step process of website staging:

1. Navigate to your cPanel or WordPress dashboard where you will find an option for ‘Staging’.

Continue reading %The Beginner’s Guide to Website Staging%

by Jacob McMillen via SitePoint

LeadPack

'LeadPack' is a bundle of 15 HTML Landing Page templates. Pictured here is my favorite layout called The Agency featuring a very clear lead capturing form above-the-fold. Other Landing Page layouts cover medical, travel, apps, books, portfolios, construction and even education layouts. What's great to know is there are over 50 modular 'block elements' that allow you to construct any sort of Landing Page you may need - all for only $14!

by Rob Hope via One Page Love

The Theory of Constraints in PHP

I had been reading The Phoenix Project, a great novel about IT (you read that right), which presents day to day IT and devops problems at a large Amazon-like company in a way which makes mortals understand the complexities and chaos of 21st century technology.

Without giving away any spoilers, at one point in the book the Theory of Constraints is mentioned. As per Wikipedia:

The Theory of Constraints (TOC) is a management paradigm that views any manageable system as being limited in achieving more of its goals by a very small number of constraints. There is always at least one constraint, and TOC uses a focusing process to identify the constraint and restructure the rest of the organization around it.

The Theory of Constraints can be distilled to the idea that the chain is only as strong as its weakest link.

In the book it was phrased thusly:

Any improvements made anywhere besides the bottleneck are an illusion.

For some reason, this resonated with me much more than the chain idiom. There's just something about building something that's ineffective that's more relatable to me than breaking something that's weakly built.

Factories and Browsers

As (initially) presented in the book and slightly dumbed down here, a factory floor was seeing a pile-up of work orders at one desk, with other areas of the factory working somewhat satisfactorily. Without working on optimizing this one desk's throughput and by (either coincidentally or intentionally) upgrading the process that precedes or supersedes it, the factory became clogged with work because the former lead to a stack of products before the desk that had no destination, and the latter lead to idle workers at the other end of the facility, waiting for the products to reach them for shipping, but all stuck in slow processing at the central desk.

To go off on a slight tangent here - if you follow me on Twitter, you know I like to rant about browsers. I especially lose it when they put in updates like native OSX notifications but fail to address the decade old RAM use problem. Some people are quick to address this as an appeal to worse problems fallacy, but I disagree. While, yes, this is an appeal to a worse problem, I don't see it as fallacy - rather, I see it as a lack of identified constraints on Google's part. As a company, they seem completely clueless of what's in need of optimization, or are devoid of resources to dedicate to the fixing of this problem (not sure which is worse). So we have all these "improvements" made outside the bottleneck, driving power users mad and resulting in attempts at revamping the browser by slapping another skin on it (Vivaldi, Brave, Opera, Ghost...), but unable to make progress because, again, the bottleneck remains. If you move the desk and the whole factory setup from one building to the next, the desk is still the problem. Fix the desk.

Continue reading %The Theory of Constraints in PHP%

by Bruno Skvorc via SitePoint