Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 105 lines (61 sloc) 5.571 kb
cf71734 @justinmarsan First README
authored
1 MobileReadyFramework
2 ====================
3
9ced70e @justinmarsan Updated the README
authored
4 What is it?
5 -----------
6
7 So far, MRF has been a (dead project) uhm, an experiment, I was searching for a way to make cross devices websites with performances in mind... The result is a "big" framework, Javascript and CSS powered that will allow you (if you give it a try) to make websites loading content depending on the browser's size to avoid big files loading on mobile devices and poor quality graphics on bigger screens.
cf71734 @justinmarsan First README
authored
8
9ced70e @justinmarsan Updated the README
authored
9 The issue right now is that I feel it is too difficult to use, and does more than it should resulting in a huge pile of code. I'm now in the process of making it cleaner and simpler to use, and as soon as I'm happy with the result, I'll be working on a demo website to show it's power (assuming it has some...).
cf71734 @justinmarsan First README
authored
10
37ea15a @justinmarsan More informations
authored
11
12 Usage : Html
13 ------------
14
9ced70e @justinmarsan Updated the README
authored
15 These are classic HTML files, the only "new" thing is the code written in comments. This will be un-commented in JS so that only content you want to show is loaded in the visitor's device.
37ea15a @justinmarsan More informations
authored
16
17
18 Usage : Css
19 -----------
20
9ced70e @justinmarsan Updated the README
authored
21 I decided that trying to make it easy to use in "bare" CSS and LESS was simply too much work, and a bit pointless so thses files will simply be the raw exports LESS creates. If you want to use those, the only files you will have to work in are base.css and style.css
37ea15a @justinmarsan More informations
authored
22
9ced70e @justinmarsan Updated the README
authored
23 base.css is the file loaded "by default", it contains the reset, the mobile style and some more code such as third-party libraries.
24
25 style.css is the complete one with media-queries, and all the device-specific styles.
fbf23e7 @justinmarsan ReadMe now explaining what base.csss is
authored
26
37ea15a @justinmarsan More informations
authored
27
28 Usage : Less
29 ------------
30
9ced70e @justinmarsan Updated the README
authored
31 If (like me) you like LESS, than you'll have the benefit of using separated files to code (while they will be exported in base.css and style.css automatically when compiling). The file names are pretty straight-forward, but here is a short list :
32
33 base.less imports all the files needed for the base style loaded if JS isn't enabled, including reset, mobile and plugins.
34
35 style.less imports all the files of the project including reset, plugin and all the size-specific stylesheets
36
37 mobile.less tablet.less desktop.less bigscreen.less and hdtv.less are size-specific stylesheets and contains the media-queries to target the specified sizes.
38
39 plugin.less contains the styles you may have to/want to use for third-party scripts such as a JQuery plugin.
40
41 For more informations about LESS see http://lesscss.org/
37ea15a @justinmarsan More informations
authored
42
9ced70e @justinmarsan Updated the README
authored
43 If you're on Mac and like GUI applications more than commande line tools, I recommend Less.app ( http://incident57.com/less/ Mac only) which is great and will allow you to use LESS simply without remembering command line stuff (cman, we all know designers prefer pretty simple things that work rather than the Terminal :p ).
37ea15a @justinmarsan More informations
authored
44
45
46
47 Usage : JS
48 ----------
49
1320142 @justinmarsan updated README
authored
50 Right now, I'm using jQuery and LazyRender to hide/show content based on the viewport's size... I'd like to change that and only use raw Javascript to avoid loading jQuery and a plugin, so this will be one of the next upgrade I will work on. In the meantime it's still working.
37ea15a @justinmarsan More informations
authored
51
1320142 @justinmarsan updated README
authored
52 Some comments will be added so that you just have to un-comment if you want to use Modernizr, jQuery or HTML5Shiv.
53
54 Lazy-functions.js is the important file here, it makes sure that the content of your Html files will be showed when needed. It's also contains an Interval, feel free to change the delay to whatever you want, default being to 10 secondes (10000ms). You can also disable to interval, this way the content will not be updated automatically if the user resizes his browser.
37ea15a @justinmarsan More informations
authored
55
56
92d9305 @justinmarsan another mistake... looks like I m tired
authored
57 By default the lazy loading will uncomment element inherently so in the Desktop version, the element loaded in the Tablet version will be loaded too. If you want to avoid this behavior, a variable have been added in render-functions.js (var inheritence), just turn it to false.
e47ce0b @justinmarsan lazy loading inheritance configuration added
authored
58
59
fa28d00 @justinmarsan update the README
authored
60
61 Usage : Design
62 --------------
63
64 The framework by default comes with pre-set media-queries and uses sizes from 978.gs for mobile.less tablet.less desktop.less and bigscreen.less... Unfortunately nothing was provided for bigger than that so I made hdtv.less's size myself.
65
66 You can download templates for those layouts on www.978.gs
67
68
37ea15a @justinmarsan More informations
authored
69 To-do
70 -----
71
1320142 @justinmarsan updated README
authored
72 * Re-write the lazy loading code so that it doesn't need jQuery and a plugin
37ea15a @justinmarsan More informations
authored
73
cf71734 @justinmarsan First README
authored
74 Credits
75 -------
76
77 Made by Justin Marsan ( www.justinmarsan.com )
78 Original idea form Kahlil Lechelt ( http://kahlillechelt.com/ )
3fc5dca @justinmarsan add MIT license
authored
79 Discussion on Forrst ( http://forrst.com/posts/Perfect_All_Around_Bullet_Proof_CSS_Framework_F-gj4 )
4e8a7b1 @justinmarsan some credits added
authored
80 JQuery ( www.jquery.com )
81 LazyRender ( http://webbricks.org/bricks/jQuery.lazyRender/ )
3fc5dca @justinmarsan add MIT license
authored
82
83
84 License
85 -------
86
87 Copyright (C) 2011 by Justin Marsan
88
89 Permission is hereby granted, free of charge, to any person obtaining a copy
90 of this software and associated documentation files (the "Software"), to deal
91 in the Software without restriction, including without limitation the rights
92 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
93 copies of the Software, and to permit persons to whom the Software is
94 furnished to do so, subject to the following conditions:
95
96 The above copyright notice and this permission notice shall be included in
97 all copies or substantial portions of the Software.
98
99 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
100 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
101 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
102 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
103 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
104 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
105 THE SOFTWARE.
Something went wrong with that request. Please try again.