[announcement] FreeStyle TW Theme Generator
PMario
I want to introduce FreeStyle [1]. FreeStyle is a TidlyWiki theme
generator. The main goal is, to have one tiddler and a CSS grid
system, that can be imported into your TiddlyWiki.
It works with the same concept, that David Lester introduced with his
Tiddly960. Rows, columns and boxes. But it uses the emastic grid
system and drag and drop to generate the layout. You can use em, px, %
width and mix it, if you need to.
There is a short tutorial which I strongly recomend.
FreeStyle is not intended to be used to put your working stuff into
it. It should be used to play with the layout. Create a theme and
import this theme to your working TW.
Second:
=======
As I started to use TW I found it very hard to implement plugins, that
need tweaking of xxTemplate. That's why I think the box concept can
solve this problem for new users. A plugin programmer can design a
row,col,box tiddler, whatever is needed for the plugin and release it
together with the plugin. (Would be a great app for TiddlySpace :)
Third:
======
Putting together the StyleSheet for FreeStyle I discovered, that there
is a battle between the user(me) and the core. I hope this will be
easer in TW5. And I hope the FreeStyle StyleSheets can be simplified.
(todo)
Fourth:
=======
I tried to describe as much as needed inside every project, designer,
row, col, box tiddler, that I have created. If you generate your own
rows, cols, boxes, I strongly recomend to describe the function of
your element. There is a default !Function section which can be used
for this.
Fifth:
======
Feedback will be very welcome. The good and the bad.
Have fun!
kind regards
Mario Pietsch
[1] http://FreeStyle.tiddlyspot.com
Morris Gray
> Feedback will be very welcome. The good and the bad.
> Have fun!
Well done Mario. Thanks for your efforts in making this new concept
just a little more accessible. I, for one, appreciate the thought and
work you've put into it, it's very professional.
Morris
Tobias Beer
I tried to play around with it but got stuck when I selected the last
theme on the dropdown-list ("arPresentationTheme). Since the main menu
(on top) is change, I can't quite seem to figure out on how to get
back to select some other theme... in other words, to reset options.
Not to forget that the searchbox is gone too. I know, I could delete
all cookies, but that's not quite the right way, is it.
Tobias.
PMario
the PresentationTheme is old style. open any tiddler, the apply button
is in the tiddler toolbar.
-m
Tobias Beer
As fot applying a theme... got it. I totally overlooked that low-
constrast toolbar.
After having played a bit more with freestyle, I have a few questions.
Would it make sense to extent the drop functionality, such that one
can not only set the name of that template element but also its main
parameter(s), e.g. the width (or the corresponding emastic shorthand)?
You could easily implement a delimiter like "##" so one could input
"name##width".
Why did you make it a two-click process to get to that "edit" button
for the template-code? Are you intending to add more features to that
top-left corner of the template-element-header? Otherwise.. why not
open the code directly in edit mode?
If I understand right, this is intended to be a designer to facilitate
the creation of a template(-system?) which - in order for it to run -
is then to be imported into a kind of emastic-ready-tiddlywiki
(leaving the designer-bulk outside your "realworld tw")... which you
prepare by importing what is listed in "needed components".
To understand the concept better, does a single "template" then
consist of several template-element-tiddlers depending on, calling for
and embedding each other upon display? ...or, would that rather be one
big template to be imported? My current guess is to import all tiddler
created during the design process ...all that which I thus gave a
certain template-name, correct?
Also, is it possible with this emastic system to "live-swap"
templates, e.g. to call an alternative "left-column" depending on a
certain tag? If yes, how?
In my thinking, all these boxes "only" make much sense if there are
ways to trigger "context sensitive" content. Meaning, for example, if
I had some context-box in a right column and I opened a certain
tiddler in what one might call the main-content-box, I would want for
that context-box to be flexible, such that its content depends on what
is displayed in the main-content-box. One could easily imagine
something alike for a kind of context-sensitive topmenu. Without such
context-sensitive triggering, the whole emastic grid seems to merely
display static content. Well, one might try and do some DOM-inspection
in the respective box to figure out which tiddler is being displayed
in another one (and their properties, such as tags). After all, this
context-sensitivity is what I would consider the main reason for using
such a template system.
Hope I didn't bombard you with too many questions. ;-)
Tobias.
PMario
Very long answer.
On Feb 9, 9:49 am, Tobias Beer <beertob...@googlemail.com> wrote:
> As fot applying a theme... got it. I totally overlooked that low-
> constrast toolbar.
I don't want the toolbar, to disturb the presentation.
> After having played a bit more with freestyle, I have a few questions.
As I wrote, any feedback is welcome. Thx. If I don't know, how others
see the project, there will be no improvement. It works for me :)
> Would it make sense to extent the drop functionality, such that one
> can not only set the name of that template element but also its main
> parameter(s), e.g. the width (or the corresponding emastic shorthand)?
See the UUUps down there first:)
There are 2 possibilities to edit the content.
1) The dropdown, that comes with the pen symbol, if you look at
the code of the portlet. Everything written there goes back to the
##Code section. At the moment you can't change the name of an element.
2) The box names are wikified. If you click them, the tiddler is
displayed.
*Function: .. I inserted this seciton, because I got lost several
times, when I didn't describe the function of an element.
*Code: .. There can be any code, like it is in the different TW
templates. See (1)
*List .. List of eg: boxes that are part of a colomn. This stores the
elements.
> You could easily implement a delimiter like "##" so one could input
> "name##width".
Code: example
*ColTopMene: <div class='dp100 topMenu'><list /></div>
**class='dp100' .. defines the width
**topMenu .. the class for CSS definition in stylesheet.
**<list /> .. gets replaced by the content of tiddlers listen in !List
more details can be found here:
[1]http://code.google.com/p/emastic/wiki/Tutorial
[2]http://code.google.com/p/emastic/ Demo section
UUUPs: As I had written the above text already, I understood your
sugestion, but I leave the text there.
eg: NewBox Popup got the name: NewBox##dp60##FunnyTiddler
Result: <div class='dp60' tiddler='FunnyTiddler'></div>
-> good sugestion !:)
> Why did you make it a two-click process to get to that "edit" button
> for the template-code? Are you intending to add more features to that
> top-left corner of the template-element-header? Otherwise.. why not
> open the code directly in edit mode?
The "down arrows" are intended to get an overview of the code
sections.
I thougt, the edit popup would be a good idea. (nice effect). But now
I know, that describing the function of a element is very important I
think editing the whole tiddler is more effective.
The button is still there because I does an automatic refresh.
> If I understand right, this is intended to be a designer to facilitate
> the creation of a template(-system?) which - in order for it to run -
> is then to be imported into a kind of emastic-ready-tiddlywiki
> (leaving the designer-bulk outside your "realworld tw")... which you
> prepare by importing what is listed in "needed components".
Yes.
I think I will prepare a default TW for that :)
> To understand the concept better, does a single "template" then
> consist of several template-element-tiddlers depending on, calling for
> and embedding each other upon display? ...or, would that rather be one
> big template to be imported? ..
One big Template, that is generated if you click "Create FreeStyle
Theme". eg. DefaultTheme is the whole theme. Because I started to work
with MonkeyPirate TW It has exactly that structure, to be used with
SelectThemePlugin.
> .. My current guess is to import all tiddler
> created during the design process ...all that which I thus gave a
> certain template-name, correct?
eg: You want a Theme named: MyTheme.
The "New FreeStyle Project" button asks for a name: "MyTheme"
and creates: "MyThemeProject"
The "Start FreeStyle Project" creates: "tmpDefaultThemeProject"
And finally the "Create FreeStyle Theme" button creates the "MyTheme"
tiddler. That is the one of desire!!
I wanted to automatically delete the tmpXXX tiddler. But it turns out,
that it is easy to find an existing project by typing "tmp" into the
GotoBox and get a list of all existing "playgrounds".
> Also, is it possible with this emastic system to "live-swap"
> templates, e.g. to call an alternative "left-column" depending on a
> certain tag? If yes, how?
I think, this is not a matter of the grid system. I could extend my
SelectStoryMacro (see the blue sqares in MainMenu). Or you can use
Erics TaggedTemplateTweak, to switch the template, by a certain tag.
> In my thinking, all these boxes "only" make much sense if there are
> ways to trigger "context sensitive" content. ..
Yes in my thinking too. But I think, it needs some more plugins. I
didn't find the core functions for that.
> .. Meaning, for example, if
> I had some context-box in a right column and I opened a certain
> tiddler in what one might call the main-content-box, I would want for
> that context-box to be flexible, such that its content depends on what
> is displayed in the main-content-box. ..
yes
>..One could easily imagine
> something alike for a kind of context-sensitive topmenu. Without such
> context-sensitive triggering, ..
yes
> ..the whole emastic grid seems to merely
> display static content. ..
Since FreeStyle can use _any_ grid system, to make the whole TW UI
more flexible, I don't second this statement. I think "It's merely
a matter of time, to have more functions".
Have a look at EditTemplateDesigner. Move the taggerBox on top of the
body. create a new theme. reload. done.
Or tmpDefaultThemeProject. You can drag the left menue column to the
right side. Drop the index panel below the main menu if you want.
Create a new theme. reload. that's it. I have read many posts about
these topics. It's easy now.
The only thing to do is, to get some more boxes with definitions for
the different plugins.
AND my maingoal: get FreeStyle working an TiddlyWeb / TiddlySpaces
for group editing.
> .. Well, one might try and do some DOM-inspection
> in the respective box to figure out which tiddler is being displayed
> in another one (and their properties, such as tags). After all, this
> context-sensitivity is what I would consider the main reason for using
> such a template system.
There is a very nice feature in the TW5 alpha, where a View/
EidtTemplate has an accapt parameter. (eg: accept documentation) What
I prefere, would be a dynamic link, between any tiddler list and any
box.
eg:
Drag a tiddler from timeline to the box.
The box tells you: "This tiddler has 3 tags: X Y Z!. If you drag the
next tiddler for 20 px in any direction and release it, it will be
opended by me! Which tag is for me?" That would be a cool function.
Some thoughts
Or a chain of boxes, that work together, because the life in the same
column. eg:
<div class='workWithBoxMaster' tiddler='##AnySection' macro='view
text'></div>
<div class='workWithBoxMaster' tiddler='##AnySection' macro='edit text
with: MinEditTemplate'></div>
Adding a Viewtemplate to any box (but I didn't figure out, how that
works)
> Hope I didn't bombard you with too many questions. ;-)
No problem. Your (and more) feedback is very welcome!
kind regards
Mario
PMario
FreeStyle updated to 0.2.00 [1]. New basic version[2] of TW with
emastic grid available at tiddlyspot. But a problem arises see [3].
Need help for this, because I don't understand the refresh machanism
very well.
kind regards Mario
[1] http://freestyle.tiddlyspot.com/#About%26Download
[2] http://freestyle-emasctic.tiddlyspot.com
[3] http://groups.google.com/group/tiddlywiki/browse_thread/thread/8a7f6203a85baa53?hl=en
PMario
There is a new usecase for some FreeStyle themes, that I put online,
to show a little bit of the power, what can be done.
Inspired by a TW tread. [2]
regards Mario
[1] http://apm-plugins.tiddlyspot.com/
[2] http://groups.google.com/group/tiddlywiki/browse_thread/thread/e76793eb2b89428e?hl=en
On Feb 11, 3:40 pm, PMario <pmari...@gmail.com> wrote:
> Hi there,
>
> FreeStyleupdated to 0.2.00 [1]. New basic version[2] of TW with
> [3]http://groups.google.com/group/tiddlywiki/browse_thread/thread/8a7f62...
whatever
You might want to translate that into English, considering most people
around here use English.
w
On Feb 21, 3:31 pm, PMario <pmari...@gmail.com> wrote:
> Hi,
>
> There is a new usecase for some FreeStyle themes, that I put online,
> to show a little bit of the power, what can be done.
> Inspired by a TW tread. [2]
>
> regards Mario
> [1]http://apm-plugins.tiddlyspot.com/
> [2]http://groups.google.com/group/tiddlywiki/browse_thread/thread/e76793...