search

hyunsupul / aesop-core

Open-sourced suite of components that empower interactive storytelling in WordPress.
http://aesopstoryengine.com
GNU General Public License v2.0
244 stars 56 forks source link

Full css support in themes #82

Closed bearded-avenger closed 10 years ago

bearded-avenger commented 10 years ago

Add full css styling support out of the box with add_theme_support to be used in themes. Example:

add_theme_support( 'aesop_components_css', array('quote, parallax, document'));

This would create css styling for the three components in the array.

Since there are 13 components there will be 13 css files.

Challenge Merge the css of the files in the array into the main style.css that's enqueued on the front end.

bearded-avenger commented 10 years ago

Is there a better method to this than file_get_contents?

chriswallace commented 10 years ago

Couple of Three ideas.

  1. Load all the CSS stylesheets separately and leave it to the user to minify/concatenate them with a caching plugin.
  2. Use a faux AJAX call to load the CSS as a style link in the <head> and cache the request after it has been generated one time (browser should cache this as well). Generate the CSS based on theme support arguments. Purge the cached object using the after_switch_theme hook to ensure you clean up after the plugin.
  3. Use LESS to load styles based on the arguments the user provides. You could likely use a Json object within the document to declare each argument as a variable for LESS to build styles for. (I'm not entirely sure how many requests this method would eliminate plus its not recommended to generate sides on the client-side on-the-fly).

I would explore option 2.

bearded-avenger commented 10 years ago

Thanks Chris! Yeah #3 gets taxing and haven't had the greatest of luck with server or client side compiling. #2 isn't a half bad idea, just hate to dirty up the head (personal preference).

chriswallace commented 10 years ago

Well, I'm not sure if you've seen what we do in the Worldview theme, but it involves scssphp and regenerating styles when the user changes theme options. We generate a new style.css file in the uploads directory and offer a few filters to load custom SCSS paths and inject new variables and styles that need to be compiled.

The downsides to this approach:

  1. It takes quite a bit of time, especially on local and shared hosting.
  2. You have to include the scssphp library plus your style regeneration code, which means a heavier footprint and additional dependency.

The upsides:

  1. You can use Sass variables and even allow the user to set Sass variables if you need to, which then can be imported into the Sass regeneration process and define styles for the plugin.
  2. The regeneration process only happens in the admin, which is how it should be.
  3. Only one CSS file that lives in the uploads directory.
  4. Themes can hook into YOUR style regeneration process if desired, allowing them to either roll their own styles or inject their own Sass variables that allow them to have more granular control without totally removing Aesop's default styles.
chriswallace commented 10 years ago

We also use this method here.

bearded-avenger commented 10 years ago

I used to do the same thing with a few themes in the past via wp-less from sancho, but the compiler was awfully slow and with too many css lines it would actually fail to compile. Had it connected to compile on the fly with customizer color change. Then had issues with ssl of course because served from a compiled http ref. I loved it when it worked, just didn't perform well enough, consistently unfortunately.

bearded-avenger commented 10 years ago

This feature is making the boat for 1.0.9 out soon.

bearded-avenger commented 10 years ago

Snip for all styles.

add_theme_support('aesop-component-styles', array( 'parallax', 'image', 'quote', 'gallery', 'content', 'video', 'audio', 'collection', 'chapter', 'document', 'character', 'map', 'timeline' ) );