NewBancomail Pattern libraryor something like this

Ok. Maybe this is a Pattern Library, but fundamentally this is a great package we developed for the new company website styles.

We decided to share it because maybe it's useful for any new project, because we love your feedback and also to grow togheter

We started to develope it, just based on our website needs so, feel free to use, change and add any new feature you need inside.
One important thing is that we do not support if there is a bug or something like this. We hope you contribute, maybe make a pull request and so on. We still updating the library based on our website upgrades also.

How to use it? Just download the .css file and start reading below.

Fork on Github

Grids

.grid12

.grid6

.grid6

.grid4

.grid4

.grid4

.grid3

.grid3

.grid3

.grid3

.grid2

.grid2

.grid2

.grid2

.grid2

.grid2

.grid1

.grid1

.grid1

.grid1

.grid1

.grid1

.grid1

.grid1

.grid1

.grid1

.grid1

.grid1

.grid7

.grid5

.grid2

.grid6 .offset4

.grid2 .offset2

.grid3 .offset1

.grid3

.grid2 .offset4

.grid2

<div class="fluid">
	<div class="grid12">
	</div>
</div>

<div class="fluid">
	<div class="grid6">
	</div>
	<div class="grid6">
	</div>
</div>

<div class="fluid">
	<div class="grid2 offset2">
	</div>
	<div class="grid3 offset1">
	</div>
	<div class="grid3">
	</div>
</div>

Paragraphs

Paragraph normal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum aspernatur quidem, maiores, ducimus atque odit explicabo expedita dolorum dignissimos illum beatae mollitia recusandae, repellendus id perspiciatis ut, tempora in aperiam.


<p>Lorem ipsum dolor sit amet...</p>

Paragraph small

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum aspernatur quidem, maiores, ducimus atque odit explicabo expedita dolorum dignissimos illum beatae mollitia recusandae, repellendus id perspiciatis ut, tempora in aperiam.


<p class="small">Lorem ipsum dolor...</p>

Paragraph read

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum aspernatur quidem, maiores, ducimus atque odit explicabo expedita dolorum dignissimos illum beatae mollitia recusandae, repellendus id perspiciatis ut, tempora in aperiam.


<div class="read">
	<p>
		Lorem ipsum dolor...
	</p>
</div>

More text stuff

Lorem strong ipsum dolor sit amet, consectetur adipisicing elit. Earum aspernatur quidem, maiores, ducimus atque odit explicabo expedita dolorum dignissimos illum beatae mollitia recusandae, repellendus id perspiciatis ut, tempora in aperiam.

Lorem ipsum dolor sit amet, consectetur adipisicing eliq. Repellat minima quibusdam molestias cum laborum quis praesentium iusto quidem incidunt earqm.


<p>
	Lorem 
	<strong>strong ipsum</strong> dolor sit amet, 
	<span class="text-red">consectetur</span> adipisicing elit. Earum aspernatur quidem, maiores, 
	<strong class="text-green">ducimus atque</strong> odit explicabo 
	<span class="underlined">expedita</span> dolorum 
	<span class="underlined">dignissimos</span> illum beatae mollitia recusandae, repellendus id perspiciatis ut, tempora in aperiam.
</p>
<div class="read">
	<p>
		Lorem ipsum dolor sit amet, 
		<span class="underlined">consectetur adipisicing eliq</span>. Repellat minima quibusdam molestias cum 
		<strong class="italic text-blue">laborum</strong> quis praesentium 
		<small>iusto</small> quidem incidunt <a href="">earum</span>.
	</p>
</div>

Headings

Heading h1span


<h1>Heading h1<span>span</span></h1>

Heading h2span subtitle

<h2>Heading h2<span>span subtitle</span></h2>

Heading h3span subtitle

<h3>Heading h3<span>span subtitle</span></h3>

Heading h4span subtitle

<h4>Heading h4<span>span subtitle</span></h4>

Buttons

Sizes buttons .btn-size

<button class="btn">Button</button>
<button class="btn btn-small">Small button</button>
<button class="btn btn-xsmall">XSmall button</button>
<button class="btn btn-small full">Full button</button>

Color buttons .btn-color

<button class="btn btn-small btn-blue">Blue button</button>
<button class="btn btn-small btn-orange">Orange button</button>
<button class="btn btn-small btn-green">Green button</button>
<button class="btn btn-small btn-skyblue">Skyblue button</button>
<button class="btn btn-small btn-yellow">Yellow button</button>
<button class="btn btn-small btn-red">Red button</button>
<button class="btn btn-small btn-nblue">N blue button</button>
<button class="btn btn-small btn-dark-grey">Dark grey button</button>
<button class="btn btn-small btn-light-grey">Light grey button</button>
<button class="btn btn-small btn-middle-grey">Middle grey button</button>
<button class="btn btn-small btn-xtralight">XtraLight button</button>

Icon circle buttons .btn-icon-circle.color

    
<button class="btn-icon-circle"><i class="icon-ok"></i></button>
<button class="btn-icon-circle blue"><i class="icon-shopping-cart"></i></button>
<button class="btn-icon-circle orange"><i class="icon-youtube-play"></i></button>
<button class="btn-icon-circle green"><i class="icon-gittip"></i></button>
<button class="btn-icon-circle skyblue"><i class="icon-linux"></i></button>
<button class="btn-icon-circle red"><i class="icon-apple"></i></button>
<button class="btn-icon-circle long-shadow skyblue"><i class="icon-comment"></i></button>

Share buttons .btn-share

Share

Share 
<div class="btn btn-light-grey btn-share"> 
Condividi 
	<div class="xtra-content">
		<button class="btn btn-small btn-blue"><i class="icon-facebook-sign"></i></button>
		<button class="btn btn-small btn-skyblue"><i class="icon-twitter"></i></button>
		<button class="btn btn-small btn-red"><i class="icon-pinterest"></i></button>
		<buttton class="btn btn-small btn-nblue"><i class="icon-linkedin-sign"></i></button>
	</div>
</div>

Download buttons .btn-download

View SVG Icons for a full list of SVGs

<button class="btn btn-small btn-xtralight full text-left btn-download">
	<i class="svg svg-ebook-success svg-xxsmall f-left"></i>
	<span class="btn-svg-text"><strong>Download button</strong> <br>also see :hover behavior</span>
</button>

<button class="btn btn-small btn-light text-left btn-download">
	<i class="svg svg-nope svg-xxsmall f-left"></i>
</button>

Social buttons .social

<div class="social twitter">
	<a href=""><i class="icon-twitter"></i> @Bancomail</a>
</div>

Forms

Simple form .form

<form class="form">
	<input type="text" placeholder="Input text">
	<input type="text" disabled placeholder="Disabled input">
	<div class="cont">
		<input type="text" placeholder="Input with button">
		<a class="btn-input text-red"><i class="icon-question-sign"></i></a>
	</div>
	<textarea placeholder="Simple textarea"></textarea>
	<input type="file" id="file1">
	<label for="file1" class="uploader">Upload file</label>
	<div class="custom-select">
		<select name="select";>
			<option>Select</option>
			<option>Option 1</option>
			<option>Option 2</option>
		</select>
	</div>
</form>

Checkboxes & Radios .custom-radio || .custom-checkbox

       
       
    
<!-- /radio transp-->
<input type="radio" name="r" id="radio1" class="custom-radio">
<label for="radio1" class="transp">Radio transp 1</label>
<!-- /radio color-->
<input type="radio" name="r2" id="radio21" class="custom-radio" checked>
<label for="radio21" class="blue">Radio blue</label>
<!-- /checkboxes transp-->
<input type="checkbox" id="cb" class="custom-checkbox ">
<label for="cb" class="transp">Checkbox squared</label>
<input type="checkbox" id="cb2" class="custom-checkbox check">
<label for="cb2" class="transp">Checkbox check</label>
<!-- /checkboxes color-->
<input type="checkbox" id="cb21" class="custom-checkbox" checked>
<label for="cb21" class="blue">Blue checkbox</label>

Labeled form .labeled-form

Note: add <label class="light"> or <label class="dark"> to solve the triangle on different backgrounds

<form class="form labeled-form">
	<div class="cont">
		<input type="text" name="lf1" placeholder="Labeled input text">
		<label for="lf1">Input label</label>
	</div>
</form>

Labeled form .labeled-form.labeled-right

<form class="form labeled-form labeled-right">
	<div class="cont">
		<input type="text" name="lf1" placeholder="Labeled input text" class="">
		<label for="lf1">Input label</label>
	</div>
</form>

Form status .form-status

Success response

Error response

Pending response

<div class="form-status success">
	<div class="status-messages">
		<p class="txt-status txt-success">Success response</p>
	</div>
</div>
<div class="form-status error">
	<div class="status-messages">
		<p class="txt-status txt-error">Error response</p>
	</div>
</div>
<div class="form-status pending">
	<div class="status-messages">
		<p class="txt-status txt-pending">Pending response</p>
	</div>
</div>
<div class="form-status loading">
	<div class="loader">
</div>

Form BIG .form-big

    
<form class="form form-big">
	<input type="text" placeholder="Input BIG">
	<textarea placeholder="Textarea BIG"></textarea>



	<!-- 

		
		// Any form stuff 


	-->



</form>

Input errors .input-error

Custom error description
Another error description
<input type="text" class="input-error">
<input type="text" class="input-WARNING">

<!-- Error descriptions -->
<div class="cont">
	<input type="text" class="input-error">
	<div class="error-desc">Custom error description</div>
</div>

<div class="cont">
	<input type="text" class="input-error">
	<div class="error-desc-dib">Another error description</div>
</div>

Posts stuff

Quotes .quotes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum nulla fugiat eos voluptate minima nostrum veniam non magnam, nobis possimus!

Lorem Ipsum (25:2014) 
<div class="quotes">
	<div class="quote">
		<p>Lorem ipsum dolor sit amet.</p>
		<i>Firma</i>
	</div>
</div>

Mention .mention

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur explicabo facere iste non! Omnis ea blanditiis repellat placeat aspernatur, ratione debitis recusandae quos veniam optio, culpa error porro vel, atque.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta tenetur, architecto fuga unde aut deleniti ullam odio, laudantium corporis exercitationem impedit. Nemo distinctio necessitatibus nobis assumenda, corporis consequatur ab nam. 

<p>
	Lorem ipsum dolor sit amet...
</p>
<div class="mention f-right">
	<p>The mention</p>
</div>

<p>
	Lorem ipsum dolor sit amet...
</p>
<div class="mention f-left">
	<p>The mention</p>
</div>

Post .post

Post Title

X maggio 2014 – ore xx.xx  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero velit autem, amet impedit unde perspiciatis voluptatum exercitationem illo consequatur quisquam dolores perferendis totam libero, explicabo commodi voluptatibus! In, quisquam necessitatibus... Continua a leggere »

Nome Autore
Publicato in data

Post Title Lorem ipsum dolor sit amet, consectetur adipisicing.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. 
<div class="post">
	<div class="post-image">
		<img src="http://" width="70" height="55">
	</div>
	<div class="post-content">
		<h5 class="post-title">Post Title</h5>
		<p class="small post-resume">Data – ora &Lorem ipsum dolor sit amet... <a href="" class="more">Continua a leggere »</a></p>
		<p class="post-meta small">Nome Autore<br>Publicato in data</p>
	</div>
</div>

<div class="post">
	<div class="post-image">
		<img src="http://" width="70" height="55">
	</div>
	<div class="post-content">
		<h5 class="post-title">Post Title only</h5>
	</div>
</div>

<div class="more-posts">
	<div class="small-post">
		<a href="">Lorem ipsum dolor sit amet.</a>
	</div>
	<div class="small-post">
		<a href="">Lorem ipsum dolor sit amet.</a>
	</div>
</div>

Tables

Default table .table

Code Dove Cosa
37978 Francia Agenzie immobiliari
37979 Italia Latte di mucca 
<table class="table">
	<thead>
		<!-- /headings content -->
	</thead>
	<tbody>
		<!-- /rows content -->
	</tbody>
</table>

Table light.table-light

Code Dove Cosa
37978 Francia Agenzie immobiliari
37979 Italia Latte di mucca 
<table class="table">
	<thead>
		<!-- /headings content -->
	</thead>
	<tbody>
		<!-- /rows content -->
	</tbody>
</table>

Cancelled row .cancelled

Code Dove Cosa
37978 Francia Agenzie immobiliari
Code Dove Cosa
37978 Francia Agenzie immobiliari 
<table class="table">
	<thead>
		<!-- /headings content -->
	</thead>
	<tbody>
		<tr class="cancelled">
			<!-- /row content -->
		</tr>
	</tbody>
</table>

Disabled row .disabled

Code Dove Cosa
37978 Francia Agenzie immobiliari
Code Dove Cosa
37978 Francia Agenzie immobiliari 
<table class="table">
	<thead>
		<!-- /headings content -->
	</thead>
	<tbody>
		<tr class="disabled">
			<!-- /row content -->
		</tr>
	</tbody>
</table>

Media elems

List .list

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ab numquam repellat fuga veritatis.

1
.list.blue

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ab numquam repellat fuga veritatis.

2
.list.orange

Lorem ipsum dolor sit amet, voluptatem est nesciunt possimus voluptas aliquam vero temporibus natus consequuntur nemo.

.list.green .list-thumb.long-shadow

Lorem ipsum dolor sit amet, voluptatem est nesciunt possimus natus consequuntur nemo.

<div class="list">
	<div class="list-thumb"><i class="icon-home"></i></div>
	<div class="list-body">
		<p>Lorem ipsum dolor sit amet...</p>
	</div>
</div>

<div class="list blue">
	<div class="list-thumb"><strong>1</strong></div>
	<div class="list-body">
		<p>Lorem ipsum dolor sit amet...</p>
	</div>
</div>

<div class="list orange">
	<div class="list-thumb"><strong>2</strong></div>
	<div class="list-body">
		<p>Lorem ipsum dolor sit amet...</p>
	</div>
</div>

<div class="list green">
	<div class="list-thumb long-shadow"><i class="icon-github"></i></div>
	<div class="list-body">
		<p>Lorem ipsum dolor sit amet...</p>
	</div>
</div>

Ul .ul

  • 1

    ul item 1

  • 2

    ul item 2

  • 1

    Blue item 1

  • 2

    Blue item 2

  • 1

    Green item 1

  • 2

    Green item 2

  • 1

    ul item 1 (orange)

  • 2

    ul item 2 (blue)

  • 3

    ul item 1 (green)

<ul class="ul">
	<li>
		<div class="ul-thumb">
			<strong>1</strong>
		</div>
		<div class="ul-body">
			<p>ul item 1</p>
		</div>
	</li>
	<!-- /more li-->
</ul>

<ul class="ul blue">
	<li>
		<div class="ul-thumb">
			<strong>1</strong>
		</div>
		<div class="ul-body">
			<p>blue item 1</p>
		</div>
	</li>
	<!-- /more li-->
</ul>

Photo slider

Lorem ipsum dolor.


Lorem ipsum dolor sit amet.

Lorem ipsum dolor.


Lorem ipsum dolor sit amet.

Lorem ipsum dolor.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, ad!

Lorem ipsum


Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet.

<!--
			The class 'photo-slider-demo' is created through @mixin photo-slider.
			By default you could use class="photo-slider"
			But if you have more than one slider in your project you could declare one specific
-->

<div class="photo-slider-demo">
	<div class="photo-slide">
		<figure class="slide-image" id="slide-demo-1"></figure>
		<div class="slide-text slide-text-left">
			<h1 class="stext yellow">Lorem ipsum dolor.</h1><br>
			<h3 class="stext middle-grey">Lorem ipsum dolor sit amet.</h3>
		</div>
	</div>
	<div class="photo-slide">
		<figure class="slide-image" id="slide-demo-2"></figure>
		<div class="slide-text slide-text-right">
			<h1 class="stext red">Lorem ipsum dolor.</h1><br>
			<h4 class="stext light-grey">Lorem ipsum dolor sit <a href="#" onclick="return false;">amet</a>.</h4> 
		</div>
	</div>
	<div class="photo-slide">
		<figure class="slide-image" id="slide-demo-3"></figure>
		<div class="slide-text slide-text-left">
			<h1 class="stext light-grey">Lorem ipsum dolor.</h1><br>
			<p class="stext amethyst">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, ad!</hp> 
		</div>
	</div>
	<div class="photo-slide">
		<figure class="slide-image" id="slide-demo-4"></figure>
		<div class="slide-text slide-text-right">
			<h3 class="stext">Lorem ipsum </h3><br>
			<p class="stext">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br> Lorem ipsum dolor sit amet.</p> 
			<button class="btn btn-green f-right stext transparent">Login</button>
		</div>
		</div>
</div> <!-- /photo-slider-demo -->

Miscelaneous

Simple Accordion .accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet dolores aliquid quam unde sequi omnis ut dignissimos quidem magni? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, nam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet dolores aliquid quam unde sequi omnis ut dignissimos quidem magni? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, perferendis, sequi. Amet perferendis unde dolor nemo enim consequatur cupiditate eum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet dolores aliquid quam unde sequi omnis ut dignissimos quidem magni? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore accusamus perspiciatis excepturi totam autem. Consectetur totam, sint, provident dolores laudantium, at nesciunt, a laborum asperiores consequuntur doloribus voluptatum ad odio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti sint totam tempora dolores blanditiis maiores sit, non dignissimos beatae mollitia. 

<div class="accordion">
	<div>
		<input class="step-chk" id="ac-1" type="checkbox" checked>
		<label for="ac-1" class="accordion-title">Accordion Tab 1</label>
		<div class="ac-content ac-small">
			<p class="tab-title">Accordion content here</p>
		</div>
	</div>
	<div>
		<input class="step-chk" id="ac-2" type="checkbox" checked>
		<label for="ac-2" class="accordion-title">Accordion Tab 2</label>
		<div class="ac-content ac-small">
			<p class="tab-title">Accordion content here</p>
		</div>
	</div>
</div>

Breadcrumb .breadcrumb

<ul class="breadcrumb">
	<li><a href="">Home</a></li>
	<li><a href="">Risorse</a></li>
	<li>Guide</li>
</ul>

FAQ .faq-question .faq-answer

Lorem ipsum dolor sit amet?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae, minus voluptas hic atque, ad voluptates temporibus laboriosam doloremque architecto error suscipit odio? Alias, architecto.

<div class="fluid">
	<div class="grid6">
		<div class="faq-question">
			<p>Lorem ipsum?</p>
		</div>
	</div>
	<div class="grid6">
		<div class="faq-answer">
			<input type="checkbox" id="vm-1" name="vm-1">
			<label for="vm-1"></label>
			<div class="faq-answer-cont">
				<p>Lorem ipsum dolor sit amet...</p>
			</div> <!-- /faq-answer-cont -->
		</div> <!-- /faq-answer -->
	</div> <!-- /grid -->
</div> <!-- /fluid -->

Badge .badge

<button class="btn btn-small btn-green">
	<i class="icon-shopping-cart"></i>Products 
	<span class="badge">1</span>
</button>

<button class="btn btn-small btn-dark-grey">
	<i class="icon-envelope"></i>Emails 
	<span class="badge badge-green">1</span>
</button>

Switch .sw

<input type="checkbox" class="sw" id="sw1" checked="">
<label class="switch" for="sw1"></label>

<input type="checkbox" class="sw" id="sw2" checked="">
<label class="switch red" for="sw2"></label>

Alert .alert

.alert-red

.alert-yellow

.alert-green

.alert-amethyst

.alert-orange

.alert-blue

.alert-skyblue

.alert-dark-grey with close icon 
<div class="alert alert-error">.alert-red</div>

<div class="alert alert-red">.alert-yellow</div>

<div class="alert alert-green">.alert-green</div>

<div class="alert alert-amethyst">.alert-amethyst</div>

<div class="alert alert-orange">.alert-orange</div>

<div class="alert alert-blue">.alert-blue</div>

<div class="alert alert-skyblue">.alert-skyblue</div>

<div class="alert alert-success">
	.alert-success with close icon
	<span class="alert-remove"><i class="icon-remove"></i></span>
</div>

Logo (mini) .min-logo

mini-logo
.mini-logo.anim 
<div class="mini-logo"></div>

<div class="mini-logo anim"></div>

Tooltip .ttip

Simple <p> sentence with tooltip lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, voluptatibus. 




<p class="ttip" data-ttip="Lorem ipsum….">
	Lorem ipsum…
</p>

<button class="btn… ttip small" data-ttip="Lorem ipsum…">Tooltip small</button>
<button class="btn… ttip medium" data-ttip="Lorem ipsum…">Tooltip medium</button>
<button class="btn… ttip large" data-ttip="Lorem ipsum…">Tooltip large</button>


<button class="btn… ttip ttip-green" data-ttip="Lorem ipsum…">Tooltip large</button>
<button class="btn… ttip ttip-red" data-ttip="Lorem ipsum…">Tooltip large</button>
<button class="btn… ttip ttip-blue" data-ttip="Lorem ipsum…">Tooltip large</button>

Loader .loader



<div class="loader center"></div>

<div class="loader green"></div>

<div class="loader red"></div>

<div class="loader blue"></div>

<div class="loader skyblue"></div>

Bubble .bubble-color



<button class="btn… bubble-top">lipsum</button>

<button class="btn… bubble-bottom bubble-yellow">lipsum</button>

<button class="btn… bubble-top bubble-green">lipsum</button>

<button class="btn… bubble-right bubble-red">lipsum</button>

<button class="btn… bubble-left bubble-skyblue">lipsum</button>

HR .color



<hr class="red">
<hr class="blue">
<hr class="yellow">
<hr class="light">

<hr class="red bubble-top bubble-red">
<hr class="blue bubble-bottom bubble-blue">

SVG .svg

there are also .svg-medium, .svg-large & .svg-xlarge but... too much

full svg list 
<div class="svg svg-mini svg-tools"></div>

<div class="svg svg-xxsmall svg-chat"></div>

<div class="svg svg-xsmall svg-phone"></div>

<div class="svg svg-small svg-ebook"></div>

Messages (inbox).messages

  • Hello world,
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptas, molestias ea doloribus debitis alias enim? Distinctio sunt nulla nobis consectetur ab vero ducimus exercitationem.
    Hai bisgno di aiuto?

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptas, molestias ea doloribus debitis alias enim? Distinctio sunt nulla nobis consectetur ab vero ducimus exercitationem. 

<ul class="messages">
	<li class="msg">
		<div class="msg-controls">
			<a href="javascript:void(0)" class="msg-reply ttip dn" data-ttip="Risp."><i class="icon-reply"></i></a>
			<a href="javascript:void(0)" class="msg-delete ttip dn" data-ttip="Elim." id="del-msg_175"><i class="icon-remove"></i></a>
		</div>
		<input type="checkbox" class="msg-subject" id="msg-1">
		<label for="msg-1" class="msg-subject-read">
			<span class="msg-header">
				<span class="msg-from">From: <span>Lorem - ipsum</span><input type="hidden" value="support@bancomail.it" class="mittente"></span>
				<span class="msg-date">on <span>23/mag/2014 10.54.33</span></span>
			</span>
			<span class="msg-sbjct">Lorem ipsum message</span>
		</label>
		<p class="msg-text small">
			Hello world,<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptas, molestias ea doloribus debitis alias enim? Distinctio sunt nulla nobis consectetur ab vero ducimus exercitationem.<br>
			<a href="/supporto">Hai bisgno di aiuto?</a>
		</p>
	</li>
	<li class="msg msg-new">...</li>
	<li class="msg">...</li>
</ul>

Products .products

Item 1

Lorem ipsum dolor sit amet

Lorem

Lorem ipsum dolor sit amet

Item 2

Lorem ipsum dolor sit amet

Lorem

Lorem ipsum dolor sit amet

Item 3

Lorem ipsum dolor sit amet

Lorem

Lorem ipsum dolor sit amet

Item 4

Lorem ipsum dolor sit amet

Lorem

Lorem ipsum dolor sit amet

<div class="products">

	<div class="product">
		<i class="svg svg-xxsmall svg-ebook-love"></i>
		<h3>Item 1</h3>
		<p class="small">Lorem ipsum dolor sit amet</p>
		<div class="product-info center">
			<h4>Lorem</h4>
			<p class="small">Lorem ipsum dolor sit amet</p>
			<button class="btn btn-small btn-green">View</button>
		</div> <!-- /product-info -->
	</div> <!-- /product -->

	<div class="product">
		<i class="svg svg-xxsmall svg-ebook-natale"></i>
		<h3>Item 1</h3>
		<p class="small">Lorem ipsum dolor sit amet</p>
		<div class="product-info center">
			<h4>Lorem</h4>
			<p class="small">Lorem ipsum dolor sit amet</p>
			<button class="btn btn-small btn-green">View</button>
		</div> <!-- /product-info -->
	</div> <!-- /product -->

</div> <!-- /products -->

Items .items

  • Lorem ipsum dolor
  • Sit amet
  • Consectetur adipisicing
  • Rerum maxime itaque
  • Qui libero
<ul class="items">
	<li>Lorem ipsum dolor</li>
	<li>Sit amet</li>
	<li class="green">Consectetur adipisicing</li>
	<li>Rerum maxime itaque</li>
	<li>Qui libero</li>
</ul>

Table tabs .table-tabs

  • Lorem ipsum dolor
  • Sit amet
  • Consectetur adipisicing
  • Rerum maxime itaque
<!-- Make equal width elems -->

<ul class="table-tabs">
	<li class="table-tabs__item"></li>
	<li class="table-tabs__item"></li>
	<li class="table-tabs__item"></li>
	<li class="table-tabs__item"></li>
	<li class="table-tabs__item"></li>
</ul>

Color variables

This project borns with a set of colors to apply to the most of components (like buttons, alerts, loaders, switchs, checkboxes & radios, lists, etc).

Here are the initial list of colors:

The greys

  • dark-grey

  • middle-grey

  • light-grey

  • super-light

Company colors

  • blue

  • orange

  • green

  • skyblue

More colors

  • red

  • yellow

  • emerald

  • amethyst

  • nblue

  • asphalt

Usage

You could apply this just adding a class to the base component
i.e. <div class="ul-thumb asphalt"></div> or <hr class="blue">

Note that in some cases (to avoid conflicts) it is necessary to add a prexif like <div class="alert alert-skyblue">Skyblue alert</div> or <button class="btn btn-blue">Blue button</button>

New colors

You could also add new colors to the $colors list in the base/_colors.scss file and automatically (after compiling) you have new classes to add with and without prefixes. ie. If I add a color item to the sass list like "newRed" #fe2e2e;, after compiling I'll have the ability to apply like <button class="btn btn-newRed">newRed button</button> or <div class="loader newRed"></div>

Components colorizables

All these components and classes are the ability to change color adding/modifiying a class where 'color' it'll be replaced with specific color: 

<p class="text-red">some text red</p>

some text red

More on text styles 
<div class="bg-yellow">
	elem with bg yellow
</div>
elem with bg yellow
<a class="btn btn-green">Button green</a>
Button green
More on button colors 
<a class="btn-icon-circle blue">@</a>
@
More on icon circle button colors 
<input type="radio" class="custom-radio">
<label for="" class="red">Radio red</label>

<input type="checkbox" class="custom-checkbox">
<label for="" class="amethyst">Checkbox amethyst</label>
More on custom checkboxes & radio buttons 
<div class="list orange">
	<div class="list-thumb">
		<i class="icon-home"></i>
	</div>
	<div class="list-body">
		<p>Lorem ipsum dolor sit amet...</p>
	</div>
</div>

Lorem ipsum dolor sit amet...

More on lists 
<ul class="ul blue">
	<li>
		<div class="ul-thumb">
			<strong>1</strong>
		</div>
		<div class="ul-body">
			<p>blue item 1</p>
		</div>
	</li>
	<!-- /more li-->
</ul>

<ul class="ul">
	<li>
		<div class="ul-thumb red">
			<strong>A</strong>
		</div>
		<div class="ul-body">
			<p>ul thumb red</p>
		</div>
	</li>
</ul>
  • 1

    blue ul item 1

  • 2

    blue ul item 2

  • A

    ul thumb red

  • B

    ul thumb green

More on ul 
<div class="photo-slider-demo">
	<div class="photo-slide">
		<figure class="slide-image" id="slide-demo-1"></figure>
		<div class="slide-text slide-text-left">
			<h1 class="stext yellow">Lorem ipsum dolor.</h1><br>
			<h3 class="stext middle-grey">Lorem ipsum dolor sit amet.</h3>
		</div>
	</div>
</div>
More on photo sldier 
<div class="accordion">
	<div>
		<input class="step-chk" id="" type="checkbox">
		<label for="" class="accordion-title orange">
			Accordion Tab Orange
		</label>
		<div class="ac-content">
			Lorem ipsum dolor sit amet.
		</div>
	</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet dolores aliquid quam unde sequi omnis ut dignissimos quidem magni? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, perferendis, sequi. Amet perferendis unde dolor nemo enim consequatur cupiditate eum.

More on accordion 
<button class="btn btn-small btn-dark-grey">
	<i class="icon-envelope"></i>Emails 
	<span class="badge badge-green">1</span>
</button>
More on badge 
<input type="checkbox" class="sw" id="sw-color" checked="">
<label class="switch red" for="sw-color"></label>
More on switch 
<div class="alert alert-amethyst">
	.alert-amethyst
</div>
.alert-amethyst
More on alert 
<button class="btn btn-middle-grey btn-small ttip ttip-green" data-ttip="Tooltip green">
	hover me
</button>
More on tooltip 
<div class="loader skyblue"></div>
More on loader 
<button class="btn… bubble-top bubble-green">
	Bubble green
</button>
More on bubble 
<hr class="yellow">
More on HR 
<ul class="items">
	<li class="green">Lorem ipsum dolor</li>
	<li class="yellow">Sit amet</li>
	<li class="nblue">Qui libero</li>
</ul>
  • Lorem ipsum dolor
  • Sit amet
  • Qui libero
More on Items

You could also "colorize" any other component just adding the @mixin colorize() under base/_mixin.scss

Hope you'll enjoy it, use it and improve it!

Download bm.css

Here you could download the compressed css file to use it in your project.

Include the script and enjoy it! <link rel="stylesheet" href="css/bm.css">

or download the bm.mincss

Download .scss project

Download or fork the project on github to customize the package based on your own needs. Edit the @mixins, change the $variables and so on...