Fork me on GitHub
A UI/UX Library of patterns for Mighty Seagull
Github

About

Umbrella-x a UI/UX Library of pure CSS pattern, based on the Mighty Seagull Framework, to build quick your web apps. You can download Mighty-Seagull here and read about how to use it here

Installation

Download Umbrella-X directly from GitHub repository.

Download Umbrella-X

Table of contents

Accordion Tabs

Usefull & beautifull accordion tabs for expanding texts. Back to top

   

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

<div class="accordion">
  <div class="option">
    <input type="checkbox" id="toggle1" class="toggle" />     <label class="title" for="toggle1">Accordion Tab 1
        </label>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
  </div>

  <div class="option">
    <input type="checkbox" id="toggle2" class="toggle" />
    <label class="title" for="toggle2">
          Accordion Tab 2
        </label>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
  </div>

  <div class="option">
    <input type="checkbox" id="toggle3" class="toggle" />
    <label class="title" for="toggle3">
          Accordion Tab 3
        </label>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
    </div>
  </div>
</div>

Alerts

Every Web Site uses some Alerts, here is some nice ones. Back to top

This is a success message.

This is an error message.

This is an notice message.

This is an alert message. 

<div class="success">
  <span>This is a success message.</span>
</div>
<br>
<div class="error">
  <span>This is an error message.</span>
</div>
<br>
<div class="notice">
  <span>This is an notice message.</span>
</div>
<br>
<div class="alert">
  <span>This is an alert message.</span>
</div>

Badges

Nice and smooth set of badges! Back to top

10 10 10 10 10 

<div class="text-center">
  <span class="badge-default">10</span>
  <span class="badge-alert">10</span>
  <span class="badge-error">10</span>
  <span class="badge-notice">10</span>
  <span class="badge-success">10</span>
</div>

Cards

Responsive cards to used as project showcase or whatever you want. Back to top


<ul class="cards">
  <li class="cards-item">
    <div class="card">
      <div class="card-image"><img src="images/retromaniac.png"></div>
      <div class="card-content">
        <h3 class="card-title">Card Grid Layout</h3>
        <p class="card-text">Demo of pixel perfect pure CSS simple responsive card grid layout</p>
        <button class="btn card-btn">Read More</button>
      </div>
    </div>
  </li>
  <li class="cards-item">
    <div class="card">
      <div class="card-image"><img src="images/retromaniac.png"></div>
      <div class="card-content">
        <h3 class="card-title">Card Grid Layout</h3>
        <p class="card-text">Demo of pixel perfect pure CSS simple responsive card grid layout</p>
        <button class="btn card-btn">Read More</button>
      </div>
    </div>
  </li>
  <li class="cards-item">
    <div class="card">
      <div class="card-image"><img src="images/retromaniac.png"></div>
      <div class="card-content">
        <h3 class="card-title">Card Grid Layout</h3>
        <p class="card-text">Demo of pixel perfect pure CSS simple responsive card grid layout</p>
        <button class="btn card-btn">Read More</button>
      </div>
    </div>
  </li>
</ul>

Comments

Nice presentation of comments. Back to top

Retromaniac

WOW!! What a great UI/UX Library 🎉 🎉 🎉

Commented 13 Minutes ago


<div class="comment">
  <div class="comment-image">
    <img src="images/retromaniac.png">
  </div>
  <div class="comment-content">
    <h1>Retromaniac</h1>
    <p>WOW!! What a great UI/UX Library</p>
    <p class="comment-detail">Commented 13 Minutes ago</p>
  </div>
</div>

Expander

Pure CSS expander section. Back to top

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio mollitia fugiat facilis enim accusamus quisquam aut, repellendus incidunt quod optio facere labore illo numquam ipsum beatae vero debitis, fugit excepturi.


<div class="expander">
  <input class="toggle" id="expander-expandable-0" type="checkbox" />
  <label class="expander-header expander-toggle" for="expander-expandable-0"><span>Expandable Section</span></label>
  <div class="expander-content">
    <div class="expander-content-inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio mollitia fugiat facilis enim accusamus quisquam aut, repellendus incidunt quod optio facere labore illo numquam ipsum beatae vero debitis, fugit excepturi.</p>
    </div>
  </div>
</div>

Footers

Because the bottom of your page matters. Back to top

Footer 1


<footer class="footer">
  <div class="footer-logo">
    <img src="images/retromaniac.png" alt="Logo image">
  </div>
  <div class="footer-links">
    <ul>
      <li>
        <h3>Content</h3></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Products</a></li>
    </ul>
    <ul>
      <li>
        <h3>Follow Us</h3></li>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">YouTube</a></li>
    </ul>
    <ul>
      <li>
        <h3>Legal</h3></li>
      <li><a href="#">Terms and Conditions</a></li>
      <li><a href="#">Privacy Policy</a></li>
    </ul>
  </div>
  <hr>
  <p>Copyright &copy; Section.</p>
</footer>

Footer 2


<footer class="footer-distributed">
  <div class="footer-left">
    <img src="images/retromaniac.png" alt="Logo image">
    <h3>Retromaniacs</h3>
    <p class="footer-links">
      <a href="#">Home</a> -
      <a href="#">About</a> -
      <a href="#">Contact</a> -
      <a href="#">Products</a>
    </p>
    <p class="footer-company-name">Copyright &copy; Section.</p>
  </div>
  <div class="footer-center">
    <div>
      <i class="fa fa-map-marker"></i>
      <p><span>21 Jump Street</span> Metropolitan City</p>
    </div>
    <div>
      <i class="fa fa-phone"></i>
      <p>+5 555 555555</p>
    </div>
    <div>
      <i class="fa fa-envelope"></i>
      <p><a href="mailto:support@company.com">mail@example.com</a></p>
    </div>
  </div>
  <div class="footer-right">
    <p class="footer-company-about">
      <span>Small Description</span> This is a small description or a subtitle about the site owner.
    </p>
    <div class="footer-icons">
      <a href="#"><i class="fab fa-facebook-f"></i></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-dribbble"></i></a>
      <a href="#"><i class="fab fa-github"></i></a>
    </div>
  </div>
</footer>

Footer 3


<footer class="footer-small">
  <div class="footer-small-logo">
    <img src="images/retromaniac.png" alt="Logo image">
    <h3>Retromaniacs</h3>
  </div>
  <p class="footer-small-links">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
    <a href="#">Products</a>
  </p>
  <div class="footer-small-icons">
    <a href="#"><i class="fab fa-facebook-f"></i></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-dribbble"></i></a>
    <a href="#"><i class="fab fa-github"></i></a>
  </div>
  <hr>
  <p>Copyright &copy; Section.</p>
</footer>

Hero

Nice hero's for your page. Back to top

Simple Hero

This is simple Hero.


<div class="hero">
  <div class="hero-content">
    <img src="images/retromaniac.png" alt="Image" class="hero-logo">
    <p>This is simple Hero.</p>
  </div>
</div>

100% view heigth (vh) Hero

Retromaniacs

This is Hero Title
Button 

<header class="hero-ux">
  <img src="images/retromaniac.png">
  <h1><strong>Retromaniacs</strong></h1>
  <h5 style="text-align: center;">This is Hero Title</h5>
  <div>
    <a href="#" class="btn">Button</a>
  </div>
</header>

Modal

Click to trigger modal. Modal can used to login forms. Back to top

Modal Title

This the content of the modal!


<label for="modal"><button>Modal Trigger</button></label>
<input class="modal-state" id="modal" type="checkbox" />
<div class="modal">
  <label class="modal__bg" for="modal"></label>
  <div class="modal__inner">
    <label class="modal__close" for="modal"></label>
    <h2>Modal Title</h2>
    <p>This the content of the modal!</p>
  </div>
</div>

Paginations

Pagination for multiple pages. Back to top

Clean:



<div class="pagination-clean">
  <ul>
    <li class="page-prev-clean"><a href="#">Prev</a></li>
    <li>
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
      </ul>
    </li>
    <li class="page-next-clean"><a href="#">Next</a></li>
  </ul>
</div>

Simple:



<div class="pagination">
  <ul>
    <li class="page-prev"><a href="#">Prev</a></li>
    <li>
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
      </ul>
    </li>
    <li class="page-next"><a href="#">Next</a></li>
  </ul>
</div>

Rounded:



<div class="pagination-rnd">
  <ul>
    <li class="page-prev-rnd"><a href="#">Prev</a></li>
    <li>
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
      </ul>
    </li>
    <li class="page-next-rnd"><a href="#">Next</a></li>
  </ul>
</div>

Popover

A cool popover. Back to top

Show me

A unique code to identify your store.


<div class="wraps">
  <label class="popover-label" for="mark">Click</label>
  <input type="checkbox" id="mark">
  <div class="popover-div">
    <p class="pop-title">Show me</p>
    <p class="body">A unique code to identify your store.</p>
  </div>
</div>

Tooltip

Beautifull Tooltip. Back to top

Hover over me This is some Text! 

<div class="tooltip">Hover over me
  <span class="tooltiptext">This is some Text!</span>
</div>

Type Systems

Type systems to show posts & other staff. Back to top

Article Tag

Article Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam code block dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!

24 Nov 2017

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Read More ›

Subheading lorem

Consequatur ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.

Author Name


<article class="type-system-rounded clearfix">
  <p class="type">Article Tag</p>
  <img src="images/banner.png">
  <h1>Article Title</h1>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam <code>code block</code> dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!</h2>
  <p class="date">24 Nov 2017</p>
  <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias
    iure impedit.
    <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
  </p>
  <h3>Subheading lorem</h3>
  <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque
    vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
  <hr>
  <p class="author">Author Name</p>
</article>