Typographyheadingtexthrlistlinkcodeblockquote
Imagesimg-rasterimg-svg
Videosembed
Containersfullscreen-bggrid-simplegrid-page-layout1grid-page-layout2grid-gallerypagetable
Componentslightboxbtn-back-to-topbtn badgelabelpaginationcommentselecthamburgermodalbreadcrumbsicons
Formscontrolgrid-formsform-group
ConfigSCSS Config

About

Biscuit is a UI component/pattern library for developing websites based on BEM methodology and a mobile-first approach.

Biscuit splits up all page elements into reusable BEM-blocks (components) implemented in Sass/JavaScript/Pug. Examples of such blocks are btn, lightbox, heading, grid-gallery, ...

Biscuit Components
heading
Modifiers Values Description
size h1h2h3h4h5h6 Headings sizes

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

text
Regular text
Modifiers Values Description
display inlineblock Display text as an inline element or as a block element i.e. a paragraph

Lorem Ipsum is simply dummy text of the printing and typesetting industry

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
hr
Horizontal line
Modifiers Values Description
color blackwhite Line color

list
Modifiers Values Description
style orderedunordered List style
  • Fruit
    • Bananas
    • Apples
      • Green
      • Red
    • Pears
  • Vegetables
  • Meat
code
Modifiers Values Description
display blockinline Display code as a line or as a block

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum console.log( a ); it was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

window.addEventListener( 'load', () => {
  console.log('Ready');
})}
blockquote
Modifiers Values Description
theme default Color theme

Big type, even huge type, can be beautiful and useful. But poise is usually far more important than size – and poise consists primarily of emptiness. Typographically, poise is made of white&space.

img-raster
Raster image
Modifiers Values Description
theme black Put image into black frame
Ships in the Field
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Ships in the Field
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
img-svg
SVG image. "img-svg" component can be implemented in one of three ways, see details in README.md on github
Modifiers Values Description
bg Use SVG as background-image
Logoipsum logo
Your browser does not support SVG
embed
Embeded content (youtube videos, ...)
Modifiers Values Description
ratio 4x3 Aspect ratio
fullscreen-bg
Fullscreen background
Modifiers Values Description
color blackwhite Background color
img Full screen background image
grid-simple
Simple responsive grid
Ships in the Field

Heading One Billions upon bil lions upon billions

Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?

Visit Website
Ships in the Field

Heading One Billions upon bil lions upon billions

Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?

Visit Website
Ships in the Field

Heading One Billions upon bil lions upon billions

Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?

Visit Website
Ships in the Field

Heading One Billions upon bil lions upon billions

Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?

Visit Website
grid-page-layout1
Grid layout example. Use it as a starting point for building your own page layout, it is not a "ready-to-use" type of component
Header
News. Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?
Weather
Article. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Info
Space R
Space L
grid-page-layout2
Grid layout example. Use it as a starting point for building your own page layout, it is not a "ready-to-use" type of component
One
Two
Three
Four
Five
page
This is a service type of blog that defines styles for the whole page. It is already assigned to the necessary elements (<html> and <body>) in PUG templates, so don't modify or delete any 'page'-related classes. Also, this is the block, through which we import all custom fonts making them available in all SASS files
Modifiers Values Description
bg solidgradientimg (apply to 'page__body' element) Apllies fixed background to the full page height
table
Modifiers Values Description
theme documentationlight Aspect ratio
Table 1.1 Playlist
Date Artist Title Album Label Genres Duration
1971 Gil Scott-Heron Save The Children Pieces Of A Man Flying Dutchman Soul, Funk, Jazz 4:55
1975 Rufus Featuring Chaka Khan Sweet Thing Rufus Featuring Chaka Khan ABC Records Soul, Funk, Disco 3:18
1994 Adam F ‎ Sea Of Destiny Stronger Than Ever Lucky Spin Recordings Jungle, Drum'n'Bass 6:47
2000 Soulsearcher ‎ Can't Get Enough (Vocal Club Mix) Various ‎- Disco Kandi Hed Kandi Garage House, Disco 7:19
btn-back-to-top
Back to top button
btn
Button
Modifiers Values Description
theme blackempty Button color theme
a linka link
badge
Modifiers Values Description
theme blackwhite Badge
NEW!NEW!
label
Modifiers Values Description
theme blackwhite Clickable label
pagination
comment
Comment section
Mike Wolfson
Mike Wolfsonaugust 19, 2019 17:48

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

Mike Wolfson
Mike Wolfsonaugust 19, 2019 17:48

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

Mike Wolfson
Mike Wolfsonaugust 19, 2019 17:48

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

select
Custom select box. Populate the select menu with items from array or JSON file. Selected option cached in localStorage
hamburger
Hamburger menu. Populate the menu with items from plain JavaScript object or JSON file
icons
Social media icons
Modifiers Values Description
size smmdlg Size of icons
color githubfacebookinstagramodnoklassnikitelegramtwitteryoutubevkontakteblackwhite Color of icons
control
Custom controls
Modifiers Values Description
checkbox Custom checkbox
radio Custom radio button
switch Switch
validation Validation
disabled Disabled state
Text text text
Teip text Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?
Teip text Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?
Text text text
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Text text text
Lorem Ipsum is Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
Lorem Ipsum is Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
Lorem Ipsum is Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
grid-forms
Grid-based layout for forms
a
b
c
d
form-group
Form group
Modifiers Values Description
type textareasearch Applies to "form-group__input"
row Applies to "form-group"
disabled Applies to "form-group"
validation errorsuccess Applies to "form-group"
Help text Lorem Ipsum is Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle
Help text Lorem Ipsum is Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle
Help text Lorem Ipsum is Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle
Help text Lorem Ipsum is Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle
Help text Lorem Ipsum is Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle
Help text Lorem Ipsum is Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle
First name: Text text text Help text Lorem Ipsum is Lorem Ipsum is simply dummy text of the printing and typesetting Text text text