Re: [css-d] Trying to get the big picture view on responsive design
... Fluid/flexible layouts are, IMO, best. Like you mention, new devices are coming out all the time. Percentage width on your structure help you cover all the varying widths. Start mobile first, and adjust layout with breakpoints when the *content* requires it. Sometimes a single column is all you need up to 600px wide or so. I generally use 3-4 breakpoints, adding in others as need to fine-tune widths or # of columns, etc. I looked and googled but... what is a css breakpoint? Is it just setting width ? bill __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trying to get the big picture view on responsive design
On Wed, Nov 13, 2013 at 7:26 AM, william drescher
will...@techservsys.com wrote:
I looked and googled but... what is a css breakpoint?
Is it just setting width ?
bill
Breakpoints are points at which certain CSS rules kick in. They are
most commonly based on the width of your browser viewport but can also
be tied to other properties of a device. You use media queries to
define them.
A common example would be that you have a block on the page that is
50% of the available width (maybe lining up horizontally in two
columns) and you need them to switch to 100% wide on smaller screens
(stacking vertically instead of horizontally). In the case below, any
screen less than 700px wide would do this.
700px would be the breakpoint
.story{width: 50%; float: left;}
@media only screen and (max-width: 700px){
.story(width: 100%; float: none;}
}
NOTE: this is not just about width. You could change anything at all
defined in CSS at these different breakpoints.
http://www.w3.org/TR/css3-mediaqueries/
Tim
--
tim.arn...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trying to get the big picture view on responsive design
many such breakpoints (out there in practice) are defined in ems, even when
the author is thinking pixels, where one EM is calculated as 16 pixels.
/* for 600px ...(16 * 37.5 == 600) */
@media all and (min-width: 37.5em) {
...css goes here
}
I've been doing this because the examples I copied did this. But I don't
know why. Can anybody explain this issue?
On Wed, Nov 13, 2013 at 6:36 AM, Tim Arnold tim.arn...@gmail.com wrote:
On Wed, Nov 13, 2013 at 7:26 AM, william drescher
will...@techservsys.com wrote:
I looked and googled but... what is a css breakpoint?
Is it just setting width ?
bill
Breakpoints are points at which certain CSS rules kick in. They are
most commonly based on the width of your browser viewport but can also
be tied to other properties of a device. You use media queries to
define them.
A common example would be that you have a block on the page that is
50% of the available width (maybe lining up horizontally in two
columns) and you need them to switch to 100% wide on smaller screens
(stacking vertically instead of horizontally). In the case below, any
screen less than 700px wide would do this.
700px would be the breakpoint
.story{width: 50%; float: left;}
@media only screen and (max-width: 700px){
.story(width: 100%; float: none;}
}
NOTE: this is not just about width. You could change anything at all
defined in CSS at these different breakpoints.
http://www.w3.org/TR/css3-mediaqueries/
Tim
--
tim.arn...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
/* Colin (Sandy) Pittendrigh --oO0 */
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trying to get the big picture view on responsive design
Le 13 nov. 2013 à 22:44, Colin (Sandy) Pittendrigh
sandy.pittendr...@gmail.com a écrit :
many such breakpoints (out there in practice) are defined in ems, even when
the author is thinking pixels, where one EM is calculated as 16 pixels.
/* for 600px ...(16 * 37.5 == 600) */
@media all and (min-width: 37.5em) {
...css goes here
}
I've been doing this because the examples I copied did this. But I don't
know why. Can anybody explain this issue?
By using ‘em’, you base your media queries on the user chosen font-size. That
maybe 16px (default on most user-agents) or it may be more. Both iOS and
Android have accessibility options in their general settings to enlarge the
text used on the device. Remember that em-based MQs use the browser (device)
set of font-size, _not_ the font-size you may have set on the root element of
the device.
That is especially interesting if your pages are text rich (news site, blogs,
etc). You have control over the length of the lines, and that remains
consistent independently of the user font-size. On the flip side, if your pages
are graphics rich, you might be better off working with MQ’s defined in px
(range of physical dimensions of the devices / viewport).
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The Simpsons in CSS
On Wed, Nov 13, 2013 at 2:15 AM, MiB digital.disc...@gmail.com wrote: nov 13 2013 06.30 Theresa Jennings: I think they're more proof of concept than anything else. Of course, but what about in three years? Someone will always be going there first. It's possible that graphics apps will eventually have an option to export something like this, but I lean toward probably not. More likely (particularly since it's already happening with Adobe) is that illustrations will export to canvas. Illustrator can already export to SVG which will probably fill in where canvas does not. I could totally be wrong, but I think that those two are better for that. I love the CSS in the example, but am really not a fan of the hundreds of empty divs with unique classes needed to accomplish it. -- tim.arn...@gmail.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The Simpsons in CSS
On Nov 13, 2013, at 6:25 AM, Tim Arnold tim.arn...@gmail.com wrote: It's possible that graphics apps will eventually have an option to export something like this, but I lean toward probably not. More likely (particularly since it's already happening with Adobe) is that illustrations will export to canvas. Illustrator can already export to SVG which will probably fill in where canvas does not. Sketch for OS X, a vector draw app, does some level of this, tho the actual success of the exported code could use some work, but I've gotten it to spit out lean code for a box with border radius and both inside and outside shadows, and IIRC, web kit moz kit, etc. I can get on board with a draw app that converts my creative work into useable CSS. I can't get on board with drawing by sticking my hands into a set of rubber gloves attached to tongs attached to tweezers way at the other end. ..which is how I personally view drawing with CSS as being..the thought of tapping out the code for bart's noggin…where's the Maaloxx?? John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The Simpsons in CSS
..it also just dawned on me that illustration converted to code can be dynamically changed… some dizzying implications to that, eh? John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The Simpsons in CSS
Yeah, it came up as a 404 for me, and I'm the one who started this thread. Oh, well. It was cool. On Nov 13, 2013, at 11:28 AM, Greg Gamble wrote: http://pattle.github.io/simpsons-in-css/ is 404? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The Simpsons in CSS
http://pattle.github.io/simpsons-in-css/ is 404? -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of COM Sent: Wednesday, November 13, 2013 7:08 AM To: CSS-Discuss Subject: Re: [css-d] The Simpsons in CSS ..it also just dawned on me that illustration converted to code can be dynamically changed... some dizzying implications to that, eh? John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The Simpsons in CSS
Theresa Jennings wrote: Yeah, it came up as a 404 for me, and I'm the one who started this thread. Oh, well. It was cool. On Nov 13, 2013, at 11:28 AM, Greg Gamble wrote: http://pattle.github.io/simpsons-in-css/ is 404? Update: Pattle has temporarily removed his project from Github while he seeks legal permission to reproduce the Simpsons characters Translation : the suits and bean-counters have threatened litigation for infringement of copyright. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The Simpsons in CSS
Philip Taylor wrote: Update: Pattle has temporarily removed his project from Github while he seeks legal permission to reproduce the Simpsons characters Translation : the suits and bean-counters have threatened litigation for infringement of copyright. A variant can still be found here : http://cssdeck.com/labs/homer-simpson-rendered-in-css3 Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The Simpsons in CSS
On Nov 13, 2013, at 11:42 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: http://pattle.github.io/simpsons-in-css/ is 404? Update: Pattle has temporarily removed his project from Github while he seeks legal permission to reproduce the Simpsons characters Translation : the suits and bean-counters have threatened litigation for infringement of copyright. makes perfect sense…you don't replicate one of the hottest properties on earth without inviting a little CD action… thanks for the alternate link. J __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] aligning some text in td at bottom
Would really appreciate a suggestion and explanation from this group.
I'd like to align a link at the bottom of a table cell. The rest of the text
should be aligned at the top of the cell. I'd also like to leave some padding
above the link so that I can reduce the width of the window and there's room
for the link to wrap to become 3 short lines rather than 1 long line without
bumping into the text. I'd like the cell sizes to be variable if at all
possible.
Is this possible in all browsers? I got it to work in Firefox as follows, but
in Chrome and IE, the div doesn't grown to 100%. If I switch Chrome to
box-sizing:content-box, it works - but that doesn't work in Firefox. And
neither box-sizing works in IE.
table border=1
tr
td
divLorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. a
href=#link/a
/div
/td
td
divSmall amount of text a href=#link/a
/div
/td
/tr
/table
* {
box-sizing:content-box;
-moz-box-sizing:border-box;
}
table, tr, td, div {
height:100%;
}
table {
border-collapse:collapse;
}
td {
vertical-align:top;
}
div {
position:relative;
padding-bottom:60px;
}
a {
position:absolute;
bottom:0;
display:block;
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Font stack problem
List, I'm using this for my font stack: font-family: Trebuchet MS, TrebuchetMS,Trebuchet, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, Helvetica, Arial, sans-serif; The three Trebuchets listed was attempt to solve my issue, which is that although I see Trebuchet in my system it is not getting used on my page in Chrome and I'm seeing Lucida instead. FireFox is fine. Can anyone think of why this might be? Does Chrome need the name written differently? -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font stack problem
I'm using this for my font stack: font-family: Trebuchet MS, TrebuchetMS,Trebuchet, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, Helvetica, Arial, sans-serif; The three Trebuchets listed was attempt to solve my issue, which is that although I see Trebuchet in my system it is not getting used on my page in Chrome and I'm seeing Lucida instead. FireFox is fine. Can anyone think of why this might be? Does Chrome need the name written differently? OK, well I figured this out. And just so you are aware in case you ever hit this issue, it appears that Font Agent Pro, having another Trebuchet MS active, will mess up Chrome. Thanks -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] aligning some text in td at bottom
My first question for these is always, does this have to be/should be an
actual table?
Second, I think, if I can understand the specs correctly, that Firefox is
actually doing it incorrectly. Without an explicit height (do the specs
mean explicit to be a non-percentage, non-auto value?) on the parent,
declaring height:100% is the same as declaring height:auto, which would
make your div wrap its content, and not necessarily expand to its parents
height (unless that parent had an explicit height set).
See this codepen showing an explicit (if I'm using this correctly per the
specs) height set: http://codepen.io/chrisrockwell/pen/dLego
Pretty sure display:flex is going to make this a non-issue, so if you're
only needing to work with latest releases, I'd go with that.
On Wed, Nov 13, 2013 at 4:02 PM, Sara Haradhvala har...@comcast.net wrote:
Would really appreciate a suggestion and explanation from this group.
I'd like to align a link at the bottom of a table cell. The rest of the
text should be aligned at the top of the cell. I'd also like to leave some
padding above the link so that I can reduce the width of the window and
there's room for the link to wrap to become 3 short lines rather than 1
long line without bumping into the text. I'd like the cell sizes to be
variable if at all possible.
Is this possible in all browsers? I got it to work in Firefox as follows,
but in Chrome and IE, the div doesn't grown to 100%. If I switch Chrome to
box-sizing:content-box, it works - but that doesn't work in Firefox. And
neither box-sizing works in IE.
table border=1
tr
td
divLorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum. a href=#link/a
/div
/td
td
divSmall amount of text a href=#link/a
/div
/td
/tr
/table
* {
box-sizing:content-box;
-moz-box-sizing:border-box;
}
table, tr, td, div {
height:100%;
}
table {
border-collapse:collapse;
}
td {
vertical-align:top;
}
div {
position:relative;
padding-bottom:60px;
}
a {
position:absolute;
bottom:0;
display:block;
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Chris Rockwell
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
