Difference between revisions of "Foundation"
From Dreamwidth Notes
m (→Skeleton .tt page using Foundation: (c)) |
(→Skeleton .tt page using Foundation: Precision) |
||
Line 24: | Line 24: | ||
[%- CALL dw.active_resource_group( "foundation" ) -%] | [%- CALL dw.active_resource_group( "foundation" ) -%] | ||
− | [%- dw.need_res( { group => "foundation" } | + | [%- dw.need_res( { group => "foundation" }, |
− | ) -%] | + | "<file>" ...) -%] |
</source> | </source> | ||
+ | |||
+ | Note: the last line is needed only if you're loading CSS or JS files for the page. Otherwise you can leave it out. | ||
== Error handling in Foundation pages == | == Error handling in Foundation pages == |
Revision as of 14:12, 1 November 2014
Foundation is a responsive front-end network. We are going to convert our current site skins to use Foundation and SCSS. Advantages:
- All pages can be designed to work with both mobile and desktop pages, using the same HTML.
- We can start to use the advantages of SCSS, such as variables and mixins.
Contents
Skeleton .tt page using Foundation
[%# path/to/file.tt Short description of the page Authors: name <name@email.com> Copyright (c) <years> by Dreamwidth Studios, LLC This program is free software; you may redistribute it and/or modify it under the same terms as Perl itself. For a copy of the license, please reference 'perldoc perlartistic' or 'perldoc perlgpl'. %] [%- sections.title = ".title" | ml -%] [%- CALL dw.active_resource_group( "foundation" ) -%] [%- dw.need_res( { group => "foundation" }, "<file>" ...) -%]
Note: the last line is needed only if you're loading CSS or JS files for the page. Otherwise you can leave it out.
Error handling in Foundation pages
Use Error_Handling in the controller.
Styling Foundation pages
Default styling should work for most pages. If you ever need custom styling, you should refer to the style guide and the corresponding .tt page.
Documentation
- Foundation
- SASS (which SCSS is a variant of)