Return-Path: X-Original-To: apmail-flex-dev-archive@www.apache.org Delivered-To: apmail-flex-dev-archive@www.apache.org Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by minotaur.apache.org (Postfix) with SMTP id 50C0411724 for ; Sun, 13 Apr 2014 12:52:29 +0000 (UTC) Received: (qmail 99330 invoked by uid 500); 13 Apr 2014 12:52:28 -0000 Delivered-To: apmail-flex-dev-archive@flex.apache.org Received: (qmail 98955 invoked by uid 500); 13 Apr 2014 12:52:27 -0000 Mailing-List: contact dev-help@flex.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@flex.apache.org Delivered-To: mailing list dev@flex.apache.org Received: (qmail 97900 invoked by uid 99); 13 Apr 2014 12:52:23 -0000 Received: from nike.apache.org (HELO nike.apache.org) (192.87.106.230) by apache.org (qpsmtpd/0.29) with ESMTP; Sun, 13 Apr 2014 12:52:23 +0000 X-ASF-Spam-Status: No, hits=-0.7 required=5.0 tests=RCVD_IN_DNSWL_LOW,SPF_PASS X-Spam-Check-By: apache.org Received-SPF: pass (nike.apache.org: domain of harbs.lists@gmail.com designates 74.125.83.47 as permitted sender) Received: from [74.125.83.47] (HELO mail-ee0-f47.google.com) (74.125.83.47) by apache.org (qpsmtpd/0.29) with ESMTP; Sun, 13 Apr 2014 12:52:18 +0000 Received: by mail-ee0-f47.google.com with SMTP id b15so5595945eek.20 for ; Sun, 13 Apr 2014 05:51:56 -0700 (PDT) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=gmail.com; s=20120113; h=content-type:mime-version:subject:from:in-reply-to:date :content-transfer-encoding:message-id:references:to; bh=i7iMEJEgLDp6iGfyKLVLxxWHygW2MVQy/FPJnOrBa2I=; b=MdUDevWg2l7iNG7D1bU1QOy1G23bbpyF8kbt6MJRCvqjm/W2EiOSdRXi8s4Pc2FpGD wRIaSdaiOndLVdZ596wmnkAyzSBJBwUkSG1CYxPwEFA4om8mj2QPE0KIfbWI9nbStzPL WzVFkUL4+4iJt2wMkH6o1ghSYdFQ4XpSbzDLtGGTjaFeYOInkNubZvsu9C0Rcp69sgrq 9QNMIF3QOiJ7HqqtVxXeaQgeqkPlU6dvCjECwoTaUD7lIbGi6HRnZ+CiXKuDUyY3v4rO K9jcx5QgXMeiLygw0Hy9QqOxxXMgcG+vW2+ygBw9e3QAVtqrHCyHD1bX4VTDsAeShYa5 e/Zw== X-Received: by 10.14.95.8 with SMTP id o8mr44050342eef.15.1397393516498; Sun, 13 Apr 2014 05:51:56 -0700 (PDT) Received: from [192.168.2.100] ([77.127.198.230]) by mx.google.com with ESMTPSA id p8sm32923468eef.26.2014.04.13.05.51.55 for (version=TLSv1 cipher=ECDHE-RSA-RC4-SHA bits=128/128); Sun, 13 Apr 2014 05:51:55 -0700 (PDT) Content-Type: text/plain; charset=windows-1252 Mime-Version: 1.0 (Apple Message framework v1283) Subject: Re: [FlexJS] CSS Box Model From: Harbs In-Reply-To: Date: Sun, 13 Apr 2014 15:51:53 +0300 Content-Transfer-Encoding: quoted-printable Message-Id: References: <091B6523-0EF4-496B-ADED-B654A78D0609@gmail.com> <1AB1855D-A56E-442B-B9CE-A7E0F9D2CA27@gmail.com> To: dev@flex.apache.org X-Mailer: Apple Mail (2.1283) X-Virus-Checked: Checked by ClamAV on apache.org Yes. Flexbox is really good for relative layout. HTML is working hard at = catching up with what we take for granted in Flex=85 ;-) Of course the problem is Internet Explorer: = http://caniuse.com/#search=3Dflexbox There's some great info on css-tricks.com on flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ and here's a video that gives you an idea what you can do with it: http://css-tricks.com/video-screencasts/131-tinkering-flexbox/ Harbs On Apr 13, 2014, at 11:38 AM, Carlos Rovira wrote: > Hi, >=20 > I just discover this: >=20 > http://weblog.bocoup.com/dive-into-flexbox/ >=20 > "Flexbox is a new layout mode in CSS3 that is designed for the more > sophisticated needs of the modern web" >=20 > and this: >=20 > http://devbryce.com/site/flexbox/ >=20 > someone was aware of this? btw, curious name "flex", isn't it? ;) >=20 >=20 >=20 > 2014-04-10 15:47 GMT+02:00 Peter Ent : >=20 >> This is good information. >>=20 >> To keep things simple for the time being, the JS side pretty much has >> everything wrapped in its own
with a couple of exceptions, I = think. >> The display mode is always block. We pretty much want the developer = to >> have control over position just as they do with Flex. Containers with >> layouts will implement the layout in JavaScript as best as possible. = I'm >> sure we will all be doing some tuning on this front. >>=20 >> I'm not sure about SVG and skins and such so keep the discussion = going. >>=20 >> Peter Ent >> Adobe Systems >>=20 >> On 4/9/14 8:54 PM, "jude" wrote: >>=20 >>> One more thing to keep in mind is display modes. There are some such = as >>> inline(?) that ignore width and height values and instead size to = fit. >>> Then >>> there are some, like block, that fill all available space in a = container >>> pushing all other elements to the next line. Then there is = inline-block >>> which allows you to set the width or height and still remain inline. >>>=20 >>> I've also encountered a case where text has padding above it and = this >>> increases the larger the font size. Flash does not do this (in my = tests). >>> The text is always flush against the top of it's own container. But = in the >>> browser (or merely in my tests) it's more like 1-10 px more offset = from >>> it's container. This partially has to do with line-height. This is = the >>> current problem I'm trying to solve and have a couple of solutions = which >>> partially work but there is still a small amount of padding and = haven't >>> been extensively tested. Feel free to email me or better yet = continue to >>> post to the list. >>>=20 >>> Another thing to consider is if it's possible to use different skin = types. >>> Since there are different bead types, you could have a view that = takes a >>> different approach to how it renders the visuals using browser = controls >>> (vanilla) that point to a style name or something like pseudo facade >>> controls that are based on static images (that don't stretch) or = dynamic >>> pseudo controls that drawn on the canvas or with svg (that can = dynamically >>> be resized and continue to appear correctly). >>>=20 >>>=20 >>>=20 >>> On Tue, Apr 8, 2014 at 7:53 AM, Peter Ent wrote: >>>=20 >>>> This is an interesting idea. I'll try it out. >>>>=20 >>>> Thanks! >>>> --peter >>>>=20 >>>> On 4/8/14 7:44 AM, "Harbs" wrote: >>>>=20 >>>>> It might be a good idea to prefix all Flex CSS with a Flex prefix = so it >>>>> does not step on settings for the rest of the web page. >>>>> For this example something like this: >>>>>=20 >>>>> .apacheFlex *, . apacheFlex *:before, . apacheFlex *:after { >>>>> -moz-box-sizing: border-box; -webkit-box-sizing: border-box; >>>>> box-sizing: border-box; >>>>> } >>>>>=20 >>>>> As long as the base div of the application has an apacheFlex = class, >>>> that >>>>> should isolate the css to the app. >>>>>=20 >>>>> On Apr 8, 2014, at 12:59 PM, wrote: >>>>>=20 >>>>>> I believe the only thing to lookout for when using the global(*) = on >>>> the >>>>>> border-box is that it will affect images too. Meaning it will = push >>>>>> border size and padding inside of its bounding area and scaling = the >>>>>> image down. Setting the images back to a regular box should = work. >>>>>>=20 >>>>>> -Mark >>>>>>=20 >>>>>> -----Original Message----- >>>>>> From: Peter Ent [mailto:pent@adobe.com] >>>>>> Sent: Monday, April 07, 2014 2:46 PM >>>>>> To: dev@flex.apache.org >>>>>> Subject: Re: [FlexJS] CSS Box Model >>>>>>=20 >>>>>> Thanks your help and insight. After some experimentation, the >>>> border-box >>>>>> model is how we'll proceed. Thus .width and .height properties = will >>>> be >>>>>> the >>>>>> bounding box for the component with border and padding inside = this >>>> box. >>>>>>=20 >>>>>> We'll take the margin information under advisement, but I think I >>>> agree >>>>>> with this, too. >>>>>>=20 >>>>>> --peter >>>>>>=20 >>>>>> On 4/7/14 10:32 AM, "jude" wrote: >>>>>>=20 >>>>>>> Welcome to HTML world. I've been mulling over this for the last = few >>>>>>> months. >>>>>>> I agree that the border box model would be closer to what people >>>> would >>>>>>> expect. The default box model is based on the original use case = of >>>>>>> layout >>>>>>> and position of documents not applications. The border box model = was >>>>>>> specifically made to give you more control over the layout and >>>> design. >>>>>>>=20 >>>>>>> Fortunately, it's at a point you can use it, >>>>>>> http://caniuse.com/#search=3Dborder-box. >>>>>>>=20 >>>>>>> You can enable or disable it or box model with: >>>>>>>=20 >>>>>>> *, *:before, *:after { >>>>>>> -moz-box-sizing: border-box; -webkit-box-sizing: border-box; >>>>>>> box-sizing: >>>>>>> border-box; >>>>>>> } >>>>>>>=20 >>>>>>> Also, for an interesting insight into what it does add an = outlines: >>>>>>>=20 >>>>>>> *, *:before, *:after { >>>>>>> outline:1px dotted red; >>>>>>> } >>>>>>>=20 >>>>>>> There have been talks about using SVG for components visuals and = I >>>>>>> think >>>>>>> there's something there. Om did some work with SVG skins and = I've >>>> been >>>>>>> experimenting with them as well. There's a strong possibility of >>>>>>> getting a >>>>>>> 1:1 of both the Flash and HTML visuals that way. The size, = position >>>> and >>>>>>> look are nearly identical in my tests. Why it's not used more is = a >>>>>>> mystery >>>>>>> to me. But it shouldn't be surprising. AJAX was around for 4yrs >>>> before >>>>>>> it >>>>>>> was used. Someone just needs to prove it's possible for it to = take >>>> off. >>>>>>>=20 >>>>>>> For buttons, for example, you would use: >>>>>>>=20 >>>>>>> >>> class=3D"buttonSkin"> >>>>>>>=20 >>>>>>> .buttonSkin { >>>>>>> background: url(assets/svg/button_skin_up.svg) 0 0 no-repeat; >>>>>>> border: 0px; >>>>>>> } >>>>>>>=20 >>>>>>> .buttonSkin:hover { >>>>>>> background: url(assets/svg/button_skin_over.svg) 0 0 no-repeat; >>>>>>> border: 0px; >>>>>>> } >>>>>>>=20 >>>>>>> .buttonSkin:active { >>>>>>> background: url(assets/svg/button_skin_down.svg) 0 0 no-repeat; >>>>>>> border: 0px; >>>>>>> } >>>>>>>=20 >>>>>>> Conversion will be much easier if we don't support margins. The = only >>>>>>> place >>>>>>> I would use margins is in horizontal or vertical layout. For >>>> example, >>>>>>> if >>>>>>> you have 5 elements in a div, set the right margin on all the >>>> elements >>>>>>> but >>>>>>> the last to the gap. I believe that was what margins were = intended >>>> for >>>>>>> to >>>>>>> begin with. >>>>>>>=20 >>>>>>> My thought is that we don't support the HTML style unless or = until >>>> we >>>>>>> support it in Flex. So for example, HTML supports border top, >>>> bottom, >>>>>>> left, >>>>>>> and right but FlexJS / Flex 4 doesn't (out of the box). We = wouldn't >>>>>>> support >>>>>>> this until we have a Flex skin that supports it. >>>>>>>=20 >>>>>>> HTML also has a unsupported styles thing that you saw in the css >>>>>>> before: >>>>>>>=20 >>>>>>> -moz-box-sizing: border-box; -webkit-box-sizing: border-box; >>>>>>> box-sizing: >>>>>>> border-box; >>>>>>>=20 >>>>>>> When you start adding in all the browsers you'll have -ie, -moz, >>>>>>> -webkit, >>>>>>> -chrome, etc just for one style. IMO if you go that route you're >>>> gonna >>>>>>> have >>>>>>> a bad time. If we can use SVG you can gain that ground back. >>>>>>>=20 >>>>>>> Also, imo, I wouldn't try and support the lowest common >>>> denominator. Go >>>>>>> for >>>>>>> a baseline of something like IE 8 or IE9 and use polyfills for >>>> fallback >>>>>>> (some of which are FP) if absolutely vital. >>>>>>>=20 >>>>>>>=20 >>>>>>> On Mon, Apr 7, 2014 at 8:20 AM, Peter Ent = wrote: >>>>>>>=20 >>>>>>>> So this is a crazy, no-win situation. Our box model is either >>>>>>>> compatible >>>>>>>> with the "standard" of most browsers or compatible with some = quirk >>>> or >>>>>>>> extra feature that attempts to make sense out of something that >>>>>>>> shouldn't >>>>>>>> have been done in the first place. >>>>>>>>=20 >>>>>>>> Or, to put it another way, we are trying to impose a >>>>>>>> UI/graphics-focused >>>>>>>> model & framework onto a system not designed for it and geared >>>> toward >>>>>>>> page >>>>>>>> layout. >>>>>>>>=20 >>>>>>>> Sigh, >>>>>>>> Peter >>>>>>>>=20 >>>>>>>> On 4/6/14 6:41 AM, "Harbs" wrote: >>>>>>>>=20 >>>>>>>>> I think the default of the css box model is broken by design. >>>>>>>>>=20 >>>>>>>>> I'd think the solution is simply to stick to using border-box. >>>>>>>>> http://css-tricks.com/box-sizing/ >>>>>>>>>=20 >>>>>>>>> On Apr 4, 2014, at 9:54 PM, Peter Ent wrote: >>>>>>>>>=20 >>>>>>>>>> Hi, >>>>>>>>>>=20 >>>>>>>>>> I've been working on a mobile app example for FlexJS as a way = to >>>> try >>>>>>>>>> out the Flex JS in a practical manner with the intent of = running >>>> the >>>>>>>> app >>>>>>>>>> using PhoneGap. In the course of doing this I've been running >>>> into >>>>>>>>>> things that need adjustment. >>>>>>>>>>=20 >>>>>>>>>> One of them is the box model. Right now FlexJS is sort of a >>>> hybrid >>>>>>>>>> between ActionScript and JavaScript. I'll use the .width >>>> property as >>>>>>>> an >>>>>>>>>> example. >>>>>>>>>>=20 >>>>>>>>>> In Flex, when you give a component a width of 50 pixels that >>>>>>>> component >>>>>>>>>> is 50 pixels wide. Some components, such as a container, = would >>>>>>>>>> embed a >>>>>>>>>> scrollbar if its content were greater than 50 pixels. But you >>>> can be >>>>>>>>>> sure that your component is 50 pixels wide and you can = position >>>>>>>>>> other >>>>>>>>>> components knowing that. >>>>>>>>>>=20 >>>>>>>>>> If you add padding to the component, that will offset the >>>> interior >>>>>>>>>> by >>>>>>>>>> that amount. If you make a Container 200 pixels wide and give = it >>>> a >>>>>>>>>> padding of 10 pixels, positioning a child of that container = at >>>> (0,0) >>>>>>>>>> will render the child 10 pixels in from the left and 10 = pixels >>>> down >>>>>>>> from >>>>>>>>>> the top. The child thinks it is at (0,0) and the Container = will >>>>>>>>>> remain >>>>>>>>>> 200 pixels wide. >>>>>>>>>>=20 >>>>>>>>>> In the CSS Box model, things work differently. If you make an >>>> HTML >>>>>>>>>> element 50 pixels wide and give it a padding of 10 pixels, = the >>>>>>>>>> overall >>>>>>>>>> width of the HTML element will be 70 pixels: the 50 pixels = are >>>> the >>>>>>>> width >>>>>>>>>> of the content area and 2*10 pixels (left and right) are the >>>> padding >>>>>>>>>> added to that. >>>>>>>>>>=20 >>>>>>>>>> HTML goes further and adds on border thickness and margin; = Flex >>>>>>>> doesn't >>>>>>>>>> have margins. >>>>>>>>>>=20 >>>>>>>>>> I was having trouble getting things to align because I would >>>> make a >>>>>>>>>> ButtonBar 480 pixels wide and it was turning out to be wider = than >>>>>>>> that. >>>>>>>>>> When I looked into the code, I saw that making a component = 480 >>>>>>>>>> pixels >>>>>>>>>> was just the start: I was getting that plus a padding on each = of >>>> the >>>>>>>>>> buttons that make up the button bar plus the width of the = border >>>>>>>> around >>>>>>>>>> each button. >>>>>>>>>>=20 >>>>>>>>>> This makes alignment very difficult because you must ask for = more >>>>>>>> than >>>>>>>>>> just width (or height). >>>>>>>>>>=20 >>>>>>>>>> I suggest FlexJS completely adopt the CSS Box Model. This = means >>>>>>>> setting >>>>>>>>>> a component's width isn't going to take into account its = padding, >>>>>>>> border >>>>>>>>>> thickness, and margin - it is just going to set the = component's >>>>>>>> content >>>>>>>>>> area width. For example, if I make a Button's width be 50 = pixels, >>>>>>>>>> the >>>>>>>>>> text will be placed within that 50 pixel content area, but = there >>>> may >>>>>>>> be >>>>>>>>>> padding, a border, and a margin surrounding the Button. If I = want >>>>>>>>>> all >>>>>>>> of >>>>>>>>>> my Buttons to align horizontally with no gaps, I should make = sure >>>>>>>>>> the >>>>>>>>>> Buttons do not have any margin. >>>>>>>>>>=20 >>>>>>>>>> What this means is that .width won't set the overall width of = the >>>>>>>>>> component. This may affect layout calculations which will = have to >>>>>>>>>> examine the component's margin, border thickness, and padding >>>>>>>>>> values. >>>>>>>> So >>>>>>>>>> I suggest making it simple (height dimension would have = similar >>>>>>>>>> properties of course): >>>>>>>>>>=20 >>>>>>>>>> .width is the content area. >>>>>>>>>> .padding is the padding around the content area, inside the >>>> border. >>>>>>>>>> .borderThickness is the thickness of border that surrounds = the >>>>>>>> padding >>>>>>>>>> and content area. >>>>>>>>>> .margin is space around the component. >>>>>>>>>> .x will position a component's upper-left margin. >>>>>>>>>>=20 >>>>>>>>>> .overallWidth will be .width + 2*.margin + 2*.padding + >>>>>>>>>> 2*.borderThickness >>>>>>>>>>=20 >>>>>>>>>> You can use .overallWidth to position elements in layouts as = it >>>> will >>>>>>>>>> account for all of the extra space in a component's box. >>>>>>>>>>=20 >>>>>>>>>> Further, for Flex JS 1.0, I suggest we keep it simple to = padding, >>>>>>>>>> margin, and borderThickness and leave edge specifics (e.g., >>>>>>>> padding-top, >>>>>>>>>> margin-bottom) to another release or a developer can create = their >>>>>>>>>> component or override functions to account for that. >>>>>>>>>>=20 >>>>>>>>>> Finally, it should be easier to build applications because = you >>>> can >>>>>>>> let >>>>>>>>>> CSS have a greater say in the size and positioning of = components. >>>>>>>>>> For >>>>>>>>>> example, if I want to make a row of buttons that are all >>>> touching, I >>>>>>>>>> just create a Container with a horizontal layout and put the >>>> Buttons >>>>>>>>>> into it. Then in CSS, I specify that the Buttons have zero = margin >>>>>>>>>> and >>>>>>>> if >>>>>>>>>> I want them inset within the Container, I give the Container, = via >>>>>>>>>> CSS, >>>>>>>>>> some padding. >>>>>>>>>>=20 >>>>>>>>>> Thanks for your time, >>>>>>>>>>=20 >>>>>>>>>> Peter Ent >>>>>>>>>> Adobe Systems >>>>>>>>>>=20 >>>>>>>>>=20 >>>>>>>>=20 >>>>>>>>=20 >>>>>>=20 >>>>>=20 >>>>=20 >>>>=20 >>=20 >>=20 >=20 >=20 > --=20 > Carlos Rovira > Director de Tecnolog=EDa > M: +34 607 22 60 05 > F: +34 912 94 80 80 > http://www.codeoscopic.com > http://www.directwriter.es > http://www.avant2.es