Talking CSS with Louis and Rachel: Transcript and Resources

Talk with the Experts this morning got me a bit more excited than is perhaps to be expected when it comes to work stuff, but it was with good reason. Not only were our experts long-time SitePoint authors and CSS stars Louis Lazaris and Rachel Andrew, but the session marked the launch of our brand new live code window. The new interface allows the experts and other specified participants to collaboratively code in order to demonstrate examples and solve problems. The hour flew by and we covered a range of topics, from pre-processors to responsive solutions. A raft of great resources came out of it, and to save you from sifting through the entire transcript, I’ve pulled them out and listed them below for your reading pleasure. Some SitePoint CSS publications from Louis and Rachel: Jump Start CSS The CSS3 Anthology Everything You Know About CSS is Wrong HTML5 and CSS3 for the Real World Some useful tools: Dust Me Selectors (for tidying up your CSS) CSS3 Pie (makes IE 6-9 capable of rendering several of the most useful CSS3 decoration features) Modern IE (tools for IE development) Web Tools Weekly (Louis’ weekly newsletter) The Sass vs LESS debate: Sass vs LESS PreProcessor Shootout Grids and layouts: Learn CSS Layout CSS3 Grid Layout CSS3 Grids and Regions CSS Tricks : Grid Center Multiple Divs Responsive Solutions: Choosing a Responsive Image Solution Responsive Menu Concepts Responsive Patterns Responsive Navigation Other resources: CSS Day Presentations Stop Solving Problems You Don’t Yet Have You can sign up for email notifications of future sessions and check out our upcoming timetable here. Next week is Rails 4 with Andy Hawthorne and Glenn Goodrich. And if you’re keen to see exactly what went down this morning, here is the full transcript: [19:27] <LouisLazaris> Pre-chat challenge: Who has the most tabs open in their browser right now: I’ve got about 60 :D [19:28] <HAWK> Show off! [19:28] <HAWK> I have three browsers open, total of 22 tabs. I thought that was good [19:29] <LouisLazaris> haha, yeah I clicked through a load of links from some newsletters about 10 min. ago, so mine is unusually high [19:29] <Jerry> 46 — in one of three windows [19:29] <HAWK> Sounds like a good newsletter [19:29] <HugoGiraudel> 6 here. [19:30] <HAWK> Ok, I’m calling kick-off [19:30] <HAWK> Welcome everyone – thanks for joining the session [19:30] <HAWK> A special welcome and thanks to LouisLazaris and rachelandrew – both long-time SitePoint authors [19:31] <rachelandrew> Hi everyone :) [19:31] <HAWK> Their latest collaboration being Jump Start CSS https://learnable.com/books/jscss1 [19:31] <HAWK> For anyone that hasn’t been to one of these sessions – it will keep getting busier and is a really organic chat [19:31] <HAWK> If you have questions, jump in at any time and I’ll queue them for our experts [19:32] <HAWK> I will post a full transcript of the session up on SitePoint later today [19:32] <Jerry> 211 tabs [19:32] <twigsta> Good. I hate articificial additives on irc [19:32] <LouisLazaris> JERRY WINS [19:32] <HAWK> Holy moly Jerry – that’s ridiculous! [19:32] <james> hi HAWK! hi All. knowing only the traditional CSS, what should I learn next? SASS or LESS? [19:33] <HAWK> And I’m proud to say that this session is the launch of our new live code window, which you’ll see on the right of this chat [19:33] <HugoGiraudel> Looks nice. :) [19:33] <TaoistTotty> I much prefer this look [19:33] <Jerry> And the chat scroll bar!!!!!! Thanks!! [19:33] <HAWK> So if anyone has examples that would make use of the code window, let me know and I’ll give you permission to write to it [19:33] <LouisLazaris> @james Generally, I think Sass is the way to go. It’s turning into the jQuery of preprocessors (lots of people talking about it, writing stuff for it, etc) [19:34] <HAWK> Glad you like it guys [19:34] <rctneil> I ahve a question about Vertical Rhythm, is that ok? [19:34] <rctneil> have* [19:34] <HAWK> Yup, any questions are ok [19:34] <lj> I second the sass or less question…which is the future? [19:35] <rachelandrew> @james you don’t *have* to learn either. However it does seem that Sass has more people using it and therefore more tools and examples. [19:35] <HugoGiraudel> *caugh* Sass *caugh* [19:35] <rctneil> I today started looking into using the Compass Vertical Rhythm module, really like it. Perfect once I got it working with rem’s and a px fallback! But how do you keep your vertical rhythm when images are used by a client via a CMS? [19:36] <TaoistTotty> What is the best way to tidy your CSS, or plan it better? – I often find that I have unnecessary classes etc. when I check the code (things that could be done a better way) [19:36] <ConceptFusion> I love SaSS (and currently work in a Rails team) but am always concerned about the rails-centric aspect… on the other hand LeSS’s client side processing also concerns me… have yet to decide which I prefer [19:36] <Murali> Is there a tool available to check over specificity? [19:37] <rctneil> Sass is amazing, prefer it over Less and the indented syntax is my favourite! [19:37] <lj> why do you prefer it over less? [19:37] <Jerry> What is Vertical Rhythm? [19:38] <rctneil> Sass also ahs the benefit of having the Compass framework [19:38] <LouisLazaris> TaoistTotty There’s something called Dust Me Selectors: https://addons.mozilla.org/en-us/firefox/addon/dust-me-selectors/ (and similar tools) [19:38] <twigsta> typography Jerry [19:38] <rctneil> ljI haven;t used Less! :-) [19:38] <lj> verical rhythm is so two columns will synch on the horizontal axis [19:38] <rctneil> But overall the syntax of Sass seems more sensible to me [19:38] <LouisLazaris> TaoistTotty But be careful, because I believe it checks on a per-page basis, so if something isn’t used on that page, doesn’t mean it’s not used on the project (but it’s been a while since I’ve looked at it, but it could be updated now) [19:39] <james> so far, SASS > 5, LESS = 0 [19:39] <HAWK> LouisLazaris and TaoistTotty – no, I don’t believe we’ve updated it for a looooong time [19:39] <LouisLazaris> Oh is Dust Me a SitePoint thing? I didn’t realize… [19:39] <Zoe> If you give DustMeSelectors an XML sitemap, it will scan through all the pages. [19:39] <HAWK> It is :) [19:40] <chineebro> I generally seem to hear that SASS is more powerful than LESS. [19:40] <LouisLazaris> @Zoe good to know [19:40] <twigsta> I started with less, the difficulty curve isn’t so steep [19:40] <rctneil> Anyone able to help with my VR question? [19:40] <HugoGiraudel> Sass also has a more robust syntax. The main issue with LESS is they have chosen to use the @ symbol for variables, which conflicts with @ directive in regular CSS. There is a lot you can’t (or hardly can) do in LESS that is absolutely trivial in any other CSS preprocessor because of this issue. [19:40] <LouisLazaris> rctneil That’s a tough one, and is probably more of a CMS issue than CSS. [19:41] <ConceptFusion> Compass is pretty cool… particularly for cross browser CSS simplification [19:41] <SpaceBeers> I’ve not had much to do with LESS to be honest. SASS I am a big fan of though [19:41] <rctneil> or even, without the CMS, how do you deal with images in regards to keeping the rhythm? [19:41] <rctneil> especially when doing that and making it retaina and hidpi friendly [19:41] <lj> Can you explain pie? [19:42] <TaoistTotty> Thanks LouisLazaries I will have a look at that [19:42] <LouisLazaris> rctneil CMS’s will never be perfect. As long as users can do stuff, they will find ways to break things. That being said, you can use stuff like max-width and max-height or even word-wrap: break-word; to keep things from breaking, but there’s no guarantees. [19:42] <Jerry> lj – 3.14159 or cherry? [19:42] <LouisLazaris> @lj What do you mean by “pie”? [19:43] <rctneil> LouisLazaris Ok thanks [19:43] <lj> jerry neither..the support for pie, something to do with clearfix [19:43] <HugoGiraudel> http://css3pie.com/ [19:43] <lj> actually im confused about when to use clear fix. vs clear both [19:44] <LouisLazaris> For the Sass vs. LESS debate, these two posts are must-reads: http://css-tricks.com/sass-vs-less/ and http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/ [19:44] <lj> Thanks Hugo G [19:44] <HugoGiraudel> Clearfix = parent side. Clear both = sibling side. [19:44] <lj> Thanks again [19:45] <rctneil> lj A clear fix is used when all the children of an element are floated then the parent normally collapses so you use a clearfix to pull the parent down to contain all the floated children, the clear property is used to make one floated item go beneath another instead of along side – Sorry for the bad explanation [19:45] <lj> But I have a body that doesnt stretch to bottom when looking in G dev tools [19:45] <HugoGiraudel> Did we lose Rachel? :( [19:45] <thewebwiz> rctneil – Good explanation! :) [19:45] <TheDutchCoder> @lj: that could also be due to absolute/fixed positioned elements (assuming your HTML is correct) [19:45] <lj> I have 100% height on body [19:45] <twigsta> Q: SASS seems a bit like agile. For it to work, everybody needs to be signed up to the idea. Many large companies have multiple teams working on the same codebase. Are there ways of mitigating the confusion? [19:46] <rctneil> lj This site is awesome at explaining it all: http://learnlayout.com/ [19:46] <lj> I dont think I have specified any fixed or absolute [19:47] <thewebwiz> @lj – May give problems – try min-height: 100%; height: 1px; [19:47] <LouisLazaris> I posted a CSS example in the code pane :) [19:47] <rctneil> lj If you are rying to get equal height columns with backgrounds then it is a tricky issue, backgrounds, min and max are all methods that can be used [19:47] <TheDutchCoder> @lj then something must be floating outside its container… The body should wrap everything if properly clearfixed… Alternatively you might want to look into using inline-blocks if you don’t support IE7 and lower. Especially grid systems that use inline-blocks are superior to floats imo. [19:48] <LouisLazaris> twigsta Look into using Source Maps, which basically allows someone viewing the Sass to see what line the CSS is from in the original CSS file [19:48] <ConceptFusion> Part of the {potential} problem I have with SaSS is that unless you’re working on a Rails project, preferably with the integrated asset pipeline enabled and compiling on-the-fly, then it only takes one team member to work on the compiled CSS to break the whole process… compilers like CodeKit are awesome for individuals but not a reliable workflow [19:48] <ConceptFusion> for teams [19:48] <lj> everything looks good in safari and FF but in Google Dev Tools it shows that my body only reaches so far down. [19:48] <lj> I am trying for isolation…ie NO floating [19:49] <lj> COncept I dont see how someone can break the css when it can just be generated again from the sass [19:50] <HugoGiraudel> It’s not breaking the CSS. It’s breaking the workflow. [19:50] <HugoGiraudel> Highly different things. [19:50] <ralphm> LouisLazaris Nice ode sample. :-) [19:50] <HugoGiraudel> Workflow is a word that almost doesn’t exist when working alone on a project. [19:50] <ConceptFusion> it’s not that THEY can break the css so much as they are writing into a black hole… ie. they make changes, those changes then get over-written… [19:51] <TheDutchCoder> rachelandrew When did you decide it was time to come up with Perch and what has been the biggest learning point for you during the development? [19:51] <twigsta> LouisLazaris thanks, I will! [19:51] <james> who has a brighter future? SASS or LESS? [19:52] <ConceptFusion> SaSS appears to have more traction at present… [19:52] * LouisLazaris (ae599fcc@localhost) has joined #sitepoint [19:53] <HugoGiraudel> There are more developers involved in Sass then LESS. [19:53] <HugoGiraudel> than* [19:53] <ConceptFusion> I know one thing… I find it *difficult* going back to writing CSS in the regular way! [19:53] <rachelandrew> @TheDutchCoder I’ve been asked here to chat about CSS, had best not take it off topic – always happy to talk about Perch elsewhere though ;) [19:54] <TheDutchCoder> Oh my bad! :D [19:54] <HAWK> I’ve lost track of where we’re at a bit. Let’s get things back on track. Has anyone got a question that hasn’t been answered yet? [19:54] <rctneil> Main thing I like wih pre processors are mixins, very invaluable [19:54] <lj> Concept me too and Sass was easy to learn you could insert regular css too wherever you were not up to it with SCSS [19:54] <SpaceBeers> rachelandrew – What’s your top solution for equal height elements? [19:54] <TheDutchCoder> CSS question then: what was your most recent “wow” moment while learning something new in CSS? [19:55] <rctneil> The main thing I tell people who are just starting with web stuff who say they want to learn Sass is to learn plain CSS first and know what to expect the output to look like [19:55] <LouisLazaris> rctneil Agreed [19:55] <thewebwiz> How do I stop an image from dragging off the page when trying to drag its container? [19:56] <TheDutchCoder> rctneil similar to jQuery <-> JavaScript imo ;-) [19:56] <lj> definitely you have to know the css well to get into sass [19:56] <rachelandrew> My most wow moment has to be with the work that I’ve been doing on CSS Grid Layout, I think it’s the best solution for having a proper layout method, early stage at the moment but worth looking at [19:56] <LouisLazaris> thewebwiz What do you mean by “drag”? It’s resizable? [19:56] <ConceptFusion> very true [19:56] <HugoGiraudel> rachelandrew LouisLazaris You may have seen my articles on Sass. I’m a unconditional Sass hacker, I love it. Do you feel some preprocessors’ features are kind of crossing the line between what CSS should be able to do and what it shouldn’t? Where do you stand on this topic? [19:56] <rctneil> TheDutchCoder Today, when I was looking into Vertical Rhythm for the first time, it’s great, nice typography and Sass and Compass are invaluable! [19:56] <TheDutchCoder> rachelandrew nice, what kind of system are you going for? Is it inline-block based and responsive? [19:57] <lj> can you talk more about the css grid layout? [19:57] <SpaceBeers> equal heights in css grids are a constant source of pain for me. What’s the best solution anyone’s got? [19:57] <lj> The compass website and documentation are out-of-date and confusing [19:58] <LouisLazaris> HugoGiraudel I think Sass is the way CSS should be, and it should always have been that way. It’s so much more powerful with programming capabilities. When it’s just plain CSS, it’s too simple and too contrary to basic software engineering principles (DRY, etc) [19:58] <rachelandrew> @TheDutchCoder I don’t follow, I’m talking about the new CSS Grid Layout module https://www.w3.org/TR/css3-grid-layout/ rather than any grid system [19:58] <thewebwiz> LouisLazaris – Dragging an image gallery with JS – works on a DIV, but images move by themselves!! [19:59] <HugoGiraudel> TheDutchCoder Currently only supported in IE10+. Chrome Canary will soon join the way. [19:59] <LouisLazaris> SpaceBeers I hate to say this, but the best way to do equal heights so it works cross-browser is either via JavaScript or the old faux columns technique. It’s just a sad reality, but at least there’s a way. [19:59] <thewebwiz> SpaceBeers – display: table-row/column works IE 8+ [19:59] <lj> how soon will the grid layout be usable? [19:59] <TheDutchCoder> Ah okay I follow now, thought you were working on a framework ;) [19:59] <SpaceBeers> rachelandrew – That looks very interesting. [19:59] <TheDutchCoder> Yeah it’s certainly interesting for layouts [19:59] <LouisLazaris> SpaceBeers Yes, what thewebwiz said. That’s an option too [20:00] <HAWK> Welcome to those people that have just joined. Feel free to jump in with questions – I’m queueing them for Rachel and Louis [20:00] <LouisLazaris> thewebwiz – Again, I don’t know what you mean by “dragging”? [20:00] <rctneil> @lj try beta.compass-style.com More up to date. I wonder when Chris Eppstein will finally release 0.13? [20:00] <thewebwiz> SpaceBeers – Louis is right. But gradients may help (SVG?) [20:00] <SpaceBeers> thewebwiz – yeah I like that one. I always liked the negative margin trick myself [20:01] <rachelandrew> Grid layout kind of exists in IE10 (but the old implementation) however it’s fun to play around with [20:01] <rctneil> rachelandrew Do you have any ideas on the release schedule of Compass? [20:01] <rachelandrew> I have a set of slides here that I presented yesterday which have some more info and links to resources https://speakerdeck.com/rachelandrew/css3-grids-and-regions [20:01] <ConceptFusion> “Currently only supported in IE10+. Chrome Canary will soon join the way.” Who thought we’d ever be reading a statement like that! lol [20:01] <rachelandrew> @rctneil I don’t use Sass or Compass so I don’t know [20:01] <HugoGiraudel> CSS-Tricks has an Almanac entry on Grid Layout: http://css-tricks.com/almanac/properties/g/grid/ [20:01] <LouisLazaris> Honestly, I’ve been avoiding the Grid stuff simply because it’s so new and has little browser support. I think flexbox is good to look into, but again, not as practical because of the cross-browser issues. [20:01] <lj> rachelandrews Thank you!! And rctneil [20:02] <rctneil> rachelandrew Fair Enough, thanks! [20:02] <rachelandrew> IE10 has some great stuff in it – also support for some Regions and Exclusions stuff, they are doing good things :) [20:02] <HugoGiraudel> And IE11 is really close to live. [20:03] <lj> I am trying to us Singularitygs in its default isolation mode but my css is coming out with floats. [20:03] <LouisLazaris> For those who haven’t seen this yet, videos from the recent CSS Day are online: https://vimeo.com/channels/cssday [20:03] <ConceptFusion> Does it make IE 6, 7, 8 AND 9 miraculously disappear? ;-) [20:03] <HugoGiraudel> Definitely not. [20:03] <HugoGiraudel> But we’re getting to it. [20:04] <LouisLazaris> Does anyone know if IE10 is going to auto-update to IE11? [20:04] <lj> Can they be watched if you didnt do the summit? [20:04] <LouisLazaris> @lj yes, of course! [20:04] <lj> Thats great I was so interested in that. [20:04] <rachelandrew> there are IE11 VMs now available at http://www.modern.ie [20:04] <HugoGiraudel> LouisLazaris As far as I know, no. [20:04] <HugoGiraudel> LouisLazaris At least on desktop. [20:05] <HugoGiraudel> LouisLazaris But I might be wrong though. [20:05] <ConceptFusion> XP users (of which there are stil many in corporateland) are limited to IE9 and below [20:05] <LouisLazaris> HugoGiraudel That is pathetic, really, if that’s true. [20:05] <HugoGiraudel> Good news is we will have to find new hacks! :D [20:05] <TheDutchCoder> I think the lifecycle of MS browsers is linked to their supported OS [20:06] <thewebwiz> LouisLazaris – By dragging, I mean go to any page with an image in FF or Chrome, and use yr mouse to drag the image. It will copy onto any palce you drop it. How to stop that? [20:06] <lj> Is there another way to test css cross browser besides browserstack, to test a local file? [20:06] <james> lj http://www.modern.ie [20:06] <rachelandrew> @lj use VMs [20:06] <HugoGiraudel> Nothing better than Browserstack as far as I know. [20:06] <thewebwiz> ConceptFusion – I think you mean IE 8! [20:07] <ConceptFusion> Browser VM’s is really the only reliable way I have found to test… either locally or remotely… [20:07] <LouisLazaris> thewebwiz Ummm, there’s no way to stop that. But it won’t really copy into just any place. I don’t see that ever happening the way you describe…? [20:07] <lj> complicated to look at local files in Browserstack [20:07] <ConceptFusion> My bad… and SO much worse! lol (SVG nightmares) [20:08] <LouisLazaris> thewebwiz – The only way that might happen is if you drag it into an <iframe> but I’m not even sure about that [20:08] <thewebwiz> LouisLazaris – well, I have lots of unwanted images on my desktop from doing that! :) [20:08] <ralphm> I was reading recently that IE will auto update now. Not sure how it works, though. [20:08] <HugoGiraudel> rachelandrew Can’t find IE11 VM on modern.io. :( [20:09] <LouisLazaris> thewebwiz – Oh you mean drag onto your computer… Oh yeah, you can’t stop that, that’s a user option on their OS/Browser. I thought you meant, drag to another part of the page. [20:09] <LouisLazaris> thewebwiz Why do you want to stop that? [20:09] <HugoGiraudel> rachelandrew Found! :) [20:09] <rachelandrew> It is definitely there for Mac and VirtyualBox at least – you need to select your test environment and Virtualization platform to see [20:09] <thewebwiz> LouisLazaris – cuz I am making a draggable image gallery. :) [20:10] <LouisLazaris> @thewebiz But that shouldn’t affect your image gallery functionality. Your script should override that, AFAIK [20:11] <LouisLazaris> thewebwiz Unless they drag to their filesystem (e.g. desktop), which would then be outside the browser, so you have no control AFAIK (but hey, I might be wrong; some further research would help) [20:11] <HAWK> Welcome to those of you that have just joined. If you have questions, jump in at any time – don’t wait for a gap. [20:11] <HAWK> I’ll post a full transcript up on SitePoint later today [20:11] <thewebwiz> LouisLazaris Hmm. Don’t know how. (A using native JS for a responsive site.) [20:12] <LouisLazaris> thewebwiz Are you using a drag-and-drop plugin? You have to use drag-and-drop functionality, not just rely on the user’s ability to drag natively. [20:14] <Paul> @thewebwiz: Use img{pointer-events:none} to disable the dragging of an image (in browsers that support pointer events) [20:15] <thewebwiz> LouisLazaris – not drag and drop – drag to next slide. Using JS but want to stop browser moving the image. Found a CSS property for Webkit, but not FF. ANyone? [20:15] <artfulnessnl> Hello, I am now starting to built a responsive website. with a big image background. which would be at least 1024px width on desktop but on mobile device around 320px: but then you need a lot of loading time for the small device? or how does that work? [20:15] <artfulnessnl> like, I prob use the -cover- function to crop it [20:15] <lj> thats great wizbiz if it works…to make it more difficult for people to grab copyrighted images [20:16] <lj> webbiz [20:16] <LouisLazaris> thewebwiz I think I’m still confused by what you’re saying. Contact me on my website using the contact form (in the footer is the link) and maybe I’ll have more time to explain once I understand what problem you’re trying to solve (www.impressivewebs.com) [20:16] <TheDutchCoder> LouisLazaris rachelandrew what are your thoughts on frameworks like bootstrap? Do you think it’s helping building good CSS, or does it interfere with it? [20:16] <thewebwiz> LouisLazaris okay. Thanks. [20:16] <rachelandrew> @artfulnessnl there are some good suggestions re responsive images in this article http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/ [20:17] <ralphm> @HAWK—can we post Paul’s code in the code editor? [20:17] <artfulnessnl> tnx! and I have the same question as TheDutchCoder I dont know if its because I am also Dutch, haha :) [20:17] <TheDutchCoder> hehe ;) [20:17] <HAWK> ralphm Good idea – I can give Paul permission to do that [20:17] <HugoGiraudel> Paul Good news, Internet Explorer 11 will be the first IE version to support pointer-events. [20:18] <lj> I mean Paul..looks like a very simple solution. I’ve seen people put transparent images over the real ones for that purpose [20:18] <artfulnessnl> (we’re very sceptic people obviously) [20:18] <rachelandrew> @TheDutchCoder I’m not a fan, fine for prototyping but those things leave you with some incredibly bloated CSS. [20:19] <LouisLazaris> TheDutchCoder Regarding frameworks like Bootstrap: One of the things that these frameworks have done, which I like, is help promote modular, or OOCSS, which is good. I find sometimes people add these frameworks to their sites just to use one or two small things, which is bloat, but overall I think they are good for helping solve problems quickly. I [20:19] <LouisLazaris> believe Rachel wrote a good article on solving problems we don’t have, maybe she can link it up. [20:19] <HAWK> Paul – you have permission to use the code editor if you want to post the code that Ralph is referring to [20:19] <Paul> @HugoGiraudel Yes that will be useful as Pointer-events is already supported in Firefox and Chrome at the moment [20:20] <HugoGiraudel> Paul And Opera. And Safari. And Android. [20:20] <rachelandrew> this one – more about stuff like HTML5 Boilerplate really, but yeah :) http://www.rachelandrew.co.uk/archives/2012/03/21/stop-solving-problems-you-dont-yet-have/ [20:20] <thewebwiz> TheDutchCoder – I love frameworks. I’ve studied most and learned a whole lot from each of them. Making my own… :) [20:20] <TheDutchCoder> I’m asking as I currently have to work for a client with bootstrap and I find it interferes with my OOCSS more than it helps… Maybe it’s also because a lot of it dictates design elements. [20:20] <LouisLazaris> TheDutchCoder – The fact that these frameworks have separate modules that rely heavily on classes (and don’t use IDs) should be a clear indication that modular is the way to go. [20:21] <TheDutchCoder> thewebwiz yeah they’re great for learning, but I’ve built me own that has no actual styling (it’s more of a layout framework than anything). Going back feels very cumbersome [20:21] <HAWK> Paul You can save that code to a Gist which will put it into the transcript (use the settings cog) [20:22] <thewebwiz> Who posted that img code? Thanks a whole bunch. That looks like a winner. [20:22] <HAWK> This session is flying. We have approx 10 mins to go. If you have any unasked questions, now would be the time to jump in [20:22] <Paul> Saved editor: https://gist.github.com/6083386 [20:22] <HAWK> thewebwiz I believe it was Paul :) [20:22] <LouisLazaris> TheDutchCoder Agreed. I had a beginner friend ask me for help with a problem with Bootstrap, and I honestly couldn’t fix it without removing Bootstrap. It was conflicting with stuff and it was very hard to figure out what was wrong without removing it all and starting from scratch. I think the nature of CSS sometimes makes it easier to build stuff [20:22] <LouisLazaris> from scratch than to learn a frameworks’ intricacies. [20:22] <mitch> Do you have any recommendations for learning exercises like: here is an image for the page, now create the css for it. (this type of approach has worked well for me in the past) [20:23] <TheDutchCoder> LouisLazaris yes of course, the modularity is very nice, I dislike the aesthetical part of it. Just a quick example: Bootstrap removes background images on active states of buttons. Things like that make me feel it’s more of a “I’m a designer and don’t want to learn code” thing. ;-) [20:23] <thewebwiz> Thx Paul. [20:24] <artfulnessnl> is there a nice source for responsive navigation? [20:24] <Paul> thewebwiz You’re welocme :) [20:24] <HugoGiraudel> http://css-tricks.com/responsive-menu-concepts/ [20:24] <HugoGiraudel> By Tim Pietrusky at CSS-Tricks. [20:24] <artfulnessnl> and for mobile: a button/link which links to a telephone number? [20:24] <LouisLazaris> For those interested in getting on overdose of frameworks and other front-end tools, I’ve recently launched a new newsletter: http://webtoolsweekly.com/ [20:25] <artfulnessnl> how you do that [20:25] <artfulnessnl> :) [20:25] <artfulnessnl> tnx! [20:25] <HugoGiraudel> Use the phone number as a href. <a href=”0123456789″>Call me maybe</a>. [20:25] <HugoGiraudel> HAWK You might want to add this to the code editor. :) [20:25] <rachelandrew> @artfulnessnl http://bradfrost.github.io/this-is-responsive/patterns.html a great set of design patterns including navigation [20:25] <artfulnessnl> ooooow, luckely some things are also just easy ! [20:25] <thewebwiz> More patterns here: http://bradfrost.github.io/this-is-responsive/patterns.html#navigation [20:25] <HugoGiraudel> paulirish Hey Paul, nice to see you here! :) [20:26] <HAWK> HugoGiraudel – You can do it :) [20:26] <ralphm> Another responsive nav link (also Brad Frost): http://bradfrostweb.com/blog/web/responsive-nav-patterns/ [20:26] <LouisLazaris> paulirish has 4 minutes to stump us :) [20:26] <paulirish> :) hi all from russia! [20:26] <HAWK> HugoGiraudel DOn’t forget to save to Gist [20:26] <paulirish> “tel:” required? [20:27] <paulirish> <3z [20:27] <HugoGiraudel> Yes, forgot about this. :P [20:27] <artfulnessnl> I am going to steal the: call me maybe concept for sure [20:27] <HugoGiraudel> Saved editor: https://gist.github.com/6083436 [20:27] <paulirish> louis, no questions. just came by to watch n learn [20:27] <HAWK> 5 minute call, my friends [20:28] <TaoistTotty> Does the call me work for those using Skype on desktop? [20:28] <LouisLazaris> paulirish haha cool [20:28] <artfulnessnl> TaoistTotty that would be awesome, ha! [20:28] <LouisLazaris> There should be <a href=”snailmail:55 Whatever drive”>My Address</a>!! :) [20:29] <thewebwiz> Q. tel: link – how to make international phone number. Include + and country code? [20:29] <artfulnessnl> I always have problems with centering stuff. like navigation that has a float left [20:30] <artfulnessnl> is there a trick? [20:30] <HugoGiraudel> I guess whatever you put after `tel:` (as long as it’s a number) get parsed. So <a href=’tel:+33123456789′>Call</a> should work. I might be wrong though, really not sure about this. [20:30] <LouisLazaris> Not sure if this helps: http://demosthenes.info/blog/536/Adding-Phone-Numbers-To-Web-Pages-With-HTML5-&-Microdata [20:30] <TheDutchCoder> artfulnessnl if you use inline-blocks then you can set the parent to text-align: center [20:30] <paulirish> taoist, it works if skype installed this nasty browser extension that hijacks all your telephone numbers. otherwise nope. mostly a mobile thing [20:30] <thewebwiz> artfulnessnl try inline-block [20:30] <TheDutchCoder> Just make sure there’s no whitespace in between elements (use HTML comments to remove them if you want your code not to become one long string) [20:31] <ralphm> @artfulnessnl There are better options than float in that case, like display: inline-block and display: table … [20:31] <lj> Are their any problems with using inline-block? [20:31] <LouisLazaris> artfulnessnl I wrote about that here: http://www.impressivewebs.com/center-multiple-divs/ which works on list items too [20:31] <HAWK> So that’s our hour up people. Thanks for taking part. [20:31] <TaoistTotty> paulirish Thanks, and I agree about that being nasty [20:31] <HAWK> A HUGE thanks to Louis and Rachel for their time. [20:31] <HugoGiraudel> Fighting the gaps between inline-blocks. [20:31] <HAWK> You’re all welcome to stick around and chat for as long as you like, but I’ll cut our experts free when they’re ready [20:32] <paulirish> **applause for Louis & Rachel!**[20:32] <LouisLazaris> Thanks everyone, I’ll stick around for a bit [20:32] <thewebwiz> Hear hear on thee applause [20:32] <Jerry> Thanks everyone! [20:32] <rachelandrew> thank you – good to chat to you all :) it’s late here so I’ll be disappearing in a moment [20:32] <HAWK> And for anyone that missed it, here is Louis and Rachel’s latest book https://learnable.com/books/jscss1 [20:32] <TheDutchCoder> lj not if you develop for IE8+ [20:32] <TaoistTotty> Same here on the applause [20:33] <Graeme> thanks now I’ve got a hundred tabs open with all the good links suggested [20:33] <lj> what about Chrome font face-rendering….and thanks so much Rachel and Louis and everyone [20:34] <LouisLazaris> Here’s a general question for all: Do you find yourself using the official specs for research? Or do you normally just use MDN or other such references? [20:34] <lj> I liked the book. Couldnt put it down. read it cover to cover [20:35] <TheDutchCoder> LouisLazaris both tbh. I find the official specs to be a bit overwhelming at times and MDN a bit too limited in their use-cases, so a bit of both! [20:35] <HugoGiraudel> MDN most of the time. Official specifications when I want to dig deep into something. [20:35] <HenriHelvetica> @LL what ever comes up in the searches! ;) but I do like MDN [20:35] <paulirish> lj.. lots of work going into Chrome text rendering on windows lately. basically it means porting the text rendering backend from GDI into DirectWrite. it’s a biggg effort but we’re moving fast on it nowadays [20:35] <artfulnessnl> read the book to. But I always find myself struggling when I then put it into practice. everything seems so simple when you read [20:35] <TaoistTotty> LouisLazaris Usually other references as I tend to assume I won’t understand the official specs. [20:35] <artfulnessnl> and then you end up spending 3 hours on one div that doesnt go where you want :D [20:36] <paulirish> lj: https://code.google.com/p/chromium/issues/detail?id=137692#c104 has the latest update [20:36] <lj> THanks for the update PaulIrish…I thought maybe it was me. Is there a workaround? [20:36] <LouisLazaris> I agree with what HugoGiraudel said, I use both, but I personally think the spec has way too much stuff in it that doesn’t matter, and I think it could be trimmed down. It’s also got too much jargon and stuff that everyday people just don’t understand. [20:36] <paulirish> the workaround most people use is using the svg font instead of the woff for Chroem [20:37] <paulirish> *Chrome. this mostly works fairly well. [20:37] <HugoGiraudel> Seriously, official spec are not for everyday read. It is overly complicated (which is perfectly normal by the way). [20:37] <HenriHelvetica> ok… here’s something I struggle with: when is it best to use CLEAR property?? [20:37] <TheDutchCoder> LouisLazaris I think the spec *should* be very detailed, just for those edge cases, but yes, a more readable version would be nice for devs and newcommers [20:37] <lj> I found a few tips in the book to help me immediately with my projects [20:37] <TheDutchCoder> -m [20:37] <LouisLazaris> I think someone could easily built a funny quotes website called QuotesFromW3C.com :) with lots of ridiculously hard to understand examples. [20:37] <HugoGiraudel> I’d say when you have elements A and B floated, and C as a direct sibling of B. Then you can clear with C. [20:38] <chineebro> btw any headway of the responsive images front. None of the solutions seem ideal – canvas, multiple images size via media queries etc [20:38] <LouisLazaris> I think http://webplatform.org/ is supposed to be a sort of middle ground in that area. [20:38] <lj> So I can specify the svg for Chrome, somehow, let’s say with Modernizr? Of course I have all the formats in there [20:38] <LouisLazaris> But I feel it came too late in the game to have a major impact. [20:39] <ralphm> I have high hopes for WebPlatform. Looking forward to its growth. [20:39] <HenriHelvetica> HugoGiraudel hmmm…. I wish there was an example I could see. I’m green @ this [20:39] <paulirish> webplatform.org is still trucking. just been quiet on the outreach front but the content is doing very well [20:39] <LouisLazaris> chineebro I think that will always be a problem until we get a single, cross-browser solution that solves all the issues. [20:40] <HenriHelvetica> it’s not come up many times, but when it has in class, i’ve just scratched my head. [20:40] <HenriHelvetica> and maybe that’s it, i’ve not seen it enough times. but, thought I would ask. [20:40] <paulirish> lj: i would sniff for chrome on windows and set a class.. use that to use a diff @ff definition that has svg in front.. you still want woff in front for everyoen else imho [20:41] <HugoGiraudel> HenriHelvetica https://jsfiddle.net/e26Xs/ [20:41] <LouisLazaris> chineebro My knowledge of the resp. images thing is pretty limited now. I’ve been mostly just reading other people’s thoughts and waiting for something good to emerge, so I can’t say much in that area. :) [20:41] <HugoGiraudel> HenriHelvetica Try removing clear: both from C. [20:41] <ralphm> @Henri when a non-floated element follows floated elements, it will tend to try to slide up beside the floated elements, which you often don’t want. So setting it to clear stops that happening. [20:42] <TheDutchCoder> For most images I simply scale them in the browser, as most devices that need responsive layouts tend to render them nicely, but it’s far from ideal (e.g. it still downloads the full image of course) [20:42] <lj> Thanks Paul Irish…this Talk has made my day. Gotta go. Bye. Look fwd to seeing the transcript with the many resources and links [20:42] <HAWK> Ok guys, I have to head off – I haven’t had breakfast yet. [20:43] <HAWK> Feel free to hang around for as long as you like, but note that the session will no longer be moderated. [20:43] <Paul> HenriHelveticaThis is a very old article but should help : http://www.search-this.com/2007/09/05/lets-be-clear-about-this/ [20:44] <chineebro> I wonder if it will be as big of an issue in a few years time as bandwidths and data speeds increase [20:44] <LouisLazaris> chineebro That would be ideal, if some sort of break-through data transfer technology would make that whole issue moot… but I doubt that will happen any time soon. [20:45] <paulirish> i’m out. later Louis, Hugo. <3z [20:45] <TheDutchCoder> chineebro agreed… And also don’t forget that for truly responsive images you need to generate several versions of the same image, sometimes cropped differently too… Maybe someday this will be much easier to do in CSS natively. [20:45] <LouisLazaris> Okay, thanks Paul [20:45] <HugoGiraudel> See you Paul! Thanks for passing by. :) [20:46] <chineebro> Yea I feel as the best solution is to have a new type of file format that compress well. But that would mean introducing a whole new standard… :) [20:46] <HenriHelvetica> Thx gents for the links. [20:47] <LouisLazaris> After this is over, If anyone has any questions, I’m happy to hear them if you contact me directly: http://www.impressivewebs.com/contact/ [20:48] <LouisLazaris> And again, in addition to the book (https://learnable.com/books/jscss1/online/ch01.html) you can also check out my newest project, a new weekly newsletter for front-end developers: http://webtoolsweekly.com/ </shameless plugs> :) [20:48] <andychups> Sorry, i am novice here. Louis can you explain me about FnExpr and FnDecl? [20:49] <ralphm> Thanks Louis. I’m signing up. :-) [20:49] <LouisLazaris> andychups I don’t know what those are…. where are you getting those words from? [20:50] <TheDutchCoder> I think that’s Java talk, no? ;) [20:52] <john> guys, do you know BEM? [20:52] <TheDutchCoder> john yes I use it for our projects [20:53] <LouisLazaris> john I know of it, and I think it’s a very good methodology for large teams working on large projects. But I haven’t used it. [20:53] <HugoGiraudel> Sure. [20:55] <LouisLazaris> I think andychups was messing with us [20:55] <LouisLazaris> Anyhow, I gotta head out everyone, thanks.

Frequently Asked Questions (FAQs) about CSS and Web Design