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 is pretty similar to horizontal navigation. To create tabs, add
tabs class to unordered list.
To represent states for tabs, just add
disabled classes to proper link elements.
To create ApplePie button, add
button class name to any of
<input type="button" /> elements.
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
you can easily modify button appearance. Moreover, you can easily override modifier styles and add your custom modifications.
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.
All text inputs come styled by default in ApplePie, so there's no additional classes need to be applied.
Inputs of all types
look similar without any browser-specific styling. If you need to customize styling for different kinds of
input element - you can easily do it.
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.
Since table elements are used in markup not only for creating table, ApplePie won't apply any styling
table element by default, it uses class selector for tables. To style an HTML table, add the
This class adds some nice styling compared to default table: some padding and borders and emphasizes the header.
|#||First Name||Last Name||Username|
Flash messages are pretty common for today's web apps. With ApplePie you can easily create different flash messages
flash class to a
div element with text. You'll see it's default appearance.
By adding semantic classes modifiers
you can apply corresponding styles to your flash messages.