Developing Cross Device Framework For HTML/CSS/Javascript Website Development
I'm been working on a framework now for about 6 months to a year that I've been using on my own projects but was thinking of opening it up to the world if the community would find it useful.
This is not a self promotion since I will not be linking to any code or websites, I just want honest opinions on the ideas, and if I'm allowed I will post the code later for review. I'm sure there is room for improvement and bug fixes in the framework.
What does my framework do?
The idea is a framework to organize your projects so when working with teams, finding the correct CSS or JS file is easy to locate. The project also allows your site to be responsive for tablet, mobile & desktop devices. Unlike bootstrap though which allows you to have one code base for all 3 platforms, my framework requires you have 3 separate code bases for each platform.
Wait isn't that worse?
Not necessarily. Sometimes (and in my case), bootstrap does not fit the bill. It's great if you can design a site with the desktop content in mind and shrink it down to mobile, that makes designing the website so much faster! Bootstrap is great for this, however... if you wanted a custom design for the tablet version and the mobile version with completely different content, bootstrap starts to fall apart. Many of my projects required this for design freedom and to vary the content.
I liked websites where as you shrunk the page you could see it change from tablet form to mobile form, and so my framework allows you to essentially have 3 completely different websites for mobile,tablet and desktop but refresh live as you stretch the browser to any size. Basically allowing you to control the content to the device window size in any way you please.
How does it help me stay organized?
One of the big problems in coding I faced before was I would have one large CSS file, with css for the main page, the sub pages, and every other page. This would become a nightmare to sift through the code in the main.css file and find what you are looking for.
My framework proposes that you organize your website by directory and file name conventions.
Utilizing the SLIM framework for nice URLS (like http://hey.com/thisisaniceurl, notice there is no .php or .html at the end, these are SEO friendly URLS), you setup your directory structure like so...
I have a folder for CSS and JS.
Inside each folder is...
Desktop, Tablet, Mobile & Shared folders. Recognizing the screen size my framework will automatically look in these folders to load the correct javascript or css files, and load them in a parent->child fasion.
For example... lets say one of my urls is: mywebsite.com/state/california/laws
The framework looks at the url and first assumes that there will be a state.js file located at js/state.js, it will also assume that there is a folder for 'state'
It then assumes california.js file to load located at js/state/california.js...
and finally it loads laws.js in js/state/california/laws.js
It works the exact same way with CSS or LESS files.
So what's up with state.js and california.js, why would I need these options?
Those are there for situations where you have code that is shared amongst all other files in the subdirectories below.
Lets say they all share a global variable for the statename, you could put that in california.js, and assume that variable will be present in laws.js for use if you wanted.
Just keep in mind that code is loaded asynchronously, so you would want to program your logic accordingly since the order the files are loaded could be any order. Synchronous loading is on the decline since it causes a bad user experience and as such I've programed the framework to be as friendly as possible to this concern.
Using this framework I can very easily find the code related to the state/california/laws page because I just look in laws.js, and if there is any code that relates to all the pages I just look up the next parents .js file.
This also ensures that only the JS/CSS that ACTUALLY needs to be loaded gets loaded making for faster load times and more efficient code IMHO.
How does it load the pages for tablet and mobile and desktop dynamically?
Using a set of functions I created called screen_detector.js and working with SLIM routes, it will automatically inspect the screen size and attempt to load the correct page.
It does this by having a 'super index' page, called screendetector.php. On this page it is a very basic HTML5 setup page, with 3 divs in the body.
<div id="desktop"></div>
<div id="tablet"></div>
<div id="mobile"></div>
Using media queries in the supplied default.css or default.less file it will automatically hide and show the divs, and the content in the divs is filled dynamically using AJAX via the screen_detector.js file.
Behind the scenes if you had the screensize of mobile, it would be doing an AJAX call like... yoursite.com/mobile/index, and the SLIM router knows to route to your 'mobile' template for the page index, and then loads it into the DIV where id="mobile"
The system also ensures it only loads the content into those divs once so you don't have to worry about it loading over and over again, once it loads once you can stretch the screen back and forth and see all the versions of your website easily.
Conclusion
There is many more features I did not list here, like javascript includes, but if people are interested I'll post more of what it can do.
If any of these ideas sound interesting please comment, or if you have any other questions about how it works or features you think would be nice to add. I'm not expecting an enthusiastic response to this right away (if ever), but I do find this framework useful in my own projects and for those that might find it useful also I would love to share!
This is not a self promotion since I will not be linking to any code or websites, I just want honest opinions on the ideas, and if I'm allowed I will post the code later for review. I'm sure there is room for improvement and bug fixes in the framework.
What does my framework do?
The idea is a framework to organize your projects so when working with teams, finding the correct CSS or JS file is easy to locate. The project also allows your site to be responsive for tablet, mobile & desktop devices. Unlike bootstrap though which allows you to have one code base for all 3 platforms, my framework requires you have 3 separate code bases for each platform.
Wait isn't that worse?
Not necessarily. Sometimes (and in my case), bootstrap does not fit the bill. It's great if you can design a site with the desktop content in mind and shrink it down to mobile, that makes designing the website so much faster! Bootstrap is great for this, however... if you wanted a custom design for the tablet version and the mobile version with completely different content, bootstrap starts to fall apart. Many of my projects required this for design freedom and to vary the content.
I liked websites where as you shrunk the page you could see it change from tablet form to mobile form, and so my framework allows you to essentially have 3 completely different websites for mobile,tablet and desktop but refresh live as you stretch the browser to any size. Basically allowing you to control the content to the device window size in any way you please.
How does it help me stay organized?
One of the big problems in coding I faced before was I would have one large CSS file, with css for the main page, the sub pages, and every other page. This would become a nightmare to sift through the code in the main.css file and find what you are looking for.
My framework proposes that you organize your website by directory and file name conventions.
Utilizing the SLIM framework for nice URLS (like http://hey.com/thisisaniceurl, notice there is no .php or .html at the end, these are SEO friendly URLS), you setup your directory structure like so...
I have a folder for CSS and JS.
Inside each folder is...
Desktop, Tablet, Mobile & Shared folders. Recognizing the screen size my framework will automatically look in these folders to load the correct javascript or css files, and load them in a parent->child fasion.
For example... lets say one of my urls is: mywebsite.com/state/california/laws
The framework looks at the url and first assumes that there will be a state.js file located at js/state.js, it will also assume that there is a folder for 'state'
It then assumes california.js file to load located at js/state/california.js...
and finally it loads laws.js in js/state/california/laws.js
It works the exact same way with CSS or LESS files.
So what's up with state.js and california.js, why would I need these options?
Those are there for situations where you have code that is shared amongst all other files in the subdirectories below.
Lets say they all share a global variable for the statename, you could put that in california.js, and assume that variable will be present in laws.js for use if you wanted.
Just keep in mind that code is loaded asynchronously, so you would want to program your logic accordingly since the order the files are loaded could be any order. Synchronous loading is on the decline since it causes a bad user experience and as such I've programed the framework to be as friendly as possible to this concern.
Using this framework I can very easily find the code related to the state/california/laws page because I just look in laws.js, and if there is any code that relates to all the pages I just look up the next parents .js file.
This also ensures that only the JS/CSS that ACTUALLY needs to be loaded gets loaded making for faster load times and more efficient code IMHO.
How does it load the pages for tablet and mobile and desktop dynamically?
Using a set of functions I created called screen_detector.js and working with SLIM routes, it will automatically inspect the screen size and attempt to load the correct page.
It does this by having a 'super index' page, called screendetector.php. On this page it is a very basic HTML5 setup page, with 3 divs in the body.
<div id="desktop"></div>
<div id="tablet"></div>
<div id="mobile"></div>
Using media queries in the supplied default.css or default.less file it will automatically hide and show the divs, and the content in the divs is filled dynamically using AJAX via the screen_detector.js file.
Behind the scenes if you had the screensize of mobile, it would be doing an AJAX call like... yoursite.com/mobile/index, and the SLIM router knows to route to your 'mobile' template for the page index, and then loads it into the DIV where id="mobile"
The system also ensures it only loads the content into those divs once so you don't have to worry about it loading over and over again, once it loads once you can stretch the screen back and forth and see all the versions of your website easily.
Conclusion
There is many more features I did not list here, like javascript includes, but if people are interested I'll post more of what it can do.
If any of these ideas sound interesting please comment, or if you have any other questions about how it works or features you think would be nice to add. I'm not expecting an enthusiastic response to this right away (if ever), but I do find this framework useful in my own projects and for those that might find it useful also I would love to share!
