Quantcast

CSS/JS Includes

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

CSS/JS Includes

Joe Balancio
There are several ways that you can include CSS or JS into the views. You can either include them via the view helpers like HeadLink/HeadScript in the controllers or in the views.

What happens when I have many controllers/actions and many templates? Would it be reasonable to manage your CSS/JS includes in this way (controller or view)?

Have you encountered this problem and what are some ways that you have solved it?
- Joe
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: CSS/JS Includes

Darryle Steplight
I just include mine in the master layout so my entire app calls the same CSS
and JS file.

2011/2/10 Joe Balancio <[hidden email]>

>
> There are several ways that you can include CSS or JS into the views. You
> can
> either include them via the view helpers like HeadLink/HeadScript in the
> controllers or in the views.
>
> What happens when I have many controllers/actions and many templates? Would
> it be reasonable to manage your CSS/JS includes in this way (controller or
> view)?
>
> Have you encountered this problem and what are some ways that you have
> solved it?
>
> -----
> - Joe
> --
> View this message in context:
> http://zend-framework-community.634137.n4.nabble.com/CSS-JS-Includes-tp3300692p3300692.html
> Sent from the Zend MVC mailing list archive at Nabble.com.
>
>


--
----------------------------------------------
"May the Source be with you."
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: CSS/JS Includes

Joe Balancio
Yes, you can include all the styles your site will need in one CSS, but you get the overhead of including styles that some pages will not need. Same thing with JS.

So, if I'm creating a complex site with many pages with many styles, I need a way to manage all of that.
- Joe
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: CSS/JS Includes

umpirsky
I suggest you to minify it all and servi in one file. Remember that js and
css are cached by the browser, so they will be loaded only the first time
user visits the site.
---
Regards,
Saša Stamenković


On Fri, Feb 11, 2011 at 9:57 AM, Joe Balancio <[hidden email]> wrote:

>
> Yes, you can include all the styles your site will need in one CSS, but you
> get the overhead of including styles that some pages will not need. Same
> thing with JS.
>
> So, if I'm creating a complex site with many pages with many styles, I need
> a way to manage all of that.
>
> -----
> - Joe
> --
> View this message in context:
> http://zend-framework-community.634137.n4.nabble.com/CSS-JS-Includes-tp3300692p3300959.html
> Sent from the Zend MVC mailing list archive at Nabble.com.
>
bgy
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: CSS/JS Includes

bgy
In reply to this post by Joe Balancio
Le 11/02/11 09:57, Joe Balancio a écrit :
>
> Yes, you can include all the styles your site will need in one CSS, but you
> get the overhead of including styles that some pages will not need. Same
> thing with JS.
>

As Saša Stamenković stated you should minify your css/js for the reason
he mentioned.

It's not good practice to multiply the request to fetch the CSS and JS.

Take a look here for an implemtation of minify embed in a View Helper:

http://www.gsdesign.ro/blog/minify-css-in-zendframework/

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: CSS/JS Includes

mmcaya
In reply to this post by Joe Balancio
On 2/11/11 3:57 AM, Joe Balancio wrote:
> Yes, you can include all the styles your site will need in one CSS, but you
> get the overhead of including styles that some pages will not need. Same
> thing with JS.
>
> So, if I'm creating a complex site with many pages with many styles, I need
> a way to manage all of that.
>
> -----
> - Joe
You can try the 80/20 approach.  I tend to gather most of the common css
/ js into single files included on every page. (minified when we do a
production build)
Then, for the specialty stuff, try something like this:
http://devzone.zend.com/article/11760
You can even extend that concept to produce a css / js file per
controller, or per module.
With some experimentation, I am sure you can find a comfortable balance
between managing lots of files, and only making a few cache-able requests.

-Matt
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: CSS/JS Includes

Joe Balancio
Thanks for the links. I'll definitely add the minify stuff.

About this page: http://devzone.zend.com/article/11760
I like how simple and elegant the solution is to include js/css by controller and action. However, what if I have the same js that needs to be included in two different actions or two different controllers?

In the comments of the above page, I found: http://www.devpatch.com/2010/02/view-plugin/
I like what this person is saying, "In my approach loading up different CSS/JS files per controller is the exception not the rule." Basically, have your global stuff, but treat it controller-specific and action-specific CSS/JS on a per-case basis (as needed). This is the solution my project is using, but if I'm managing several controllers and several actions, it will start to get messy and difficult to manage how all the different files are included.

The idea I had in mind:
CSS/JS will be managed through configuration (XML). CSS/JS will be targeted through routes and it will follow the same layout as the route configuration. Create a concept of bundles which are groups of CSS/JS that can be assigned to a route. Create concept of a global which will be included on every page. Create concept of templates from which routes will be allowed to inherit. A plugin will be responsible for including (and minifying) js/css based on the configuration.

Sample XML:
<global>
<js>
    <jquery>/js/jquery.js</jquery>
</js>
<css>
   <main>/css/main.css</main>
</css
</global>

<about-route>
<css>
    <about>/css/about.css</about>
</css>
<js>
    <about>/js/about.js</about>
</js
</about-route>
- Joe
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: CSS/JS Includes

chrisweb
Hi,

I wrote an article about how i manage css files for my website, perhaps
you want to read it ;)

http://www.chris.lu/en/news/show/4d5af902e7fbd/

chris


Am 12.02.2011 01:06, schrieb Joe Balancio:

> Thanks for the links. I'll definitely add the minify stuff.
>
> About this page: http://devzone.zend.com/article/11760
> I like how simple and elegant the solution is to include js/css by
> controller and action. However, what if I have the same js that needs to be
> included in two different actions or two different controllers?
>
> In the comments of the above page, I found:
> http://www.devpatch.com/2010/02/view-plugin/
> I like what this person is saying, "In my approach loading up different
> CSS/JS files per controller is the exception not the rule." Basically, have
> your global stuff, but treat it controller-specific and action-specific
> CSS/JS on a per-case basis (as needed). This is the solution my project is
> using, but if I'm managing several controllers and several actions, it will
> start to get messy and difficult to manage how all the different files are
> included.
>
> The idea I had in mind:
> CSS/JS will be managed through configuration (XML). CSS/JS will be targeted
> through routes and it will follow the same layout as the route
> configuration. Create a concept of bundles which are groups of CSS/JS that
> can be assigned to a route. Create concept of a global which will be
> included on every page. Create concept of templates from which routes will
> be allowed to inherit. A plugin will be responsible for including (and
> minifying) js/css based on the configuration.
>
> Sample XML:
> <global>
> <js>
>      <jquery>/js/jquery.js</jquery>
> </js>
> <css>
>     <main>/css/main.css</main>
> </css
> </global>
>
> <about-route>
> <css>
>      <about>/css/about.css</about>
> </css>
> <js>
>      <about>/js/about.js</about>
> </js
> </about-route>
>
> -----
> - Joe

Loading...