view release on metacpan or  search on metacpan

lib/Jifty/Manual/UsingCSSandJS.pod  view on Meta::CPAN

definitions in a single request.

=head1 USING AND EXPANDING CSS

=head2 Assembly of CSS definitions

When Jifty assembles all CSS definitions (which is internally done
inside L<Jifty::Web> by the method C<include_css>), a single file,
C<main.css> is included into the generated HTML code of the current
page. This file consists of a series of C<@import> directives that
reference every single CSS file to get used.

=head2 Expansion of CSS definitions

Jifty maintains two initially empty files, C<app-base.css> and
C<app.css> that may get "overloaded" by simply providing these files
in an application's C<share/web/static/css> directory.

These two files will get included in different order, C<app-base.css>
being the very first and C<app.css> getting included very late in the
CSS construction process.

This means that general definitions that should apply to all
subsequently encountered styles could easily get done in
C<app-base.css> whereas individual redefinitions, expansions or your
application's own definitions could go into C<app.css>.

=head2 Jifty's own definitions

Jifty provides a series of definitions that are responsible for a good
look without any modification. Please note that not all of the used
CSS classes are already defined, but they will provide a hook for
modification of the general look. Some of the styles are listed below.

=over

=item form_errors, error

Error messages encountered during validation are displayed inside a
C<< <div> >> tag of class C<form_errors> which initially is not yet
defined. Every single error message is marked with a class C<error>.

=item hints, warning, error

These classes are used for displaying additional information for form
fields.

=item form_field, mandatory, argument-$name

Every form field including its label is packed inside a C<< <div> >>
tag with these classes (mandatory only if the field is
mandatory, of course), where C<$name> is the field's name.

=item preamble

This section is a C<< <span> >> tag filled with a form field's
preamble content that could contain additional instructions for the
user. The content may be set by the C<preamble> accessor method that
is available for every C<Jifty::Web::Form::Field> and its successors.

=item widget, button, button_as_link, combobox,
combo-text, combo-button, combo-list, date, label, password
submit_button, reset, text, hidden, ajaxvalidation,
ajaxcanonicalization, ajaxautocompletes

These class names are used depending on the type of widget getting
rendered.

=item autocomplete

used for the autocomplete div.

=item toplevel, menu, context_menu, submenu, title, expand

These classes are used in navigation bars.

=item jifty, results, messages

These three CSS classes are used to surround a message block displaying
an action's messages after having run an action.

=item message, error, $moniker

Every single message that is displayed in an action's result box is
marked with the message's type plus the action's moniker as a CSS
class name.

=back

=head1 USING AND EXPANDING JAVASCRIPT

Jifty comes bundled with a series of separately developed JavaScript
libraries, like

=over

=item C<jQuery> L<http://jquery.com/>

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.

=item C<JSON> L<http://json.org>

Hereby, major support for encoding and decoding data into the JSON
data format (similar to C<YAML>) is provided.

=item C<behaviour.js>

With C<behaviour.js>, intelligent JavaScript handlers can be defined.

=back

=head2 Assembly of JS definitions

Jifty maintains a complete list of JS files to include. This list may
be retrieved or set by the accessor C<< Jifty->web->javascript_libs >>.
There should, However, rarely arise a situation to do that, because
Jifty has already reserved two files that may get added to your application:

=over 4

=item F<app.js>