Difference between revisions of "Foundation"

From Dreamwidth Notes
Jump to: navigation, search
m
m (Link to conversion guide)
 
(7 intermediate revisions by 4 users not shown)
Line 1: Line 1:
Foundation is a responsive front-end network.  We are going to convert our current site schemes to use Foundation and SCSS.  Advantages:
+
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.
 
* 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, to  
+
* We can start to use the advantages of [[SCSS]], such as variables and mixins.
 +
 
 +
== Skeleton .tt page using Foundation ==
 +
 
 +
<source lang="text">
 +
[%# path/to/file.tt
 +
 +
Short description of the page
 +
 +
Authors:
 +
    name <[email protected]>
 +
 
 +
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>" ...) -%]
 +
</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 ==
 +
 
 +
See the skeleton for the controller which outlines how to do [[Error_Handling]].
 +
 
 +
== Styling Foundation pages ==
 +
 
 +
Default styling should work for most pages. If you ever need custom styling, you should refer to the [http://www.dreamwidth.org/dev/style-guide style guide] and [https://github.com/dreamwidth/dw-free/blob/develop/views/dev/style-guide.tt the corresponding .tt page].
  
 
== Documentation ==
 
== Documentation ==
Line 8: Line 42:
 
* [http://foundation.zurb.com Foundation]
 
* [http://foundation.zurb.com Foundation]
 
* [http://sass-lang.com/ SASS] (which SCSS is a variant of)
 
* [http://sass-lang.com/ SASS] (which SCSS is a variant of)
 +
* [[Template Toolkit / Foundation Conversion Guide]]
  
 
[[Category: Development]]
 
[[Category: Development]]

Latest revision as of 03:53, 11 September 2015

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.

Skeleton .tt page using Foundation

[%# path/to/file.tt
 
Short description of the page
 
Authors:
    name <[email protected]>
 
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

See the skeleton for the controller which outlines how to do Error_Handling.

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