User Tools

Site Tools


products:stewcss

stewcss

This is a work in progress (January 2015)

Problem

In general terms…

Fox was originally designed in a different world. Today we are mobile.

Unless I mistake, the current system imposes a huge bandwidth load on mobile devices. Caching css by pages, the sum total stylesheets of all pages is 4-6 megabytes. Where a single style sheet containing everything possible is about 280K.

It's really unpleasant to work with fox themes and styles. There's no unified approach, little documentation, and many bugs.

Upgrade from 1.6 was disastrous and the site never fully recovered. I will never know whether the source of my confusion was a botched conversion, a buggy product, or my own sweet ignorance. The current state sucks.

Fox was designed to support css from third party modules, a core and a set of libraries. Styling comes from everywhere in the file system, can be machinated by endless hooks and plugins, and output is like a spray gun.

Fox has abandoned V3, and we do not want to go to V4. Let's solve this on our own.

Make fox responsive We set aside our plans for a front end in extJS and tackle it with css.

Solution

We are not going to upgrade ever again. We'll stay with V3 and make it our own. But we never close the door. We need to make a few core mods here, so if you want to preserve the original, have a look at stewload to override the core.

We need a responsive website. We have no further need of anything from fox. We can simplify.

Enter compass and SASS

Used to be this was a “nice to have” idea.

But lately Magento and sencha have joined the team. Long term, we may unify our stylesheets. Short term, we get a wealth of media query and styling goodness.

It's no longer the cool kid on the block. CSS preprocessors make sense. Lots of fantastic free resources out there. Spend an hour browsing, check the references given below.

Building with compass and SASS

We have a utility that scans the module folder and copies the css to our theme sass folder. Based on the code we wrote years ago at http://stewfoxdev.com/v3/index.php?do=/forum/thread/28/combine-and-minify-javascript-and-css/view_55/

We dumped the styles from our current theme into our new sass environment.

The end result is a multitude of files, the names and folders will be familiar to any fox developer. It's all the css from your module folders, copied into a corresponding sass folders, and renamed from css to sass.

Now we are ready to spit out one single css file for fox.

We plan on these builds:

  • auto - responsive to current viewport size
  • small -
  • medium -
  • large -
  • xlarge

There's a hoot of discussion out there about choosing names. I'm gonna try going with clothing so I can keep adding x's. x-small, xx-small, xxx-small etc. Have not decided on actual breakpoints yet. Will start with base5.

Surprisingly enough, this work beautifully. We turn on compass watch, turn off the fox cache, and we can build stylesheets for all viewport sizes.

Too bad we suck at design. If I was a theme developer, I would modify the workflow to generate css back into place. Then by changing a few variables in sass I can crank out endless styles and themes.

Kicking the css out of fox

Fox was designed to load css from many places in many ways. It's a feature.

It is a feature we could do without now. It's just too confusing for us. We want to see all our styles together in one sheet so we are clear on specificity, so we can spot the bloat and prune the blight.

We cannot explain theme inheritance. After so many years, it is time to stop trying. Because a site can only have one style active at any time, who cares? Users would freak out if we changed styles. How much simpler to say “this is my theme and my style”. Let's match implementation with functionality: a site has a theme and a style. All the rest is for developers, vendors, and marketers.

As always, wrap changes in a conditional, so that we can revert to standard behaviour by a setting. In this case we'll use

define('SKIP_CSS',true); // input single theme+style and do not output any css

In the template class we add this function to test for our setting:

  • avoid messing with admincp and
  • only if we have a defined flag set true.
    // dsm 5 jan 15 : do not output any css
    public function includeCSS()
    {
        if (Phpfox::getLib('request')->get('req1')=='admincp')
        {
            return true;
        }
        
        return !defined('SKIP_CSS') OR  !SKIP_CSS;
    }

So we can revert to “normal” when we need to. Because one day we will wake up and want a new style. Kicking the CSS out of fox just simplifies getting started for me. I don't have to worry about bugs and distractions coming from that end of the fox.

The switch will serve us when we need to go back and check how it worked before! And prove to us we have not broken the beast.

one theme, one style

To solve this we use a sledgehammer in the template constructor. Let fox do all that stuff to select which theme and style is in use, then overwrite it with hard-code values at the last moment:

if ($this->skipCSS() )
{
  $aTheme=array(
    'style_id' => 6,
    'style_parent_id' => 0,                 // NO PARENT !
    'style_folder_name' => 'mystyle',
    'theme_folder_name' => 'mytheme',
    'theme_parent_id' => 0,                 // NO PARENT !
    'total_column' => 2,                    // SHOULDNT THIS BE THREE ?
    'l_width' => 180,
    'c_width' => 520,
    'r_width' => 250,
    'parent_style_folder' => 'mystyle'
  );
}
$this->_sThemeFolder = (isset($aTheme['theme_folder_name']) ? $aTheme['theme_folder_name'] : 'default');
$this->_sStyleFolder = (isset($aTheme['style_folder_name']) ? $aTheme['style_folder_name'] : 'default');									
$this->_aTheme = $aTheme;

Notice the three widths, the classic website storefront. We can probably ditch those…

one output, one stylesheet

There are five or six places to wrap output in a conditional. All are confined to the template class. Here is the general idea:

            if ($this->includeCSS()) // dsm 5 jan 15
            {
                if (!empty($aCacheCSS))
                {
                    $sCSSUrl = Phpfox::getLib('file.minimize')->minify($aCacheCSS, $sQmark . 'v=' . $iVersion, false);
                    $sData .= "\n\t\t".'<!-- Minified --> <link rel="stylesheet" type="text/css" href="' . $sCSSUrl . '" />' . "";
                }
            }

Making fox sassy

We have stopped fox from outputting any css, and we have generated our own file using SASS.

Now to put them together. We add this line to our main template:

<link rel="stylesheet" type="text/css" href="./theme/frontend/mytheme/style/mystyle/css/{$viewport}.css?v={$cachebuster}" />

Cachebuster is the standard fox stuff:

template->assign('cachebuster',  $this->getStaticVersion() );

Viewport is a user custom variable.

template->assign('viewport', PhpFox::getService('custom')->getUserViewport() );

The user setting for viewport was added to custom fields as a small text field. You may want to feature it or remove it from yur user profile temlplates once you've created it in admincp.

Add code to fetch it in the custom class:

    // returns auto, small, medium, large or desktop.
    public function getUserViewport()
    {
        $aVal = $this->database()->select('cf_viewport')->from(Phpfox::getT('user_custom_value'))->where('user_id=' . Phpfox::getUserId())->execute('getSlaveField');

        return $aVal ? $aVal : 'auto';
    }

If you are concerned about “hacking the core” then put it in your own service or look into stewload.

To change viewports on the fly I added this code to the front end template:

<form method="POST" action="./static/steward/setviewport.php">
    <select name="viewport">
        <option value="none">--select viewport--</option>
        <option value="auto">Auto</option>
        <option value="small">Small</option>
        <option value="medium">Medium</option>
        <option value="large">Large</option>
        <option value="desktop">Desktop</option>
    </select>
    <input type="submit">
</form>

The essential duty of setviewport is:

   Phpfox::getLib('database')->update(Phpfox::getT('user_custom_value'), array('cf_viewport'=>$sViewport), 'user_id=' . Phpfox::getUserId());
   
Phpfox::getLib('url')->send();

Wrap up

So now we have a stylesheet switcher on the front page.

I've followed the caching logic and not found an issue yet. Any number of users can switch between any number of viewport stylesheets.

Users can choose which viewport to see the site with.

Most will not, and the “auto” stylesheet will do.

Remember that switching viewports does not change the size of your screen. Ha.

So far so good. I think I have built myself a way to go forward with fox. The door is not closed, I can flip switches and go back. And a window of opportunity has opened with sass.

My Notes

Utility to update sass from fox (gensass) beefed up to update for new module.

Hey this is weird. We could make an admincp interface. https://github.com/sensational/sassphp

Is it necessary to create the sass environment? What if we operated in situ using the php sass with a web interface. make it simpler for others to follow along. Hmm, Yes, this can be done. But do we care? Not for us. Let's do the first round the way we started.

PROBLEM SASS cannot spit into separate stylesheets! We thought that would be a given. Google for “@target”, it's an issue, it will be implemented maybe, and there are workarounds. Disappointing but we have enough to chew on for now, we can get to it. Ah. Here. https://github.com/BPScott/breakup now in use instead of breakpoint, this is perfect.. no it ain't! We lose $breakpoint-to-ems. Defer for now

Here is an issue. We want our logo to be XXXXXX on desktop and XX on mobile. Those two phrases should come from the database. Variations of this issue may occur later too. Without phrases we would use the @content directive right in the stylesheet. How shall we accommodate localization?!

to do

  • If not logged in the getUserViewport must use a cookie or session var
  • cf_viewport should be drop-down multi-select with admincp config for entries

db changes to be back ported

disabled stewutx (missing sidebar on forum)
Default theme and style ALL OFF
Default mytheme ALL ON.
Restore video menu
Disable MOBILE module

References

Images

Images http://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/

http://adaptive-images.com

Work started at SVN-2015-377-BETA ./static/steward/pic.php

Credit to Teamwurkz

The work that I have shared here was inspired by Teamwurkz. They contributed a free theme to the community that demonstrated how a responsive theme can breath new life into fox. Thank you Teamwurkz!

http://unity.moxi9.com/product/587/base5

http://www.teamwurkz.com/

http://scripttechs.com/forum/thread/2102/is-templatemechanic-dot-com-still-in-business/

More

products/stewcss.txt · Last modified: 2015/03/18 15:22 by steward