Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Top 5 CSS Frameworks That You Should Pay Attention TO

DZone's Guide to

Top 5 CSS Frameworks That You Should Pay Attention TO

If you're looking to change up the framework in which you write your CSS, read on for examples of how to use these five popular options.

· Web Dev Zone
Free Resource

Add user login and MFA to your next project in minutes. Create a free Okta developer account, drop in one of our SDKs to your application and get back to building.

CSS frameworks are gaining a lot of popularity these days and to be honest, it’s hard to imagine a website without using them. As all development tools, CSS frameworks are in a constant state of evolution and improvement and thus we highly recommend that you keep an eye on the modern trends. To make it easier for you, we’ve come up with top-5 most popular CSS frameworks of 2017 that you may want to deploy (if you are not using them already).

1. Bootstrap

This framework is one of the GitHub stars and is considered the best responsive CSS framework. Designed for front-end development specifically, it helps to build web design concepts, mobile first projects, grid systems, typography, buttons, and so on.

Bootstrap doesn’t have any extras but there are third-party plugins available and in addition to regular HTML elements Bootstrap also has other common UI elements. Its core principles are RWD and mobile first.

Bootstrap version 3 supports a variety of browsers (their latest versions) and since Bootstrap 2 the framework has supported responsive web design. Bootstrap 4 version is currently in development.

See the Pen Bootstrap gallery by Dash Bouquet (@dashbouquetdevelopment) on CodePen, or check out the code below:

HTML:

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://rawgit.com/LeshikJanz/libraries/master/Bootstrap/baguetteBox.min.css">
  
    <title>Freebie: 4 Bootstrap Gallery Templates</title>
</head>
<body>

<div class="container gallery-container">

    <h1>Bootstrap 3 Gallery</h1>

    <p class="page-description text-center">Fluid Layout With Overlay Effect</p>
    
    <div class="tz-gallery">

        <div class="row">

            <div class="col-sm-12 col-md-4">
                <a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" alt="Bridge">
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg" alt="Park">
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/tunnel.jpg">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/tunnel.jpg" alt="Tunnel">
                </a>
            </div>
            <div class="col-sm-12 col-md-8">
                <a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/traffic.jpg">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/traffic.jpg" alt="Traffic">
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/rails.jpg">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/rails.jpg" alt="Coast">
                </a>
            </div> 
            <div class="col-sm-6 col-md-4">
                <a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/coast.jpg">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/coast.jpg" alt="Rails">
                </a>
            </div>

        </div>

    </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
<script>
    baguetteBox.run('.tz-gallery');
</script>
</body>
</html>

CSS:

body {
    background-color: #434c50;
    min-height: 100vh;
    font: normal 16px sans-serif;
    padding: 40px 0;
}

.container.gallery-container {
    background-color: #fff;
    color: #35373a;
    min-height: 100vh;
    padding: 30px 50px;
}

.gallery-container h1 {
    text-align: center;
    margin-top: 50px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: bold;
}

.gallery-container p.page-description {
    text-align: center;
    margin: 25px auto;
    font-size: 18px;
    color: #999;
}

.tz-gallery {
    padding: 40px;
}

/* Override bootstrap column paddings */
.tz-gallery .row > div {
    padding: 2px;
}

.tz-gallery .lightbox img {
    width: 100%;
    border-radius: 0;
    position: relative;
}

.tz-gallery .lightbox:before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    opacity: 0;
    color: #fff;
    font-size: 26px;
    font-family: 'Glyphicons Halflings';
    content: '\e003';
    pointer-events: none;
    z-index: 9000;
    transition: 0.4s;
}


.tz-gallery .lightbox:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(46, 132, 206, 0.7);
    content: '';
    transition: 0.4s;
}

.tz-gallery .lightbox:hover:after,
.tz-gallery .lightbox:hover:before {
    opacity: 1;
}

.baguetteBox-button {
    background-color: transparent !important;
}

@media(max-width: 768px) {
    body {
        padding: 0;
    }
}

Results: 

Bootstrap 3 Gallery

Fluid Layout With Overlay Effect

BridgeParkTunnelTrafficCoastRails

Conclusion: Bootstrap is incredibly popular but it may not be better than other frameworks. However, the majority of people use it due to its popularity and thanks to that, there are a lot of resources available (such as tutorials, extra plugins, etc.) that make work with Bootstrap even easier.

2. Foundation

Foundation is an open-source project and another very strong player in the world of CSS frameworks. It is well-known by being incredibly smooth and responsive and can be used for many purposes: building websites, creating email templates, building mobile and web apps.

This framework is also very user-friendly as it offers training, support, and consultation. It has some unique components (Keystrokes, Joyride, Flex Video, etc.) and a number of add-ons. Its core principles, in addition to RWD and mobile first, also include semantic.

See the Pen Foundation example by Dash Bouquet (@dashbouquetdevelopment) on CodePen, or check out the code below:

HTML:

<div style="width: 100%; text-align: center">
    <h1>Custom search bar using Zurb Foundation</h1>
<input type="search" name="search" placeholder="Search.." class="animated-search-form">
</div>

CSS:

body {
  padding: 0 20%;
}

.animated-search-form[type=search] {
  width: 10rem;
  border: 0.125rem solid #e6e6e6;
  box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.18);
  border-radius: 0;
  background-image: url("//image.ibb.co/i7NbrQ/search_icon_15.png");
  background-position: 0.625rem 0.625rem;
  background-repeat: no-repeat;
  padding: 0.75rem 1.25rem 0.75rem 2rem;
  transition: width 0.4s ease-in-out;
}

.animated-search-form[type=search]:focus {
  width: 100%;
}

Conclusion: Foundation has claimed a stake for itself with perfect workflow and great support for developers. It is a very professional framework and with a lot of available tutorials, you will be able to learn Foundation in no time.

3. Bulma

This open source and free framework is great in terms of saving your time and energy and it’s gaining quite a lot of popularity recently since it’s very simple to learn and use.

Firstly, Bulma contains great UI components, like tabs, navigation bar, boxes, panel and much more because this framework is designed to provide you with clear and attractive UI. Secondly, Bulma is incredibly modular meaning you can import only those features that are needed and you can start your work. Finally, this framework has very readable classes, which again may be a huge advantage for some developers.

See the Pen Bulma-example by Dash Bouquet (@dashbouquetdevelopment) on CodePen, or check out the code below:

HTML:

<nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
  <a class="navbar-item">
    <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
  </a>

  <div class="navbar-item has-dropdown is-hoverable">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown is-boxed">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.6.0
      </div>
    </div>
  </div>
</nav>

<section class="hero">
  <div class="hero-body">
    <p class="title">
      Example of Bulma navigation bar
    </p>
  </div>
</section>

Conclusion: Bulma is easy to understand and simple to use and at the same time it has all the necessary features to help you create great and efficient products.

4. Ulkit

Not many people know (and use) this framework but it has the same functionality as other similar frameworks and should definitely be paid attention to.

This framework is lightweight and modular and is used for creating fast but powerful web interfaces. Ulkit is basically a collection of easily customized components and it has an HTML Editor, Flex, and other add-ons and unique components. Its core principles are RWD and mobile first, and Ulkit is widely used in a lot of WordPress themes.

See the Pen Ulkit example by Dash Bouquet (@dashbouquetdevelopment) on CodePen, or check out the code below:

<div class="uk-child-width-1-2 uk-child-width-1-3@s uk-grid-match uk-grid-small" style="display: flex; flex-wrap: wrap;" uk-grid>
    <div class="uk-text-center">
        <div class="uk-inline-clip uk-transition-toggle">
            <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" alt="">
            <div class="uk-transition-fade uk-position-cover uk-position-small uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">
                <p class="uk-h4 uk-margin-remove">Fade</p>
            </div>
        </div>
        <p class="uk-margin-small-top">Fade</p>
    </div>
    <div class="uk-text-center">
        <div class="uk-inline-clip uk-transition-toggle">
            <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" alt="">
            <div class="uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-default">
                <p class="uk-h4 uk-margin-remove">Bottom</p>
            </div>
        </div>
        <p class="uk-margin-small-top">Bottom</p>
    </div>
    <div class="uk-text-center">
        <div class="uk-inline-clip uk-transition-toggle">
            <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" alt="">
            <img class="uk-transition-scale-up uk-position-cover" src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg" alt="">
        </div>
        <p class="uk-margin-small-top">2 Images</p>
    </div>
    <div class="uk-text-center">
        <div class="uk-inline-clip uk-transition-toggle">
            <img class="uk-transition-scale-up uk-transition-opaque" src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" alt="">
        </div>
        <p class="uk-margin-small-top">Scale Up Image</p>
    </div>
    <div class="uk-text-center">
        <div class="uk-inline-clip uk-transition-toggle uk-light">
            <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" alt="">
            <div class="uk-position-center">
                <div class="uk-transition-slide-top-small"><h4 class="uk-margin-remove">Headline</h4></div>
                <div class="uk-transition-slide-bottom-small"><h4 class="uk-margin-remove">Subheadline</h4></div>
            </div>
        </div>
        <p class="uk-margin-small-top">Small Top + Bottom</p>
    </div>
</div>

Conclusion: This framework enables you with a flexible mechanism for manual customization and can be really helpful depending on your requirements.

5. Semantic UI

As you can guess from the name, Semantic UI is aimed at making the website building process more semantic. Its core feature is utilizing natural language principles thus making the code more readable and easier to understand.

Its core principles are tag ambivalence, semantics, and responsiveness. This framework is treating words and classes as exchangeable components and stands out with intuitive JS and simple debugging.

What is also nice about Semantic UI is the fact that it offers well-organized documentation and a website with guides on how to get started. In short, it has over 3000 theming variables, over 50 UI components, and more than 5000 commits. Definitely worth a try.

See the Pen Semantic-UI example by Dash Bouquet (@dashbouquetdevelopment) on CodePen, or check out the code below:

HTML:

<div style="display: flex; flex-direction: column;">
  <div style="display: flex; flex-wrap: wrap;">
      <button class="ui button" role="button" onclick={handleHide()}>Hide</button>
    <button class="ui button" role="button" onclick={handleFlip()}>Flip</button>
    <button class="ui button" role="button" onclick={handleScale()}>Scale</button>
    <button class="ui button" role="button" onclick={handleFadeUp()}>Fade</button>
    <button class="ui button" role="button" onclick={handleLooping()}>Looping</button>
    <button class="ui button" role="button" onclick={handleStop()}>Stop Looping</button>
    </div> 
  <img style="max-height: 250px; max-width: 200px;" class="ui green leaf image transition visible" src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Ulkit%20example/rose.png" />
  </div>

JavaScript:

function handleFlip() {
$('.green.leaf')
  .transition('horizontal flip', '500ms')
  .transition('horizontal flip', '500ms')
}

function handleHide() {
$('.green.leaf')
  // default everything
  .transition()
}

function handleScale() {
$('.green.leaf')
  // default everything
  .transition({
    animation  : 'scale',
    duration   : '2s'
  })}


function handleFadeUp() {
$('.green.leaf')
  // fade up out is used if available
 .transition({
    animation  : 'fade up',
    duration   : '2s'
  })
}

function handleLooping() {
$('.green.leaf')
  .transition('set looping')
  .transition('bounce', '2000ms')
}

function handleStop() {
$('.green.leaf')
  .transition('remove looping')
}

Conclusion: Good choice for those who want to create beautiful and responsive websites.

Wrapping It Up

CSS Frameworks

That’s our top-5 CSS frameworks that I find interesting enough to use and try. Comment if you’ve already tried them or want to suggest something new.

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:
css ,bootstrap ,front end development ,ui ,web dev

Published at DZone with permission of Anton Shaleynikov. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}