I think there is no need for a framework for responsive design.
Just a css with imports, and use the "mobile first" way.
@import url('typography.css?v=0.01'); /* Extra Small Devices, Phones */ @import url('s300.css?v=0.01') (min-width: 300px); /* Custom, iPhone Retina */ @import url('s480.css?v=0.01') (min-width: 480px); /* Small Devices, Tablets */ @import url('s768.css?v=0.01') (min-width: 768px); /* Medium Devices, Desktops */ @import url('s992.css?v=0.01') (min-width: 992px); /* Large Devices, Wide Screens */ @import url('s1281.css?v=0.01') (min-width: 1281px);
/* Shared*/ @import url('inkscape.css?v=0.01');
To write, or better to no write too much code we can use the "rem" unit for font size -and others- and adjust this in each s300.css, s480.css... with a line like this: html { font-size: 62.5% !important; //s300.css } changing the proportion in each css file.
Cheers, Jabier.
With a framework, you generally DO write less code, though... especially when considering the nicer pieces of modern websites which include some small action animations which improve usability and the feel of quality of the website.
Here is a good page to quickly see/play with bootstrap for example: http://www.taesup.com/bootstrap/
I recommend bootstrap for this reason, it adds a lot of swish with zero work.
My 2p.
On Thu, Feb 25, 2016 at 9:18 AM, Jabier Arraiza <jabier.arraiza@...2982...> wrote:
I think there is no need for a framework for responsive design.
Just a css with imports, and use the "mobile first" way.
@import url('typography.css?v=0.01'); /* Extra Small Devices, Phones */ @import url('s300.css?v=0.01') (min-width: 300px); /* Custom, iPhone Retina */ @import url('s480.css?v=0.01') (min-width: 480px); /* Small Devices, Tablets */ @import url('s768.css?v=0.01') (min-width: 768px); /* Medium Devices, Desktops */ @import url('s992.css?v=0.01') (min-width: 992px); /* Large Devices, Wide Screens */ @import url('s1281.css?v=0.01') (min-width: 1281px);
/* Shared*/ @import url('inkscape.css?v=0.01');
To write, or better to no write too much code we can use the "rem" unit for font size -and others- and adjust this in each s300.css, s480.css... with a line like this: html { font-size: 62.5% !important; //s300.css } changing the proportion in each css file.
Cheers, Jabier.
Site24x7 APM Insight: Get Deep Visibility into Application Performance APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month Monitor end-to-end web transactions and take corrective actions now Troubleshoot faster and improve end-user experience. Signup Now! http://pubads.g.doubleclick.net/gampad/clk?id=272487151&iu=/4140 _______________________________________________ Inkscape-user mailing list Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
On Thu, Feb 25, 2016 at 02:56:47PM +0000, C R wrote:
With a framework, you generally DO write less code, though... especially when considering the nicer pieces of modern websites which include some small action animations which improve usability and the feel of quality of the website.
Here is a good page to quickly see/play with bootstrap for example: http://www.taesup.com/bootstrap/
I recommend bootstrap for this reason, it adds a lot of swish with zero work.
I don't know about bootstrap, but I'm experiencing endless problems with unnecessary "swish" on my small hand-helds (such as my Nokia N800). Those pages fill up RAM and make the whole thing unusably slow.
Please be wary of decoration and scripting.
-- hendrik
Thanks for the reply, I like for responsive design a css only based solution.
For a aplication could be good use standar UI but for a web I like more a custom style with a optional JQuery/mootools and, maybe, some plugins for advanced things.
Cheers, Jabier.
El jue, 25-02-2016 a las 14:56 +0000, C R escribió:
With a framework, you generally DO write less code, though... especially when considering the nicer pieces of modern websites which include some small action animations which improve usability and the feel of quality of the website.
Here is a good page to quickly see/play with bootstrap for example: http://www.taesup.com/bootstrap/
I recommend bootstrap for this reason, it adds a lot of swish with zero work.
My 2p.
On Thu, Feb 25, 2016 at 9:18 AM, Jabier Arraiza <jabier.arraiza@...3208... r.es> wrote:
I think there is no need for a framework for responsive design.
Just a css with imports, and use the "mobile first" way.
@import url('typography.css?v=0.01'); /* Extra Small Devices, Phones */ @import url('s300.css?v=0.01') (min-width: 300px); /* Custom, iPhone Retina */ @import url('s480.css?v=0.01') (min-width: 480px); /* Small Devices, Tablets */ @import url('s768.css?v=0.01') (min-width: 768px); /* Medium Devices, Desktops */ @import url('s992.css?v=0.01') (min-width: 992px); /* Large Devices, Wide Screens */ @import url('s1281.css?v=0.01') (min-width: 1281px);
/* Shared*/ @import url('inkscape.css?v=0.01');
To write, or better to no write too much code we can use the "rem" unit for font size -and others- and adjust this in each s300.css, s480.css... with a line like this: html { font-size: 62.5% !important; //s300.css } changing the proportion in each css file.
Cheers, Jabier.
Site24x7 APM Insight: Get Deep Visibility into Application Performance APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month Monitor end-to-end web transactions and take corrective actions now Troubleshoot faster and improve end-user experience. Signup Now! http://pubads.g.doubleclick.net/gampad/clk?id=272487151&iu=/4140 _______________________________________________ Inkscape-user mailing list Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
Besides, using advanced style formating like sass present in both Foundation and Bootstrap can be way to helpfull. Also there is the flex grid feature if we can not concern for older browsers. And it can work well with cms like wordpress. And they are modular, if we don't need but just a few features it can be that way
El jueves, 25 de febrero de 2016 4:46:32 P.M. CST Jabier Arraiza escribió:
Thanks for the reply, I like for responsive design a css only based solution.
For a aplication could be good use standar UI but for a web I like more a custom style with a optional JQuery/mootools and, maybe, some plugins for advanced things.
Cheers, Jabier.
El jue, 25-02-2016 a las 14:56 +0000, C R escribió:
With a framework, you generally DO write less code, though... especially when considering the nicer pieces of modern websites which include some small action animations which improve usability and the feel of quality of the website.
Here is a good page to quickly see/play with bootstrap for example: http://www.taesup.com/bootstrap/
I recommend bootstrap for this reason, it adds a lot of swish with zero work.
My 2p.
On Thu, Feb 25, 2016 at 9:18 AM, Jabier Arraiza <jabier.arraiza@...3211...... r.es>
wrote:
I think there is no need for a framework for responsive design.
Just a css with imports, and use the "mobile first" way.
@import url('typography.css?v=0.01'); /* Extra Small Devices, Phones */ @import url('s300.css?v=0.01') (min-width: 300px); /* Custom, iPhone Retina */ @import url('s480.css?v=0.01') (min-width: 480px); /* Small Devices, Tablets */ @import url('s768.css?v=0.01') (min-width: 768px); /* Medium Devices, Desktops */ @import url('s992.css?v=0.01') (min-width: 992px); /* Large Devices, Wide Screens */ @import url('s1281.css?v=0.01') (min-width: 1281px);
/* Shared*/ @import url('inkscape.css?v=0.01');
To write, or better to no write too much code we can use the "rem" unit for font size -and others- and adjust this in each s300.css, s480.css... with a line like this: html { font-size: 62.5% !important; //s300.css } changing the proportion in each css file.
Cheers, Jabier.
Site24x7 APM Insight: Get Deep Visibility into Application Performance APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month Monitor end-to-end web transactions and take corrective actions now Troubleshoot faster and improve end-user experience. Signup Now! http://pubads.g.doubleclick.net/gampad/clk?id=272487151&iu=/4140 _______________________________________________ Inkscape-user mailing list Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
-- Site24x7 APM Insight: Get Deep Visibility into Application Performance APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month Monitor end-to-end web transactions and take corrective actions now Troubleshoot faster and improve end-user experience. Signup Now! http://pubads.g.doubleclick.net/gampad/clk?id=272487151&iu=/4140 _______________________________________________ Inkscape-user mailing list Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
Additional:
The designer of flowed page design has thrown us an update to his thoughts here:
http://eshill.ru/_preview/inkscape/
Although he made it clear he's not interested in being involved in the development or continued development so we can pick whatever interesting ideas from this design as well as the previous one.
Best Regards, Martin Owens
participants (5)
-
C R -
Cesasol V -
Hendrik Boom -
Jabier Arraiza -
Martin Owens