![]() ![]() I've done very extensive performance testing and optimization for Arctica and in that process I had tested a number of basethemes, so I have some data here that might be interesting for you: I also saw some talk of performance in the other thread. The best documentation at the moment is installing the demo site: Performance I also haven't found time to write any documentation. A drawback of my base theme is that it's much younger than the others so we can expect it to be less stable. That's the gist of what I'm trying to do with Arctica. Whether this is a mobile-first or desktop-first approach depends on what media queries you used in the theme settings form.įor example, this is what I have done with the Arctica demo site with 3 breakpoints: This Skinr integration is also what makes it attractive for admins, because it gives total layout control to admins through the skinr-block form, and it allows you to override layout settings in different levels of mediaqueries. This also bubbles through to the media-query based layout administration in the skinr forms. If right at the bottom of the Arctica theme settings form you change the "Number of media queries" option and save the form, a new theme settings form is generated to reflect your set number of breakpoints (or whatever other mediaqueries you use). It's actually a completely flexible system in terms of mediaqueries because you don't just get to set the media queries, also the number of media queries. Rather it has device inspired defaults, to give novice user an example of what 5 mediaqueries could be used for. Please jump in and correct me with any of these tests, I haven’t used all these base themes recently so I might of missed some deeper features. Fine control over asset loading - A bit?.True responsive layout system - Yep, but device based?.Fine control over asset loading - Interesting SASS based control actually.Breakpoint based visual source order - Partially yes, with Zen Grids, but see the comment below for fuller explanation.True responsive layout system - Yep, with some SASS based control over the grid systems.Breakpoint based visual source order - Nope.What has become obvious this week is that there is currently no existing framework that fulfills all of these design goals. There has been some heated discussion previously on whether we should use a base theme to provide us with this framework and if we do which base theme gives us our required solution? There is no generic use case we can apply to every site. We need control over when and how we load assets based on feature detection. “Mobile friendly” sites that don’t consider page weight are missing the point. Try out an example by Jordan Moore (Webkit only)Ĭurrent thinking is that the CSS Flexbox specification or CSS Regions spec could be the path to this in the far future. Another example is moving the navigation from above the content to below. One example would be to move some of the sidebar content above the main content while letting the rest fall below. We need to respect this and maintain the visibility of this content. Important information appears in the sidebars of. Simply un-floating everything and making them full width is the path to a shoddy mobile design. Changing the visual source order based on breakpoints Tools like or are emerging that allow us to define these responsive grid systems. This is different for every project the content and design is unique. These breakpoints should be based on the content and the design, not current devices. How can the class “grid-8” be reinterpreted to fit into a grid system with fewer columns? We need a way to switch out different grid systems based on the size of the screen. The major problem with adding non-semantic CSS classes in the markup hits when we attempt to make this solution responsive. What we want is a way to handle this layout through a GUI. This constructs a technical barrier and spreads the customisation among many files. It’s a maintainability nightmare and a high level barrier to making changes. The layout is defined by inserting “grid-x” CSS classes into the html using template files and preprocess functions. The current bluecheese theme utilises the common 960.gs CSS framework. ![]() One that would allow us to develop a mobile friendly, responsive design. A lean, tight, and admin friendly theme that lays out a framework for the future. As part of the code sprint in Portland Chris Ruppel, Joel Moore and myself have been discussing a new Bluecheese.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |