Contenuto Web Contenuto Web

Colors

How to build your theme faster ?

We first developed this bootsrap theme editor for our own purpose to create theme a lot faster. Here are some technics to become a bootstrap theme chef with this tool.

1. Awesome typeahead

Find as you type all defined variables started with an @ and all the Less function as darken(@color,10%).

3. Contextual and live preview

Change variables and you will get the result on the content on the right. No scroll to check what you have changed.

2. Reusable variables

Configure the mains colors and the new variables that we created "Brand Colors" and reuse it in order to have a smooth theme.

4. New and imported variables accepted

You already have set some variables. Import them and you can even custom your own new variables.

5. Colorpicker

Colorpicker to help you to find lovely colors.


Have fun ! Like it ? Share it.

Brand Colors

Clever context variables

Set new logic variables : Brand colors and reuse it in your theme. It'd be faster and help you to make smooth theme.

Scaffolding

Bootstrap Magic

Discover our gitHub project at the following url : Bootstrap magic GitHub Project. Everyone can contribute and we would like to hear your feedback.

For more information on Pikock please check out http://www.pikock.com/

For more information on Autre planete please check out http://www.autreplanete.com/

These variables are applied for the text body color, links color and links color hovered.


You could also set variables the border radius for differents size.

Small
.well-small component

Typography

Body copy

Bootstrap's global font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Lead body copy

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Lorem ipsum dolor gravida tortor, eu mollis massa commodo ut. Sed sed quam urna, ac sollicitudin elit. Etiam mollis, sem quis fringilla vehicula, Duis et velit eu diam porta vehicula sit amet in sapien. Vestibulum non arcu nec magna dapibus fringilla vel in est. This line of text is meant to be treated as fine print.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Component Sizing

Button
1 2 3
5 6 7
8
Button
1 2 3
5 6 7
8
Button
1 2 3
5 6 7
8

Buttons

Forms

Normal Form

Help text for your users

@
Horizontal Form
Some value here

Table

# First Name Last Name
1 Mark Otto
2 Jacob Thornton
3 Larry the Bird
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
3 Larry the Bird

Hero Unit

Bootstrap magic

Bootstrap theme generator made with AngulasJS by Google


Try Bootstrap magic

Pagination

Form States

×

Alert block

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

× Error Change a few things up and try submitting again.
× Success You successfully read this important alert message.
× Information This alert needs your attention, but it's not super important.
Something may have gone wrong
Please correct the error
Woohoo!

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Labels

Default Success Warning Important Info Inverse

Badges

1 2 3 4 5 6

toolTip

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats.

Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna twitter handle. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla beard stumptown. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

popOver

Sprites

Icon Glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user

Icon Autre planète

516 Beautiful web icons in png, svg, vector, CSS sprite and webfont formats, available for free at Autre planète.

  • apico-atoms
  • apico-printer
  • apico-cloud-upload
  • comment-user
  • apico-magic
  • apico-erase
  • apico-airplane
  • apico-book

Private