A Rockin'Cascading Style Sheets Framework.

Github

About

Mighty Seagull as the title says is A Rockin'Cascading style sheets Framework with both flex grid and classic 12 grid system. Cover most of designing cases as a full responsive framework but remains lightweight and minimal with just covering the basics. Target is to be the tool for every new project you start.

Installation

Download Mighty Seagull directly from GitHub repository.

Download Mighty Seagull

Containers

Three container sizes for full responsive apps & sites. 🏁 😎

<div class="container">Large(1200px)</div>
<div class="container medium">Medium(1000px)</div>
<div class="container small">Small(800px)</div>

Flex-grid

.col

<div class="row">
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Classic 12-Grid

one

eleven

two

ten

three

nine

four

eight

five

seven

six

five

seven

four

eight

three

nine

two

ten

one

eleven

<div class="twelve columns">
  <div class="one column">one</div>
  <div class="eleven columns">eleven</div>
</div>
<div class="twelve columns">
  <div class="two columns">two</div>
  <div class="ten columns">ten</div>
</div>
<div class="twelve columns">
  <div class="three columns">three</div>
  <div class="nine columns">nine</div>
</div>
<div class="twelve columns">
  <div class="four columns">four</div>
  <div class="eight columns">eight</div>
</div>
<div class="twelve columns">
  <div class="five columns">five</div>
  <div class="seven columns">seven</div>
</div>
<div class="twelve columns">
  <div class="six columns">six</div>
  <div class="six columns">six</div>
</div>
<div class="twelve columns">
  <div class="five columns">five</div>
  <div class="seven columns">seven</div>
</div>
<div class="twelve columns">
  <div class="four columns">four</div>
  <div class="eight columns">eight</div>
</div>
<div class="twelve columns">
  <div class="three columns">three</div>
  <div class="nine columns">nine</div>
</div>
<div class="twelve columns">
  <div class="two columns">two</div>
  <div class="ten columns">ten</div>
</div>
<div class="twelve columns">
  <div class="one column">one</div>
  <div class="eleven columns">eleven</div>
</div>

Typography

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.🍬 😊

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Anchor Emphasis Small Strong Underline

Paraghaph

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<a href="#">Anchor</a>
<em>Emphasis</em>
<small>Small</small>
<strong>Strong</strong>
<u>Underline</u>
<p>Paraghaph</p>

Blockquotes

Blockquote for quotes of great people. 📜 👏

It's not a faith in technology. It's faith in people.
- Steve Jobs

<blockquote>
  <p>It's not a faith in technology. It's faith in people.</p>
  <cite>- Steve Jobs</cite>
</blockquote>

Buttons

Link

<button>Button</button>
<a href="#" class="btn">Link</a>
<input type="button" value="Input">
<input type="submit" value="Submit">
<button disabled>Disabled</button>

Code

In this section you can put code blocks you want to represent to look like this.🤓 🤓

class HelloWorld {
  greet() {
    console.log('Hello World!');
  }
}

You can also use an online editor for syntax highlighting like tohtml to look like this.

<pre><code>
class HelloWorld {
  greet() {
    console.log('Hello World!');
  }
}
</code></pre>

Forms

<form>
  <h3>Login Form</h3>
   <div>
     <label>Email address</label>
      <input type="email" placeholder="Enter email">
      <small>We'll never share your email.</small>
    </div>
    <div>
      <label>Password</label>
      <input type="password" placeholder="Password">
    </div>
    <div>
      <label for="country">Country</label>
      <select id="country">
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Canada">Canada</option>
        <option value="France">France</option>
        <option value="Other">Other</option>
      </select>
    </div>
    <div>
      <input type="checkbox">
      <small>Remember me</small>
    </div>
    <button type="submit" class="button">Submit</button>
</form>

Lists

You can choose from three types of lists ol, ul, dl. 📋 🤗

Unorder List
- Nested item
Two
Three

Order List
- Nested item
Two
Three

Description list item 1: Description list item 1.1

<ul>
  <li>Unorder List
    <ul>
      <li>Nested item</li>
    </ul>
  </li>
  <li>Two</li>
  <li>Three</li>
</ul>
<ol>
  <li>Order List
    <ul>
      <li>Nested item</li>
    </ul>
  </li>
  <li>Two</li>
  <li>Three</li>
</ol>
<dl>
  <dt>Description list item 1</dt>
  <dd>Description list item 1.1</dd>
</dl>

Tables

No.	Product	Quantity	Price	Total Price
1	Smartphone	2	$ 180.00	$ 360.00
2	TV	1	$ 990.00	$ 990.00
3	Laptop	4	$ 600.00	$ 2,400.00
4	USB Charger	4	$ 12.00	$ 48.00

<table>
  <thead>
    <tr>
      <th>No.</th>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Smartphone</td>
      <td>2</td>
      <td>$ 180.00</td>
      <td>$ 360.00</td>
    </tr>
    <tr>
      <th>2</th>
        <td>TV</td>
        <td>1</td>
        <td>$ 990.00</td>
        <td>$ 990.00</td>
    </tr>
    <tr>
      <th>3</th>
        <td>Laptop</td>
        <td>4</td>
        <td>$ 600.00</td>
        <td>$ 2,400.00</td>
    </tr>
    <tr>
      <th>4</th>
        <td>USB Charger</td>
        <td>4</td>
        <td>$ 12.00</td>
        <td>$ 48.00</td>
    </tr>
  </tbody>
</table>