http://meis.github.io/talks/Painting-with-Onions || @m_e_i_s
Ladies and gentlemen, welcome to the
body {
color: red
}
button {
font-family: Comic Sans;
}
Also, not all the properties work the same way (tables, em, etc)
body {
color: red
}
button {
font-family: Comic Sans;
}
button {
font-family: Comic Sans;
}
...
button {
font-family: Any other font, please;
}
Bower?
Last include wins
.icon {
width: 32px;
height: 32px;
background: url(path/to/my/icon.png))
}
var style = { color: 'white' };
React.render(Hi!, mountNode);
package My::Button;
use Moose;
extends 'Onions::Component';
sub _build_attributes {{
color => 'green',
border => '1px solid black',
}}
package My::FancyButton;
use Moose;
extends 'My::Button';
sub _build_attributes {{
color => 'red',
border => '1px solid black',
}}
package My::PerlIcon;
extends 'Onions::Component';
sub _build_attributes {{
background_image => $_[0]->files('image');
}}
sub _build_files {{
image => 'file_in_this_package',
}}
package Onions::Manifest::DesktopApp;
use Moose;
extends 'Onions::Manifest';
sub _build_variables {{
font_family => 'Comic Sans',
font_size => '12px',
window_border => '1px solid black',
button_color => 'green',
}}
package My::DesktopApp::Theme
extends 'Onions::Manifest:DesktopApp';
sub _build_variables {{
font_family => 'Comic Sans',
font_size => '18px',
button_color => 'red',
}}
package My::Button;
with_manifest 'DA' => 'Onions::Manifest::DesktopApp';
sub _build_attributes {
my $self = shift;
{
font_family => $self->variablre('DA', 'font_family'),
font_size => $self->variablre('DA', 'font_size'),
color => $self->variablre('DA', 'button_color'),
}
}
my $o = Onions->new();
$o->let('button')
->be('Onions::Component::Button')
->with_theme('DA', 'My::DesktopApp::Theme');
$o->let('#icon-perl')->be('My::PerlIcon');
$o->files_root('/img');
$o->dump_files('path/to/img');
$o->dump_css('path/to/file.css');
button {
font-family: Comic Sans;
font-size: 12px;
color: red;
}
#icon-perl {
background: url('/img/MyPerlIconImage.png');
}