Home
Application and Data
Languages & Frameworks
Front-End Frameworks

Flat UI vs Semantic UI

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

Flat UI
107
143
+ 1
4
Semantic UI
951
1.5K
+ 1
673
Add tool

Flat UI vs Semantic UI: What are the differences?

Flat UI: Free Bootstrap Framework and Theme. Flat UI is a beautiful theme for Bootstrap. We have redesigned many of its components to look flat in every pixel; Semantic UI: A UI Component library implemented using a set of specifications designed around natural language. Semantic empowers designers and developers by creating a shared vocabulary for UI.

Flat UI and Semantic UI can be categorized as "Front-End Frameworks" tools.

Some of the features offered by Flat UI are:

  • Bootstrap-based
  • Retina Ready Images and Icons
  • Custom form components

On the other hand, Semantic UI provides the following key features:

  • Build Responsive Layouts Easier
  • Self Explanatory
  • Tag ambivalent

Flat UI and Semantic UI are both open source tools. It seems that Semantic UI with 45.9K GitHub stars and 4.84K forks on GitHub has more adoption than Flat UI with 14.5K GitHub stars and 2.46K GitHub forks.

Snapchat, Create.It, and Reviewable are some of the popular companies that use Semantic UI, whereas Flat UI is used by Apexure, Leonis Holding, and SkyQuest. Semantic UI has a broader approval, being mentioned in 77 company stacks & 55 developers stacks; compared to Flat UI, which is listed in 4 company stacks and 3 developer stacks.

Get Advice from developers at your company using StackShare Enterprise. Sign up for StackShare Enterprise.
Learn More
Pros of Flat UI
Pros of Semantic UI
  • 1
    Sass support
  • 1
    CSS class naming conventions are similar to Bootstrap
  • 1
    Good for mockups and minimal UI design
  • 1
    Basic Flat design
  • 157
    Easy to use and looks elegant
  • 92
    Variety of components
  • 64
    Themes
  • 61
    Has out-of-the-box widgets i would actually use
  • 57
    Semantic, duh
  • 44
    Its the future
  • 42
    Open source
  • 37
    Very active development
  • 31
    Far less complicated structure
  • 28
    Gulp
  • 9
    Already has more features than bootstrap
  • 8
    Just compare it to Bootstrap and you'll be hooked
  • 7
    Clean and consistent markup model
  • 7
    UI components
  • 6
    Responsiveness
  • 4
    Because it is semantic :-D
  • 4
    Elegant. clean. readable. maintainable
  • 4
    Good-Looking
  • 2
    Is big and look really great, nothing like this
  • 2
    Consistent
  • 2
    Great docs
  • 2
    Modular and scalable
  • 1
    Easy to use
  • 1
    Blends with reactjs
  • 1
    Jquery

Sign up to add or upvote prosMake informed product decisions

Cons of Flat UI
Cons of Semantic UI
  • 1
    Not for creative and modern UI design
  • 5
    Outdated build tool (gulp 3))
  • 3
    Poor accessibility support
  • 3
    HTML is not semantic (see list component)
  • 2
    Javascript is tied to jquery

Sign up to add or upvote consMake informed product decisions

What is Flat UI?

Flat UI is a beautiful theme for Bootstrap. We have redesigned many of its components to look flat in every pixel.

What is Semantic UI?

Semantic empowers designers and developers by creating a shared vocabulary for UI.

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

What companies use Flat UI?
What companies use Semantic UI?
See which teams inside your own company are using Flat UI or Semantic UI.
Sign up for StackShare EnterpriseLearn More

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

What tools integrate with Flat UI?
What tools integrate with Semantic UI?

Sign up to get full access to all the tool integrationsMake informed product decisions

What are some alternatives to Flat UI and Semantic UI?
Material Design
Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.
Material-UI
Material UI is a library of React UI components that implements Google's Material Design.
Bootstrap
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Material Design for Angular
Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices. Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.
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.
See all alternatives

Related Comparisons

Bootstrap vs Material-UI vs Semantic UIBootstrap vs Material Design for Angular vs Semantic UIBootstrap vs Semantic UI vs UIkItBootstrap vs Materialize vs Semantic UIBootstrap vs Flat UI vs Material Design for Angular

Trending Comparisons

Django vs Laravel vs Node.jsBootstrap vs Foundation vs Material-UINode.js vs Spring BootFlyway vs LiquibaseAWS CodeCommit vs Bitbucket vs GitHub

Top Comparisons

Postman vs Swagger UIHipChat vs Mattermost vs SlackBitbucket vs GitHub vs GitLabBootstrap vs Materialize