Toolkit

Components

Horizontal Navigation

To create a horizontal navigation, add the navigation class name to a list. In order to mark the active menu item, add the active class to the link inside list element.

Tabs Navigation

Tabs navigation is pretty similar to horizontal navigation. To create tabs, add tabs class to unordered list. To represent states for tabs, just add active or disabled classes to proper link elements.

Pagination

Buttons

To create ApplePie button, add button class name to any of <a>, <button>, <input type="button" /> elements.

ApplePie Button

Customizing Buttons

Following components and modifiers approach it is easy to build buttons and create customized buttons for your own application.

By adding pretty common classes modifiers success, danger, warning or pale you can easily modify button appearance. Moreover, you can easily override modifier styles and add your custom modifications.

Disabling Buttons

You can easily turn on disabled state for button by switching modifier class to disabled. This will remove hover and active states of button and will change cursor from pointer to default. So it will look unclickable.

Class disabled modifies only button's appearance. Disabling clickability should be handled with javascript.

Input Fields

All text inputs come styled by default in ApplePie, so there's no additional classes need to be applied. Inputs of all types text, password, email, search look similar without any browser-specific styling. If you need to customize styling for different kinds of input element - you can easily do it.

Textareas

Textarea comes styled by default in ApplePie, so there's no additional classes need to be applied. It has width of 100%, to fit anywhere it is placed, and uses box-sizing: border-box so there is ability to combine 100% width with borders and paddings.

Tables

Since table elements are used in markup not only for creating table, ApplePie won't apply any styling to table element by default, it uses class selector for tables. To style an HTML table, add the table classname. This class adds some nice styling compared to default table: some padding and borders and emphasizes the header.

# First Name Last Name Username
1 Sheldon Cooper @DrSheldonCooper
2 Leonard Hofstadter @Lenny
3 Howard Wolowitz @RocketMan

Flash Messages

Flash messages are pretty common for today's web apps. With ApplePie you can easily create different flash messages by applying flash class to a div element with text. You'll see it's default appearance.

By adding semantic classes modifiers error, success, warning you can apply corresponding styles to your flash messages.

Flash message: default
Flash message: error
Flash message: warning
Flash message: success