Textpattern [future] admin side - proposals

maniqui · 2011-07-02 19:17:52

And let me add a few more:

a built-in, official, default responsive design¹: making Textpattern admin side mobile-friendly from the scratch, and then improving it for desktop. I think this could also do wonders for theming TXP admin side in general.
let’s follow good practices, like progressive enhancement, POSH, avoiding the need to run TXP admin thru a JS engine/parser to make it fully functional…
keeping all JS/Ajax/jQuery/Backbone/you-name-it fanciness away, and add it as the icing of the cake.
minimum, basic (or nothing at all) special support for IE8/IE7/IE6. (this may contradict some of the stuff I proposed just above, I know, hehe).

¹ http://www.alistapart.com/articles/responsive-web-design/

^{Edit: fixed a few typos.}

Last edited by maniqui (2011-07-06 19:59:22)

aswihart · 2011-08-10 20:10:22

My greatest recent discovery in the world of CSS comes from the Ruby world – the trio of Sass, Compass, and Susy. But, there’s no reason we can’t use these just because they are written in Ruby.

Sass makes writing CSS rules a lot faster and enjoyable. Both Sass and CSS files could be included with a Txp distribution. Just always work on CSS using the Sass files, while letting Compass “watch” the Sass file directory. This way, users can customize the admin using Sass, with CSS files replaced automatically as changes are made.

Compass includes a lot of common CSS design patterns so you don’t have to waste time re-inventing the wheel constantly, a big time saver and perfect complement to Sass.

Susy is a Compass plugin for making customized grids, with full control over padding and gutter / column width (no need to hack little changes into someone else’s grid to make it the way you want). It’s the lightest of any grid framework because there is no framework at all (just math) – it generates only the CSS rules needed to make your site look like it’s on a grid.

I guess none of this is really all that crucial to the next Txp admin, but just making sure everyone knows about these powerful tools. I wish I had found them sooner.

Last edited by aswihart (2011-08-10 20:23:21)

philwareham · 2011-08-12 08:47:01

I can see the benefits of Sass (and Compass etc) on a large site and/or where multiple designers and involved – or even a simple way of quickly customising the default theme by moving certain common CSS elements into variables – but I thought a prerequisite is the server having Ruby installed? If so, I don’t think it’s an option for the admin-side CSS handling unfortunately.

aswihart · 2011-08-12 16:12:22

Phil — No, sorry if I wasn’t clear, CSS files are always the end result of working with Sass. You never serve Sass files directly and no one has to install anything to use the CSS files that were made using Sass.

I’m just saying, if Sass was used to build the admin, you could include the Sass directory containing the “source” files in the Txp directory. Sass is immensely cleaner and easier to read and understand than corresponding CSS. It is extremely helpful even for small sites, but obviously a bigger site would benefit even more so.

You only have to install Ruby if you personally want to customize the CSS using Sass / Compass. This takes all of a minute on a Windows PC. Otherwise you could just edit the CSS files directory like in olden days. Sass files can also be generated in reverse from CSS. Sass is not a replacement for CSS, it just makes writing CSS a lot faster and more enjoyable.

Again, just wanted to raise awareness of these optional tools. They have been around for some time, but I just realized what I was missing recently.

philwareham · 2011-08-12 17:26:24

Oh I see what you mean. Sounds interesting, I’ve seen a few other projects provide the sass source along with final CSS too. I’ll add it to the proposal list and investigate further. Cheers.

net-carver · 2011-08-12 20:57:43

aswihart & philwareham

FYI, I’ve been suggesting (to Stef) the addition of a pluggable set of transformations to Txp for some time now.

The basic idea being that on save of any admin-side presentation element (page, form or style) there could be an optional transformation applied to it in much the same way that articles are currently parsed by one of Textile, nl2br or the verbatim (leave text untouched) transformation when they are published or saved.

If Txp had an extensible set of transformations (like text->HTML via textile or markdown, Sass->CSS or even Haml->HTML) then you could use tools like Sass not only for developing the Admin theme CSS but also for your site’s own CSS. You could use textile in your forms or have entire pages passed through some other transformation.

aswihart · 2011-08-13 14:52:51

net-carver — I love your idea. Thanks for bringing up Haml in particular, another product of the Ruby / Rails community. After using these tools the first time, you’ll feel like you’re cheating somehow it’s so efficient, and you don’t lose anything.

Again echoing Phil’s thoughts, it wouldn’t be good to require people to have Ruby installed to do the automatic Sass -> CSS, Haml -> HTML compiling. I know there are compilers written in other languages, perhaps there is a good drop in solution written in PHP we could use.

I think I was somewhat reticent in my earlier comments. Honestly I feel like modern webdev tools like Haml and Sass must be a part of Txp’s future to attract new users. They’re like the hot new toy all the kids are getting this Christmas, wouldn’t want Txp to be left out.

net-carver · 2011-08-13 16:01:36

aswihart wrote:

Again echoing Phil’s thoughts, it wouldn’t be good to require people to have Ruby installed to do the automatic Sass -> CSS, Haml -> HTML compiling. I know there are compilers written in other languages, perhaps there is a good drop in solution written in PHP we could use.

I’m not sure about the compatibility of the various PHP implementations of Sass and Haml compared with the rather more active Ruby implementations — however, I don’t think a deficiency in PHP based implementations of those two examples would negate the usefulness of an extensible set of transforms. I also don’t see why a transform couldn’t make use of a Ruby component if it happens to be available on the system.

I think I was somewhat reticent in my earlier comments. Honestly I feel like modern webdev tools like Haml and Sass must be a part of Txp’s future to attract new users. They’re like the hot new toy all the kids are getting this Christmas, wouldn’t want Txp to be left out.

Making the set of transformations extensible would be the key (unlike the current fixed trio of options for the write-tab). In that way you could provide a PHP wrapper for almost any external transformations as they become available. So not only would you get to play with today’s new toys (if a wrapper is available) but you get to play with the newer toys that are yet to be published.

BTW, forgot to say that the write tab should be able to use any of the available transformations you have installed. So if you happened to prefer Markdown over textile, and had a markdown transformation installed, then you could use it.

artagesw · 2011-08-13 17:18:42

net-carver wrote:

BTW, forgot to say that the write tab should be able to use any of the available transformations you have installed. So if you happened to prefer Markdown over textile, and had a markdown transformation installed, then you could use it.

Something like this, maybe?

maruchan · 2011-08-13 18:57:30

Regarding SASS, I was digging around and found Turbine. Looks amazing.

What a phenomenal front-end development TXP Tip this would make…

@turbine
    plugins:backgroundgradient

#foo
    background-image: linear-gradient(top, #FFF, #000)

outputs this CSS:

#foo {
    background-image: linear-gradient(top, #FFF, #000);
    background-image: -moz-linear-gradient(top,#FFF,#000);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#FFF),to(#000));
    background-image: -khtml-gradient(linear,left top,left bottom,from(#FFF),to(#000));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF,endColorstr=#FF000000,gradientType=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF,endColorstr=#FF000000,gradientType=0)";
}

All compatibility done for you. Yes please…back end themes or front end, take your pick, I’m sure that’d improve quality of life :-)

net-carver · 2011-08-13 20:34:45

artagesw wrote:

Something like this, maybe?

Three cheers! :-D

Is that set of transformations extendible? Can I just drop a transformation into the site structure somewhere, and viola, have it available?

<talks to self> Hey, this is Sam posting, the answer is “yes.” </talks to self>

artagesw · 2011-08-13 22:33:52

net-carver wrote:

Is that set of transformations extendible? Can I just drop a transformation into the site structure somewhere, and viola, have it available?

Yep. It’s just a plugin.

Textpattern CMS

Textpattern CMS support forum

#13 2011-07-02 19:17:52

Re: Textpattern [future] admin side - proposals

#14 2011-08-10 20:10:22

Re: Textpattern [future] admin side - proposals

#15 2011-08-12 08:47:01

Re: Textpattern [future] admin side - proposals

#16 2011-08-12 16:12:22

Re: Textpattern [future] admin side - proposals

#17 2011-08-12 17:26:24

Re: Textpattern [future] admin side - proposals

#18 2011-08-12 20:57:43

Re: Textpattern [future] admin side - proposals

#19 2011-08-13 14:52:51

Re: Textpattern [future] admin side - proposals

#20 2011-08-13 16:01:36

Re: Textpattern [future] admin side - proposals

#21 2011-08-13 17:18:42

Re: Textpattern [future] admin side - proposals

#22 2011-08-13 18:57:30

Re: Textpattern [future] admin side - proposals

#23 2011-08-13 20:34:45

Re: Textpattern [future] admin side - proposals

#24 2011-08-13 22:33:52

Re: Textpattern [future] admin side - proposals

Board footer