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.
Download Mighty Seagull directly from GitHub repository.
Download Mighty SeagullThree 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>
<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>
<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 is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.🍬 😊
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>
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>
<button>Button</button> <a href="#" class="btn">Link</a> <input type="button" value="Input"> <input type="submit" value="Submit"> <button disabled>Disabled</button>
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>
<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>
You can choose from three types of lists ol, ul, dl. 📋 🤗
<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>
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>