yui / skinbuilder Goto Github PK

Chrome 27.0.1453.93 on OS X 10.8.3:

The focus ring is too far top/left

The generated code is wrong:

.pure-skin-mine .pure-menu li a { 0.35em 1.48em; }

To reproduce the config, here is the link:
http://yui.github.io/skinbuilder/?mode=pureindex.html?opt=mine,333333,ffffff,1.06,1,22,1.5&h=0,-99,60&n=0,-99,75&l=0,-99,80&b=0,-99,90&mode=pure

Thank you

Steps to reproduce: Consider http://yui.github.io/skinbuilder/index.html?opt=mine,484E3B,ffffff,1,0.2,0,1.5&h=180,-40,30&n=180,-40,70&l=180,-40,80&b=180,-30,90&mode=pure

Check the horizontal pure menu. The color change for selected / hover items does not cover the entire menu height.

I believe the issue is with the height property of
.pure-skin-mine .pure-menu.pure-menu-horizontal > ul

There are a couple of image paths in the produced output, for example:

background: url(sort-arrow-sprite.png) no-repeat 0 0;
background: url(assets/images/vertical-menu-submenu-indicator.png) right center no-repeat;
content: url(sprite_icons.png);

Better to use one location for all images, and document it in http://yui.github.com/skinbuilder/docs.html

With pure purecss (pure.css) aligned form changes itself into stacked form on mobile or small screen. If I use generated css from skinbuilder (skin.css) then this feature doesn't work anymore.

I tried replace pure.css, load pure.css before skin.css and load pure.css after skin.css. Nothing works. (I hope that right way is to replace pure.css, isn't it?)

When creating a skin, elements like labels, links, etc. do have their colour specified, however plain text inside a div or paragraph remains 'out of sync' with the scheme.


In particular, when using a dark scheme (black background colour), without changing the color property on the body tag yourself, the text will be invisible.

undefined values are non-initialized. they are OK when sliders have been touched.
// Other skin settings
Text contrast: 150%
Border radius: NaN%
Horiz. padding: NaN%
Vert. padding: 98%

Clicking submit buttons redirect the page. Forms in the demo area should have "submit" suppressed.

This issue results from yuilib-css Issue #40
Remove border-radius adjustment from skin template and mapping file

i am trying to load skin builder from url https://yui.github.io/skinbuilder/
I am using firefox v29, chrome v35. Skil builder not getting loaded. when i inspect the console it says

Blocked loading mixed active content "http://yui.yahooapis.com/3.11.0/build/cssgrids/cssgrids-min.css"[Learn More] skinbuilder
Loading mixed (insecure) display content on a secure page "http://jconniff.github.io/skinner/assets/images/favicon.png"[Learn More] browser.js:12350
ReferenceError: YUI is not defined

#2533176 This seems like a Y.Color bug.

http://jsfiddle.net/jeffconniff/cR34u/

When you click on "show YUI widgets", you get a whole reset.

It is expected to retain the current settings.

Hi there ,
i am seeing a border around INPUT fields in IE9 .

any quick fix for this ?

thanks

The website the tool is used on seems to only be configured for one window size. When I reduce the window size on my computer its awkward to use and the format can be confusing. Is there any chance of this getting fixed?

Cheers,

As per preview and my chosen settings, this should change the background color of the page to a dark one. But as you can see, there is no corresponding body declaration.

The button colors also don't match... http://jsbin.com/osecov/1/

Tried pasting the CSS as well using the link...

http://yui.github.io/skinbuilder/?mode=pureindex.html?opt=mine,3175b9,545454,1,1,10,1.5&h=0,-30,60&n=0,-30,75&l=0,-30,80&b=0,-30,90&mode=pure

Currently YUI skin builder is not able skin Y.Console (only 1 skin , yui3-skin-sam, works). Is Skinbuilder only for proper YUI widgets? Or can you add a console to the examples in the tool? Thank you.

Hello there,

i don't understand the handling of the skinbuilder.
Why can't i enter a hex code for a color in the scheme? I have my fixed color codes for the project and i cant guess the colors by adjusting them from the base-color. This is not usable for me.
So please tell me (or us) a way to achieve the exact colors for the different schemes.

Thank you.

Apparently, a placeholder variable does not get replaced by its value.
Generated code :
.pure-skin-mine .pure-menu.pure-menu-horizontal li .pure-menu-children {
background: #ededed; /* Old browsers */
border-radius: {{borderRadius}};
border: 1px solid #dedede;
}

Link: http://yui.github.io/skinbuilder/?mode=pureindex.html?opt=mine,333333,ffffff,1.06,1,22,1.5&h=0,-99,60&n=0,-99,75&l=0,-99,80&b=0,-99,90&mode=pure

example:
http://yui.github.io/skinbuilder/?mode=pureindex.html?opt=mine,63bc2f,ffffff,1,1,10,1.5&h=0,-30,60&n=0,-30,75&l=0,-30,80&b=0,-30,90&mode=pure
Reproduce:
open SB generically
go to items tab
click Show Pure modules link
change master color
go to code tab
click link button
see the url similar to above with ?mode=pureindex.html?opt....&mode=pure

Now you can still go to items tab and click "Show YUI Widgets" link but it will never take you to YUI Widgets. You're stuck in Pure.

When I tried to move the horizontal scroll of margin and padding, I found they aren't moving.

Also the hue and saturation circle sliders are not moving. Please solve these issue.

If you can make the skin builder more simple to use than it will be better.

The color selector for "Edit Page Color" doesn't display new hex values when you click a new color

a scrollable datatable has an extra div class=yui3-datatable-scroll-liner in the header. this div seems to have a padding, which makes the header cols wider than the content cols.

IE 9 win7 Looks like problems with stylesheet output from templates app.js line 236 in updateCSS where the final css is placed in the textarea on the code tab.

IE 8 XP

Without skinbuilder, I can define different sizes of buttons, as described here http://purecss.io/buttons/ ("Buttons with different sizes"):

Then I switched from <body> to <body class="pure-skin-mine"> and added the bm_pure_skin.css file.

Since then all buttons are equally sized :-(

<!-- Formular -->
<div id="test">
    <style scoped>

        .button-xsmall {
            font-size: 70%;
        }

        .button-small {
            font-size: 85%;
        }

        .button-large {
            font-size: 110%;
        }

        .button-xlarge {
            font-size: 125%;
        }

    </style>

    <button class="button-xsmall pure-button">Extra Small Button</button>
    <button class="button-small pure-button">Small Button</button>
    <button class="pure-button">Regular Button</button>
    <button class="button-large pure-button">Large Button</button>
    <button class="button-xlarge pure-button">Extra Large Button</button>
</div>

My Skin goes like this:
http://yui.github.io/skinbuilder/?mode=pureindex.html?opt=mine,3355BA,F2F2F2,0.4,0.08,3,1.5&h=0,-30,60&n=0,-30,75&l=0,-30,80&b=0,-30,90&mode=pure

Any help is appreciated, thanks!

I code all my files through notepad++. I use a JavaScript file to auto populate each page of my site with the proper heading information including the pure-css. Currently the code appears on the pages as follows:

 <link rel="stylesheet" href="http://yui.github.io/skinbuilder/?mode=pureindex.html?opt=mine,D50FDB,ffffff,1,1,10,1.5&h=0,-30,60&n=0,-30,75&l=0,-30,80&b=0,-30,90&mode=pure">

I have also copied the css file presented in the SkinBuilder and it is linked to a file on my site in the following way:

 <link rel="stylesheet" href="css/custom_pure.css">

Here is a screenshot of what the page looks like currently:

Here is a screenshot of the preview given to me by the skinbuilder:

Finally here is a screenshot of what the same part of the website looked like BEFORE trying to upgrade to the custom skin:

For now I will leave it as the last screenshot, but if you can let me know how to properly install the skin or what I may be doing wrong, please let me know, Currently I have switched it to (as of as I was writing this post):

 <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">

Thank you.

pure version 0.3 was released about a month ago.
The current version in the skinbuilder is 0.2.1.

Unlike the rest of the CSS declarations in the code window, the background color is applied unconditionally to the whole body, whether its class is set to the skin name or not.

Need to constrain location using WidgetPositionAlign.

It is not clear even from the documentation how to use the generated css. I downloaded purecss marketing layout, created a new skin using the skin builder and linked the saved css file from index.html. That did not work. What is the right way to use the generated css?

-- H

If you use tab to navigate the controls, there is a point where the primary colour changes to white

Since this is a site for making things look nice you may want to consider using a png or some other lossless image format so that your examples look as great as they should.

On high resolution displays it is really easy to see all the jpg artifacting on them.

When generating a skin named "yui3-skin-summer" for widget Calendar, the background property remains to be the template text shown below:
...
.yui3-skin-summer .yui3-calendar-weekday {
font-weight: bold;
background: {{weekdayHeadBackground}};
...
Guess it should be fixed. Thanks~

Changing the master color for the skin doesn't affect the color of button-close, class="yui3-button yui3-button-close"

Please add a way to tweak complementary color , while complementry color is correct I just want to tweak a bit to get my choice of color.

Hello,
would it be possible to skin entire site not only some components such as forms, buttons, tables and menus? It would be good if this skin builder would influence colors of headings, links and plain text.

Mouse over the items in YUI autocomplete list highlights the item as per .yui3-aclist-item-hover CSS and keyboard navigation highlights the menu item as per .yui3-aclist-item-active CSS. If both done together there are two highlighted menu item at one instance. Is there any way we can merge mouse over and keyboard navigation in autocomplete list.

Fiddle for the issue.
http://jsfiddle.net/gemsgaurav/4eLgauv4/3/
Delete X and press down arrow key and then hover mouse to any other item in the list. You will see two items highlihted simultaneously and both works independently of each other. The desired behaviour will be to different.

http://t.co/loXs3XkwzO Uncaught TypeError: Cannot read property 'schemes' of undefined colorspace-schemes.js:3

{{yuiCssPrefix}}{{skinName}} {{yuiCssPrefix}}menu-children li {
    display: block;
    border-bottom:1px solid black;
}

found in list-responsive.css AKA menus-r.css
The "black" above needs to be a variable.

I'm new to this project and I am wondering if there is a way to edit the documentation. Can't seem to find where to edit it as I would like to change something to further explain something I had to figure out for myself. Thanks

I code all my files through notepad++. I use a JavaScript file to auto populate each page of my site with the proper heading information including the pure-css. Currently the code appears on the pages as follows:

 <link rel="stylesheet" href="http://yui.github.io/skinbuilder/?mode=pureindex.html?opt=mine,D50FDB,ffffff,1,1,10,1.5&h=0,-30,60&n=0,-30,75&l=0,-30,80&b=0,-30,90&mode=pure">

I have also copied the css file presented in the SkinBuilder and it is linked to a file on my site in the following way:

 <link rel="stylesheet" href="css/custom_pure.css">

Here is a screenshot of what the page looks like currently:

Here is a screenshot of the preview given to me by the skinbuilder:

Finally here is a screenshot of what the same part of the website looked like BEFORE trying to upgrade to the custom skin:

For now I will leave it as the last screenshot, but if you can let me know how to properly install the skin or what I may be doing wrong, please let me know, Currently I have switched it to (as of as I was writing this post):

 <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">

I have since added the pure-skin-mine class but it still looks like this:

Thank you.