Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

Less
Less

1.6K
930
+ 1
925
Materialize
Materialize

479
521
+ 1
538
Add tool

Less vs Materialize: What are the differences?

Developers describe Less as "The dynamic stylesheet language". Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable. On the other hand, Materialize is detailed as "A modern responsive front-end framework based on Material Design". A CSS Framework based on material design.

Less can be classified as a tool in the "CSS Pre-processors / Extensions" category, while Materialize is grouped under "Front-End Frameworks".

"Better than css", "Variables" and "Mixins" are the key factors why developers consider Less; whereas "Google material design", "Responsive" and "Easy to use" are the primary reasons why Materialize is favored.

Less and Materialize are both open source tools. It seems that Materialize with 36.1K GitHub stars and 4.8K forks on GitHub has more adoption than Less with 16.1K GitHub stars and 3.46K GitHub forks.

According to the StackShare community, Less has a broader approval, being mentioned in 498 company stacks & 169 developers stacks; compared to Materialize, which is listed in 46 company stacks and 56 developer stacks.

What is Less?

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

What is Materialize?

A CSS Framework based on material design.
Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

Why do developers choose Less?
Why do developers choose Materialize?

Sign up to add, upvote and see more prosMake informed product decisions

    Be the first to leave a con
    What companies use Less?
    What companies use Materialize?

    Sign up to get full access to all the companiesMake informed product decisions

    What tools integrate with Less?
    What tools integrate with Materialize?
      No integrations found
      What are some alternatives to Less and Materialize?
      CSS 3
      CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts. Experimental parts are vendor-prefixed and should either be avoided in production environments, or used with extreme caution as both their syntax and semantics can change in the future.
      Sass
      Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
      Animate.css
      It is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
      PostCSS
      PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
      Stylus
      Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.
      See all alternatives
      Decisions about Less and Materialize
      Koa
      Koa
      React Router
      React Router
      Foundation
      Foundation
      Semantic UI
      Semantic UI
      Bootstrap
      Bootstrap
      PostCSS
      PostCSS
      Less
      Less
      Sass
      Sass
      styled-components
      styled-components
      React Helmet
      React Helmet
      Webpack
      Webpack
      TypeScript
      TypeScript
      JavaScript
      JavaScript
      Apollo
      Apollo
      GraphQL
      GraphQL
      React
      React
      #JSX
      #React.
      #Css
      #StyledComponents.
      #Async
      #HTML
      #GraphQL
      #Apollo

      ReactQL is a React + GraphQL front-end starter kit. #JSX is a natural way to think about building UI, and it renders to pure #HTML in the browser and on the server, making it trivial to build server-rendered Single Page Apps. GraphQL via Apollo was chosen for the data layer; #GraphQL makes it simple to request just the data your app needs, and #Apollo takes care of communicating with your API (written in any language; doesn't have to be JavaScript!), caching, and rendering to #React.

      ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

      React Helmet was chosen to handle <head> content, because it works universally, making it easy to throw back the correct <title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.

      styled-components, Sass, Less and PostCSS were added to give developers a choice of whether to build styles purely in React / JavaScript, or whether to defer to a #css #preprocessor. This is especially useful for interop with UI frameworks like Bootstrap, Semantic UI, Foundation, etc - ReactQL lets you mix and match #css and renders to both a static .css file during bundling as well as generates per-page <style> tags when using #StyledComponents.

      React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.

      Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.

      See more
      Interest over time
      Reviews of Less and Materialize
      Review ofMaterializeMaterialize

      I've been using materialize and I'm really happy with it, in some months I'm sure it will become one of the best front-end frameworks around the internet, because it's easy and fast to use and to get started with it.

      It also got a nice community of developers that help developing it and finding bugs, as well a translation team, looking to get materialize into the major countries.

      My final review is that is one of the best front-end frameworks I've ever found and get used really fast and it's one of the most comfortable frameworks to use as well.

      Avatar of grigb
      Owner at Lumeneo
      Review ofMaterializeMaterialize

      As I've been applying Materialize, I've discovered some limitations.

      For example, the tabs require ids for the content divs. This makes is difficult to create content dynamically.

      The documentation is not accurate.

      To use materializecss, you will need to review the source code often.

      Review ofLessLess

      Absolutely fantastic, not only does it allow for modularity but it is armed with the most useful features like colour operations and nested styles to make you achive more by writing LESS.

      Avatar of grigb
      Owner at Lumeneo
      Review ofMaterializeMaterialize

      As I've been applying Materialize, I've discovered some limitations.

      The Glitter page: https://gitter.im/Dogfalo/materialize provided excellent support though. Kudos!

      Review ofMaterializeMaterialize

      It is very easy to use. Very good community and documentation :P. Keep up the good work.

      How developers use Less and Materialize
      Avatar of papaver
      papaver uses LessLess

      love me some less. been less styling for around 3 years. makes working with bootstrap and responsive website a breeze. so much power in the language.

      Avatar of Romans Malinovskis
      Romans Malinovskis uses LessLess
      Avatar of Giovanni Candido da Silva
      Giovanni Candido da Silva uses LessLess

      Customise the UIkit Front-End Framework, because of that is used to create the application CSS. I prefer SASS but is equivalent.

      Avatar of BrizTech Ltd.
      BrizTech Ltd. uses LessLess

      CSS Preprocessor, used primarily for variables to ensure brand colour continuity.

      Avatar of CodeBee
      CodeBee uses LessLess

      We use Less to organize our CSS code with imports, variables, mixins, and more.

      Avatar of Kim Do Hyeon
      Kim Do Hyeon uses MaterializeMaterialize

      부트스트랩은 너무 흔해서 적당히 흔하고 좋은거 찾다가 발견

      How much does Less cost?
      How much does Materialize cost?
      Pricing unavailable
      Pricing unavailable
      News about Less
      More news
      News about Materialize
      More news