Biscuit Framework 💛

BETA v0.2

The biscuit Library is on its way to becoming the next generation Css library, the biscuit that came out of the new beta and with its eye-catching changes, has the ability to meet the needs of the basic website. The version may be unstable because it is in beta. You will be able to find more than you want in this library, which we will see by introducing innovations. I'm sorry for my bad English.
To follow the developer: Instagram Twitter Github


The grid

The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.

One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six
Seven
Five
Eight
Four
Nine
Three
Ten
Two
Eleven
One
<!-- .container is main centered wrapper -->
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
<!-- just use a number and class 'column' or 'columns' -->
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
<!-- there are a few shorthand columns widths as well -->
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>
</div>
<!-- Note: columns can be nested, but it's not recommended since
Biscuit's grid has %-based gutters, meaning a nested grid results in variable with gutters
(which can end up being *really* small on certain browser/device sizes) -->

Buttons



<button>Button element</button>
<button class="button-primary">Button element</button>
<br />
<button class="button-success">Button SUCCESS</button>
<button class="button-warning">Button Warning</button>
<button class="button-danger">Button Danger</button>
<button class="button-info">Button info</button>
<br />
<button class="button-facebook">
<i class="fab fa-facebook-f"></i>
Facebook </button>
<button class="button-twitter">
<i class="fab fa-twitter"></i>
Twitter </button>
<button class="button-instagram">
<i class="fab fa-instagram"></i>
instagram </button>
<button class="button-github">
<i class="fab fa-github"></i>
github </button>
<button class="button-gitlab">
<i class="fab fa-gitlab"></i>
gitlab </button>

Informational Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

For Radius

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

Modern

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

Modern for Radius

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

<h4>Informational Message</h4>
<p class="biscuit">
<i class="fas fa-cookie-bite">
</i> Lorem ipsum dolor sit amet,
consectetur
adipiscing elit.
Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl. </p>
<p class="accept ">
<i class="fas fa-check-circle">
</i> Lorem ipsum dolor sit amet,
consectetur
adipiscing elit.
Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.
</p>
<p class="warning ">
<i class="fas fa-exclamation-circle">
</i> Lorem ipsum dolor sit amet,
consectetur adipiscing
elit.
Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.
</p>
<p class="info ">
<i class="fas fa-info-circle">
</i> Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.
</p>
<h4>For Radius</h4>
<p class="biscuit br-3px">
<i class="fas fa-cookie-bite">
</i> Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl. </p>
<p class="accept br-3px">
<i class="fas fa-check-circle">
</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.
</p>
<p class="warning br-3px">
<i class="fas fa-exclamation-circle">
</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.
</p>
<p class="info br-3px">
<i class="fas fa-info-circle">
</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.
</p>
<h4>Modern</h4>
<p class="biscuitx">
<i class="fas fa-cookie-bite">
</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.
</p>
<p class="acceptx">
<i class="fas fa-check-circle">
</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.
</p>
<p class="warningx"><i class="fas fa-exclamation-circle">
</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.
</p>
<p class="infox mdrn-br-3px">
<i class="fas fa-info-circle">
</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.
</p>
<h4>Modern for Radius</h4>
<p class="biscuitx mdrn-br-3px">
<i class="fas fa-cookie-bite">
</
<i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.
</p>
<p class="acceptx mdrn-br-3px">
<i class="fas fa-check-circle">
</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.
</p> <p class="warningx mdrn-br-3px">
<i class="fas fa-exclamation-circle">
</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.</p>
<p class="infox mdrn-br-3px">
<i class="fas fa-info-circle">
</<i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis tempor suscipit dolor, id convallis arcu varius in. Vestibulum at augue nisl.

Form Application

<form>
<div class="row">
<div class="six columns">
<label for="exampleEmailInput">Your email</label>
<input class="u-full-width" type="email" placeholder="test@mail.com"
id="exampleEmailInput" />
</div>
<div class="six columns">
<label for="exampleRecipientInput">Reason for contacting</label>
<select class="u-full-width" id="exampleRecipientInput">
<option value="Option 1">Questions</option>
<option value="Option 2">Admiration</option>
<option value="Option 3">Can I get your number?</option>
</select>
</div>
</div>
<label for="exampleMessage">Message</label>
<textarea class="u-full-width" placeholder="Hi Serhat 😍" id="exampleMessage</textarea>
<label class="example-send-yourself-copy">
<input type="checkbox" / >
<span class="label-body">Send a copy to yourself</span>
</label>
<input class="button-primary" type="submit" value="Submit" />
</form>

Code Style

.some-class { background-color: red; }

<div="biscode">
.some-class {
background-color: red;
<div>

Table

Name Age Sex Location
Serhat Pars 20 Male Istanbul
Dwayne Johnson 42 Male Hayward
<table class="u-full-width">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Serhat Pars</td>
<td>20</td>
<td>Male</td>
<td>Istanbul</td>
</tr>
<tr>
<td>Dwayne Johnson</td>
<td>42</td>
<td>Male</td>
<td>Hayward</td>
</tr>
</tbody>
</table>

Media queries

Biscuit uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. The queries are mobile-first, meaning they target min-width. Mobile-first queries are how Biscuit's grid is built and is the preferrable method of organizing CSS. It means all styles outside of a query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. The sizes for the queries are:

  • Desktop HD: 1200px
  • Desktop: 1000px
  • Tablet: 750px
  • Phablet: 550px
  • Mobile: 400px
/* Mobile first queries */
/* Larger than mobile */
@media (min-width: 400px) {}
/* Larger than phablet */
@media (min-width: 550px) {}
/* Larger than tablet */
@media (min-width: 750px) {}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than Desktop HD */
@media (min-width: 1200px) {}

Utilities

Biscuit has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.

/* Utility Classes */
/* Make element full width */
.u-full-width {
width: 100%;
box-sizing: border-box; }
/* Make sure elements don't run outside containers (great for images in columns) */
.u-max-full-width {
max-width: 100%;
box-sizing: border-box; }
/* Float either direction */
.u-pull-right {
float: right; }
.u-pull-left {
float: left; }
/* Clear a float */
.u-cf {
content: "";
display: table;
clear: both; }

Lists

  • Unordered lists have basic styles
  • They use the circle list style
    • Nested lists styled to feel right
    • Can nest either type of list into the other
  • Just more list items mama san
  1. Ordered lists also have basic styles
  2. They use the decimal list style
    • Ordered and unordered can be nested
    • Can nest either type of list into the other
  3. Last list item just for the fun
<ul>
<li>Item 1</li>
<li>
Item 2
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<!-- Easily substitute any <ul> or an <ol> to get number lists or sublists.
Biscuit doesn't support lists nested deeper than 2 levels -->