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
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)
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
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
.form-inline > .has-success > .control-label
.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.
Eg. Bootstrap Class:
.nav-tabs>li>aEg. 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.