YUILibrary - Open source JavaScript and CSS for building richly interactive software.
Fork YUI on GitHub
  [ 3 posts ]

Dmitri Popov

  • Username: pin
  • Joined: Wed Sep 16, 2009 8:11 am
  • Posts: 4
  • Offline
  • Profile

Bundling CSS with widgets

Post Posted: Thu Nov 12, 2009 4:01 pm
+0-
Hello everybody, looks like '80's dream about reusable GUI components available everywhere just started to become true here! This is amazing!

So.. I got a question while developing simple in-line string editor. Imagine you have an image title on your page or something and if you signed in (different story) you see "Edit" button and can change the title. Simple widget. So you have some state associated with such widget: disabled (while signed out), enabled (while signed in), edit mode. I was shown that the state is easily can be managed with CSS classes (viewtopic.php?f=92&t=1086) thanks Peter Abrahamsen a lot! So I have CSS that in fact contains some... well... operating logic of my widget. See the example:

Code:
/* hide edit button if disabled */
.yui-texteditor.yui-texteditor-disabled button.edit { display: none; }

/* show empty-message if value is empty only */
.yui-texteditor .yui-texteditor-content .empty-message { display: none; }
.yui-texteditor .yui-texteditor-content.empty .empty-message {
   display: inline;
   color: grey;
}

/* show input field and save button in editing mode only */
.yui-texteditor .yui-texteditor-content input { display: none; }
.yui-texteditor .yui-texteditor-content button.save { display: none; }
.yui-texteditor .yui-texteditor-content.editing input { display: inline; }
.yui-texteditor .yui-texteditor-content.editing button.save { display: inline; }

/* hide empty-message and edit button in editind mode */
.yui-texteditor .yui-texteditor-content.editing .empty-message { display: none; }
.yui-texteditor .yui-texteditor-content.editing button.edit { display: none; }


texteditor is the name of my widget. mmm... maybe "stringeditor" would be better? anyway, it's easy to reckon that such widget doesn't work without CSS and in case I share it via CDN or something I should share my CSS too.

So... Is there some way intended to do it? Or maybe I don't understand some simple concept and I just do not need to share CSS?

Dmitri Popov

  • Username: pin
  • Joined: Wed Sep 16, 2009 8:11 am
  • Posts: 4
  • Offline
  • Profile

Re: Bundling CSS with widgets

Post Posted: Mon Nov 16, 2009 9:00 am
+0-
Should I use StyleSheet? http://developer.yahoo.com/yui/3/stylesheet/

Naouak

  • Username: Naouak
  • Joined: Wed Jun 17, 2009 6:39 am
  • Posts: 26
  • Location: France
  • Twitter: Naouak
  • GitHub: Naouak
  • Gists: Naouak
  • IRC: Naouak
  • Offline
  • Profile

Re: Bundling CSS with widgets

Post Posted: Sun Nov 22, 2009 10:05 am
+0-
I believe that the assets dir in your gallery source folder is where you put your css in.
  [ 3 posts ]
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum