MENU


Frameworks

CSS frameworks pre-defines generic classes of useful CSS rules in an external stylesheet. Bootstrap, arguably the most popular front-end framework, is covered here.


Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. Tailwindis more than a CSS framework, it is an engine for creating design systems:


<div class="md:flex">
   <div class="md:flex-shrink-0"><img class="rounded-lg md:w-56"
        src="https://images.unsplash.com/photo.jpg"
        alt="Woman paying for a purchase">
   </div>
   <div class="mt-4 md:mt-0 md:ml-6">
      <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">
         Finding customers for your new business</a>
       <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
   </div>
</div>


Materialize is a modern responsive front-end framework based on Material Design. It incorporates components and animations that provide more feedback to users.


RESETRUNFULL
<!DOCTYPE html><html><head>
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link type="text/css" rel="stylesheet" media="screen,projection"
          href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head><body>
   <!-- Scaled out -->
   <a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition scale-out">
      <i class="material-icons">add</i>
   </a>
   <!--JavaScript at end of body for optimized loading-->
   <script type="text/javascript"
           src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</body></html>

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you are building highly interactive web applications, or you just need to add a date picker to a form control, jQuery UI is a good choice:


RESETRUNFULL
<!doctype html><html lang="en"><head>
   <meta charset="utf-8">
   <title>datepicker demo</title>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
   <script src="//code.jquery.com/jquery-1.12.4.js"> </script>
   <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head><body>
   <div id="datepicker"></div>
   <script>
      $( "#datepicker" ).datepicker();
   </script>
   <br/><input type="date"/>
</body></html>

Semantic UI is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. With 3000+ Theming Variables and 50+ UI Components, Semantic UI comes equipped with an intuitive inheritance system that lets you have complete design freedom. Develop your UI once, then deploy with the same code everywhere. 


...<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css"> 
   <script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"
           integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="></script> 
   <script src="semantic/dist/semantic.min.js"></script>
...
   $('.sequenced.images .image').transition({ debug : true, animation : 'jiggle', duration : 500, interval : 200 });
...


Siimple is a flat, minimal, and different CSS framework.


RESETRUNFULL
<!DOCTYPE html><html><head>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple@3.3.1/dist/siimple.min.css"/>
   <title>Login example | siimple</title>
</head><body>
   <div class="siimple-content siimple-content--extra-small">
      <div class="siimple--px-5 siimple--py-5">
         <div class="siimple-h2 siimple--text-normal siimple--mb-1" align="center">
            Login
         </div>
         <div class="siimple-paragraph siimple-paragraph--lead" align="center">
             Use your email and password to sign in into our site
         </div>
         <div class="siimple-field">
            <div class="siimple-field-label">Your email</div>
               <input type="email" placeholder="you@email.com" class="siimple-input siimple-input--fluid" >
            </div>
         <div class="siimple-field">
            <div class="siimple-field-label">Your password</div>
            <input type="password" placeholder="password" class="siimple-input siimple-input--fluid" >
               <div class="siimple-field-helper">
                  You password must contain at least 8 characters
              </div>
         </div>
         <div class="siimple-field">
            <div class="siimple-btn siimple-btn--primary siimple-btn--fluid siimple--text-bold">
               Login
           </div>
         </div>
         <div class="siimple-card siimple--mt-5" align="center">
            <div class="siimple-card-body">
               Don't have an account?
               <a class="siimple-link">Create an account</a>.
            </div>
         </div>
      </div>
   </div>
</body></html>

Undernet is a modular, configuration-first front-end framework. No strings.


RESETRUNFULL
<!DOCTYPE html><html><head>
   <link rel="stylesheet" crossorigin="anonymous"
         href="https://cdn.jsdelivr.net/npm/undernet@8.1.0/dist/undernet.min.css"
         integrity="sha256-t10LWO9nOSH/ZebcqTaWStw4Klck34xxlccrhVaomxg=" />
</head><body>
   <br/><br/>
   <span class="tooltip" data-tooltip="tooltip-id">
      <button class="tooltip-trigger" data-target="tooltip-id">Tooltip Button</button>
      <div class="tooltip-box" id="tooltip-id">This is a tooltip.</div>
   </span>
    <script src="https://cdn.jsdelivr.net/npm/undernet@8.1.0/dist/undernet.bundle.min.js"
            integrity="sha256-am6vAHMcM/VM5t7fA2/WTBPL4UbehfbYc4M7aLFe824=" crossorigin="anonymous"></script>
    <script type="text/javascript">
      // Undernet is now  attached to the `window`
      if (document) document.addEventListener("DOMContentLoaded", function() { Undernet.start(); })
    </script>
</body></html>

Bulma is an open source CSS framework based on Flexbox and used by more than 200,000 developers.


RESETRUNFULL
<!DOCTYPE html><html><head>    
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">    
   <title>Hello Bulma!</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">  
</head><body>  
   <section class="section">    
      <div class="container">      
         <h1 class="title"> Hello World </h1>      
         <p class="subtitle"> My first website with <strong>Bulma</strong>! </p>    
      </div>  
   </section>  
</body></html>

jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.To make building highly customized themes easy, they havecreated ThemeRoller for Mobile to make it easy to drag and drop colors and download a custom theme.


RESETRUNFULL
<!DOCTPYE html><html><head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.1/jquery.mobile.min.js" 
           integrity="sha512-wSacGPS/KRyVB67O4xD+Eh1OX4/dq4juZj9DKTokRt81BzLbfsSMtNgR9Pu8FLr4kLbk5oNr9Hq+5PeWLCX8mA==" 
           crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.1/jquery.mobile.min.css" 
         integrity="sha512-o3x4nST+KCWWUxaA1oneL8MOaOz8EEG+r6IUASMYlYd+ehohuxEr6Tv3XxZNkwHZgn3rw4r2D8N868O099HgyQ==" 
         crossorigin="anonymous" referrerpolicy="no-referrer" />           
<head><body>
   <div class="ui-grid-a">
      <div class="ui-block-a">
         <div class="ui-bar ui-bar-a" style="height:60px">
            Block A
         </div>
      </div>
      <div class="ui-block-b">
         <div class="ui-bar ui-bar-a" style="height:60px">
            Block B
         </div>
      </div>
   </div>
</body></html>

Atomizer is a tool for creating Atomic CSS. Generate an Atomic stylesheet dynamically from the Atomic classes you're actually using in your project (no unused styles!), or predeclare styles in configuration - it's up to you.

<div class="D(ib)--sm W(50%)--sm W(25%)--lg P(20px) Bgc(#0280ae.5)">1</div>