` and `

` respectively. ```html

Back (menu)

Front (content)

``` ![Back Front Panels](./doc-images/back-front-panels.png) Wrap all the content in these panels with their appropriate containers to provide spacing. ```html

Back (menu)

Front (content)

``` ![Back Front Containers](./doc-images/back-front-containers.png) ### Headers Both the back and the front panel in the example have headers at the top. Headers have a title and a series of actions (usually icon buttons). Backwhite comes with fontawesome solid and brand icons. Use them just like you would in any other app. This is an example of a header in the front panel. ```html

Example Header

``` ![Front Header](./doc-images/front-header.png) This is an example of a header in the back panel. ```html

Example Header

``` ![Back Header](./doc-images/back-header.png) ### Controlling Mobile Sliding The front and back usually start with main headers. These are what will contain the buttons controlling the sliding on mobile. The front panel header would usually contain the title of the page. The back panel header would contain the title of the site. On each of these there would be one button which handles opening and closing. ```html

Example Header

``` _Desktop_ ![Header Desktop](./doc-images/header-desktop.png) _Mobile Page_ ![Header Mobile Page](./doc-images/header-mobile-page.png) _Mobile Menu_ ![Header Mobile Menu](./doc-images/header-mobile-menu.png) `.bw-show-on-mobile` will hide the button on desktop and show it on mobile. `.bw-open` and `.bw-close` are preprogrammed classes which trigger the opening and closing of the menu respectively when clicked. Font awesone's chevron icons are being used here. ### Back Menu Links Links are organized on the back menu using a table. ```html

About	Contact	Post of the Day
Web Design	Hardware	Machine Learning
Youtube	Github	Linkedin

``` ![Header Links](./doc-images/header-links.png) ### Back Menu Footer The footer goes in the back menu within a div with the class `.bw-footer`. ```html

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

``` ![Header Links Footer](./doc-images/header-links-footer.png) ### Responsive Tables Tables are scaled so that every cell is as wide as the widest text cell. This means that the tables will overflow over the edge. In backwhite, these tables are wrapped in a horizontal scroll wrapper div to allow for horizontal scrolling between tables. ```html

Name	Age	Town	Email
Joe	22	Allentown	joe@schmoes.goes
Jim	20	Gainsville	jim@shims.dims
Steven	32	Birmington	steven@schmultz.gultz

``` ![Responsive Table](./doc-images/responsive-table.png) ### Grid Rows Backwhite supports bootstrap-like grid rows. Each grid row is a `.bw-row` div, and can contain any number of `.bw-col-[x]` divs, where x is any number from 1 to 12. To make a complete row, all x values must add up to exactly 12. ```html

Grid Rows

`bw-col-2`

`bw-col-4`

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore unde iure nobis. Quos tempora laudantium beatae, aliquam repellat praesentium velit eius voluptatum blanditiis sed ullam! Necessitatibus cupiditate inventore similique voluptatem!

`bw-col-4`

`bw-col-6`

`bw-col-10`

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum hic nihil, facilis, autem alias eaque iure provident reiciendis explicabo magnam doloremque officiis sit officia consequatur adipisci? Omnis eos eius porro! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus, unde numquam. Fugiat et, sed beatae mollitia magni dolores omnis deserunt, inventore dolorem suscipit possimus labore quasi unde temporibus adipisci ex!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad molestiae delectus id accusantium alias molestias aspernatur animi, unde sequi veritatis. Eveniet est dolorem ullam voluptatum odio molestias laudantium dolores ea? Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci sed, architecto quidem possimus amet velit voluptas ex eos placeat, iste provident suscipit at ipsam numquam nobis totam natus veniam aliquid?

`bw-col-2`

`bw-col-6`

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure ad aliquam facere. Sequi illum mollitia excepturi enim! Blanditiis explicabo, libero fugiat asperiores velit magni voluptatem cumque tempore corporis quia quaerat.

`bw-col-2`

`bw-col-4`

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis voluptas natus ipsam voluptatibus aspernatur neque minima odit ipsum aliquid et? Dolorum corporis distinctio delectus quidem nesciunt unde non ducimus voluptate? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, culpa ad in enim earum iste pariatur ratione voluptas esse ut officia inventore debitis beatae vel dolore odit nam eius. Culpa.

`bw-col-12`

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis dolor eius iure necessitatibus dolores alias ex pariatur! Dolores corporis voluptas natus a quos voluptate? Sapiente laboriosam fugiat possimus velit atque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione sapiente error, repellat vel ut distinctio consequatur dolorem quidem molestias nisi neque nobis eum eligendi aliquam placeat numquam iusto deleniti aspernatur? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae numquam quas quaerat? Iusto quaerat exercitationem deleniti aliquid quas error tempora eligendi necessitatibus eaque, quo quisquam! Est amet ea natus maiores.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut eius laboriosam velit voluptates corrupti illo quia. Autem quos excepturi dolore praesentium? Aut fuga fugiat praesentium blanditiis eum et iusto facere! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat eaque recusandae facilis ut laborum vero repudiandae consequatur debitis quam adipisci reprehenderit voluptas, velit praesentium provident, pariatur architecto earum molestias repellendus! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusantium id impedit pariatur quae sit vel tenetur. Voluptate necessitatibus omnis repellat totam eum, quo perspiciatis, ad error commodi animi quibusdam!

``` ![Grid Rows Desktop](./doc-images/grid-rows-desktop.png) On a tablet (or a smaller laptop screen), and on mobile, the grid rows align vertically. ![Grid Rows Tablet](./doc-images/grid-rows-tablet.png) ### Cutouts Another part that backwhite styling provides is cutouts. A cutout is a special emphasised part of the document that appears cut out from the front part, using the back as it's background. ```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis urna nec lorem finibus mattis vel et odio. Ut lectus nunc, accumsan eu mi in, finibus dapibus felis. Morbi feugiat laoreet turpis ut sollicitudin. Donec id metus metus. Etiam vestibulum vitae dolor eu finibus. Vivamus in urna vitae purus fringilla porttitor vel sed nisi. Maecenas accumsan sapien vitae lectus tincidunt, ac maximus elit dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

``` ![Cutout](./doc-images/cutout.png) You can add headers to cutouts as well ```html

Cutout Title

``` ![Cutout Header](./doc-images/cutout-header.png) Blockquotes and pre/code sections are automatically formatted as cutouts ```html

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi officia ipsum optio illum. Sunt fugiat nemo veritatis tempora voluptas ea laudantium? Explicabo ipsa error distinctio nihil nostrum exercitationem hic tempora.

``` ![Cutout Blockquote](./doc-images/cutout-blockquote.png) ```html

def myfunction(arg1, arg2):
    """
    Docstring for myfunction
    """
    return arg1 + arg2, arg1/arg2

``` ![Cutout Code](./doc-images/cutout-code.png) ### Buttons Backwhite provides three button types. `.bw-text-button` is a button formatted simply as text. `.bw-cutout-button` is a button formatted like a cutout. Use this in a front-formatted section. For the back and cutouts, there is `.bw-raised-button`. ```html

``` ![Buttons](./doc-images/buttons.png) ### Forms #### Block Forms Backwhite Forms are created with the `bw-form` class. ```html ``` Form entries are organized into rows (in a div called `.bw-form-row`). Each of these rows contain one or more input fields. An input field is actually a group containing a label and an input, contained in a `.bw-input-group`. This handles coupling the input and label and styling them as a single entity. Input groups are automatically scaled to fill the width of the row (using flexbox). ```html

First Name:

Last Name:

``` `.bw-input-group` also works for selects. ```html

Race:

``` Checkbox and file inputs are special and use `.bw-checkbox-group` and `.bw-file-group` respectively. ```html

Hispanic/Latino

...

Upload File:

``` At the bottom, `.bw-button-group` will contain form buttons (this should be contained in it's own `.bw-form-row`). ```html

``` Here's an example of an entire form: ```html

Form

First Name:

Last Name:

Email:

Password:

Verify Password:

Age:

Gender:

Race:

Hispanic/Latino

Active Military or Veteran

Upload File:

``` ![Block Form](./doc-images/block-form.png) #### Cutout Forms You can also make a form in a cutout. Remember to use `.bw-raised-button` in this form in place of `.bw-cutout-button`. ```html

Cutout Form

First Name:

Last Name:

Email:

Password:

Verify Password:

Age:

Gender:

Race:

Hispanic/Latino

Active Military or Veteran

Upload File:

``` ![Cutout Form](./doc-images/cutout-form.png) #### Inline Forms Forms can also take up one row. These are created by `.bw-inline-form`. Buttons in this form are automatically pushed to the right (or left depending on ordering) and are automatically formatted. For example, a search bar: ```html ``` ![Inline Form](./doc-images/inline-form.png) ### Customization Backwhite's styling is written in SCSS, with variables determining text size and coloring. If you're using scss, you can customize Backwhite using these variables in a main.scss file importing the site theme. _main.scss_ ```scss // Declare variables... // Import statement @import '{{ site.theme }}' ``` #### Colors The main theme color is controlled by the `$back-color` variable. Changing this changes the entire coloring of the page! Usually this should be a dark color, so to not clash with the white background. ```scss $back-color: #333; // Default ``` ![Default](./doc-images/default.png) ```scss $back-color: #331616; ``` ![Back Color is #331616](./doc-images/back-color-331616.png) ```scss $back-color: #163318; ``` ![Back Color is #163318](./doc-images/back-color-163318.png) On jekyll, this color also controls the coloring of syntax highlighting. ```scss $back-color: #333; // Default ``` ![Default Syntax](./doc-images/default-syntax.png) ```scss $back-color: #331616; ``` ![Syntax #331616](./doc-images/syntax-331616.png) ```scss $back-color: #163318; ``` ![Syntax #163318](./doc-images/syntax-163318.png) #### Spacing Spacing is controlled by `$spacing-unit`. ```scss $spacing-unit: 8pt; // Default ``` ![Default](./doc-images/default.png) ```scss $spacing-unit: 4pt; ``` ![Spacing Unit is 4pt](./doc-images/spacing-unit-4pt.png) ```scss $spacing-unit: 16pt; ``` ![Spacing Unit is 16pt](./doc-images/spacing-unit-16pt.png) #### Fonts The main font is controlled with `$font-family`. ```scss $font-family: "Calibri Light", sans-serif; // Default ``` ![Default](./doc-images/default.png) ```scss $font-family: "Verdana", sans-serif; ``` ![Font Family Verdana](./doc-images/font-family-verdana.png) Code font is controlled by `$code-font-family`. ```scss $code-font-family: "Consolas", monospace; // Default ``` ![Code Default](./doc-images/code-default.png) _Consolas is provided with Backwhite_ ```scss $code-font-family: "Monaco", monospace; ``` ![Code Monaco](./doc-images/code-monaco.png) #### Font Scales There are 4 font size variables that control the size of different parts of code. ```scss $large-font-size; // Controls h1 font size $medium-font-size; // Controls h2, h3, h4 font size $normal-font-size; // Controls normal font size $small-font-size; // Controls footer font size ``` #### Layout On desktop, the width of the side menu is controlled by `$desktop-menu-size`. ```scss $desktop-menu-size: 300px; // Default ``` ![Default](./doc-images/default.png) ```scss $desktop-menu-size: 500px; ``` ![Menu Size 500](./doc-images/menu-500.png) #### Responsiveness ##### Mobile To change the breakpoint when the web app switches to mobile styling, use `$mobile-width` ```scss $mobile-width: 760px; // Default ``` ![Default Responsive](./doc-images/default-resp.png) ```scss $mobile-width: 900px; ``` ![Responsive 900](./doc-images/resp-900.png) ##### Tablet To change the breakpoint when the web app switches to tablet styling, use `$tablet-width` ```scss $tablet-width: 1200px; // Default ``` ![Default Responsive Tablet](./doc-images/default-resp-tablet.png) ```scss $tablet-width: 1230px; ``` ![Responsive Tablet 1230](./doc-images/resp-tablet-1230.png) ## Contributing Bug reports and pull requests are welcome on GitHub at https://github.com/andydevs/jekyll-theme-backwhite. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct. ## Development To set up your environment to develop this theme, run `bundle install`. Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal. When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled. To add a custom directory to your theme-gem, please edit the regexp in `jekyll-theme-backwhite.gemspec` accordingly. ## License The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).