Create PSD to Bootstrap 3 CSS Child Themes from any PSD quickly. Your PSD to Bootstrap CSS designs are easy to edit, including any other CSS framework, to both create and modify individual CSS styles in your PSD. Your custom PSD styles are converted to native CSS styles in your output. You can create CSS child themes for any CSS framework with Export Kit using your PSD.

Step 1: Bootstrap CSS Crash Course

Like many other CSS frameworks, Bootstrap is a component based library of CSS, designed to create HTML/CSS elements for any website. Each element is styled via CSS and may have some internal functionality via JavaScript.

Using your PSD with Bootstrap, along with other CSS frameworks is very easy. HTML elements only need to reflect the CSS class styles of the framework in your PSD. This allows you customize the view elements of your HTML, then style the elements with Bootstrap CSS using our CSS Style tag.

Example Bootstrap Button

1
2
3

<div class="btn btn-lg btn-warning">
    Warning
</div>

Example PSD Layer Tag (text layer)

${css|style:btn btn-lg btn-warning} warning button

Bootstrap Simple Components

Bootstrap CSS is a structured library of components which can be manipulated provided you know the class names and parent-child relationship. When looking a basic Bootstrap component such as a Button, there are basic CSS classes used to create the button.

Example Bootstrap Class

Eg. .btn

Eg. .btn-default

Bootstrap Complex Components

Bootstrap also supports complex element nesting to create some components, and depending on the webpage – these structures can also be reused in other elements to create dynamic elements. Dropdowns, lists, pills, etc. are all examples of complex components.

Example Bootstrap Class

Eg. .form-inline > .has-success > .control-label

Eg. .form-group > input

Your PSD And Bootstrap

You will need to create your CSS Styles in your PSD similar to the Bootstrap component structure to manipulate the elements. Once you add CSS classes to your PSD layers, you will override the native Bootstrap settings for the respective element.

Example ${css|styles}

Eg. Bootstrap Class: .nav-tabs>li>a
Eg. PSD layer name: .nav-tabs>>li>>a - note the >>

NOTE: Direct selectors > need to use >> (double greater than) in the PSD layer name, read more about CSS Styles.

Step 2: Create Your PSD CSS Styles

Depending on the component you wish to manipulate with CSS, you will need to create CSS Styles similar to the component. Assuming you want to create a theme for Bootstrap Buttons, there are several ways you can do this.

Dual CSS Styles

Several components in Bootstrap will render their styles for both text and shapes based on a single CSS class name, eg. .btn. These elements will accept both Text and Shape layer styles when creating custom Bootstrap Child Themes with your PSD.

.btn Text Example

Using Text layers with your CSS Styles, you can manipulate the label and how it renders with Bootstrap buttons.

.btn Shape Example

Using Shape layers with your CSS Styles, you can manipulate the background color and overall shape of elements.

Single CSS Styles

There are some components in Bootstrap that are restricted to a single layer type when using CSS Styles such as: Headings (Text styles only) and Rows (Shape styles only).

Step 3: Know Your Bootstrap Elements

Export Kit will create a CSS child theme using ONLY the theme elements you include in your PSD. Bootstrap is a well-organized CSS library with many options, styles and components to use. When creating Bootstrap Child Themes, you will need to modify many CSS Styles to fully skin your Bootstrap theme.

You will have to style all the required elements your PSD CSS Styles folder, including any additional element states.

Wireframe Your Layout

Because you are using CSS Styles with your PSD, you can add a custom Bootstrap layout to show-off your Child Theme using simple wireframes in your PSD design.

Step 4: Include Bootstrap With Your Export

1
2
3
4
5
6

<!-- Required -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 
<!-- Optional -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

You have the option of downloading Bootstrap or using the official CDN found on getbootstrap.com. This will allow you to use Bootstrap with your export or any HTML project.

Before you export your custom Bootstrap Child Theme you will need to add a link to your local Bootstrap CSS file, or the official CDN to your Custom HEAD.