incompl/learnlayout

source for learnlayout.com

This is the source for learnlayout.com in case you’re curious how it was built.

How to Build

• If needed, install NPM
  • Last tested version was 6.14.4
• If needed, install grunt npm install -g grunt-cli
  • Last tested grunt-cli version was 1.3.2
  • Last tested grunt version was 0.4.5
• If needed, do a npm install
• If needed, install jekyll sudo gem install jekyll
  • Last tested version was 4.1.1
• If needed, install pygments
  • I most recently used `brew install pygments` on Mac
  • Last tested version was 2.7.2
• Build + run test server with grunt serve
• or build only with grunt

How to Translate

Translation files live in the translations directory. Each file is a 2-letter ISO 639-1 language code and the YAML file extention.

If you’re not familiar with YAML, it’s a very simple human-readable data format. Each line contains a translation code, a colon, and a value in quotes. The translation codes are the same in every language, and the actual translation on the right is in the appropriate language for the file.

To contribute to a translation, start with en.yaml and either email me translated YAML files or make pull requests against this repository if you know how.

To test a translation, add a lang parameter when using the grunt commands described above. For example, grunt serve --lang=es

License

Attribution-NonCommercial 4.0 International

learnlayout's Issues

What is a wrapper?

Hello,

I was just wondering if you would be able to explain to me or make a section on what wrappers are and why they are used with CSS and layouts. I always see sometimes that have a whole bunch of nested divs and other things and I am never sure why there need to be so many divs and why there is always a div called container or wrapper.

Hopefully you know what I mean if not let me know lol

Thanks,
Gary

You could add a Google+ button as well

https://developers.google.com/+/web/+1button/

Translate into Russian

If you need any help with that, I'm in. Thanks

Inconsistency on "learnlayout.com" page: http://learnlayout.com/box-model.html

Hello,
I love the learnlayout.com site, and thank you very much for providing the CSS tips in a clear, easy to understand format.
I just wanted to let you know there is a minor nconsistency on "learnlayout.com" page link: http://learnlayout.com/box-model.html wherein the 'fancy box' CSS states it's border is "blue" when it is actually hex #6AC5AC (green).
I know you strive for perfection, so may want to correct it.
Thanks again for the wonderful information you so generously provide to web developers. DH

Persian style improvements

< code > tags in Persian are rtl, which is wrong, and must be ltr.

Also as a suggestion, Tahoma is not good for Persian when its representing non-small texts. Unfortunately there are not many options to choose a proper font for Persian language. I think, as many Persian websites are using DroidNaskh font and it is a stylish font, its better to change it to DroidNaskh which can be accessed from Google Web Fonts by:

@import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css);
font-family: 'Droid Arabic Naskh', serif;

Translate into Arabic

Hello,
I would love to see this website written in Arabic, and I am ready to help in translating it.

Display none default value

Hi Greg,

You mentionned "Another common display value is none. There are no elements that use this as their default. [...]"

In fact, the input:hidden element has display:none!important; value by default.

Thank you.
Regards.
Geoffrey

Font for Persian and Arabic

Some reader told me that it might be better to change font-family for Persian to "Droid Arabic Naskh" or "tahoma". I agree, because default fonts for middle eastern languages, like "Arial" are usually terrible.

"Droid Arabic Naskh" is available on https://www.google.com/fonts/earlyaccess .

Android older version default browser not support two element in fit 50% of each in one row.

Android default browser for older version, when i create two elements side by side per row without floating the element, just set width 50% for each but the browser render different way, it has extra space.
Solution i try to make is set parent div font-size:0; but it seem not work, it will drop to second line.
My display for those element is with dynamic height, and more than one row.
Floating the element can be solve, to let it fit nicely to device, but because of dynamic height, so if let say first row 2nd element has short height than first element, the 2nd row first element will stick to first row.
Is there any better solution than not to float the element and add clear after? as i know some older browser not support ::after.
Thanks

German translation tweaks

• use "ß" where appropriate, as in "große" (not "grosse")
• Beware the Deppenleerzeichen: e.g. "CSS-Grundlagen" needs a hyphen. I'd suggest the same for words like "Box-Model", unless you keep the english term, but then I'd spell it all lowercase: "box model"
• Always have a space after comma, period etc.

clicking on the very top of the next / previous buttons doesn't work

@isaacdurazo can you take a look at this?

No share links?

Hi guys,

Really enjoyed the site, wish it was easier to share...

wrong translation

on "http://learnlayout.com/", under languages navigation, Farsi must be "فارسی" and not "رسیدن".

Better way of explaining display none vs visibility hidden

Just had some feedback on this line:
"Setting display to none will not leave space where the element would have been, but visibility: hidden; will leave an empty space."

I'd explain it as something more along the lines of this:
"Setting display to none will treat the element as if it were not there, whereas visibility: hidden; will hide the element, but it will still take up the space it does when fully visible."

Using overflow:hidden as an alternative for floats in layout.

I found this technique of using overflow:hidden a much more practical way to do multi-column layouts than using floats. It is a shame it isn't more widely known.

http://colinaarts.com/articles/the-magic-of-overflow-hidden/

This technique also introduces the concept of "flow", which was touched on in the tutorial in relation to position, but I think it should be expanded upon.

Nested float example

Hey guys I think it would be great if you could make an example showing how pages with nested floats and nested columns work. This is one of the best CSS layout things I have ever seen!!

http://learnlayout.com/position.html

Decription about absolute:

If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling.

I think when the ancestor is no positioned,the absolute-positioned element will not move along with page scrolling.

Mention mobile issues with position:fixed

CSS position: fixed has mixed support (or lack of) across mobile browsers. It is a decent technology for window fixed elements in desktop browsers, but it can't be relied on for mobile browsers. Should the tutorial mention it?

CSS Frameworks Section: consider Cascade Framework

Just last weekend, I released a new CSS framework I labeled “Cascade Framework”.

Cascade Framework combines feature richness with modularity,
flexibility and a tiny footprint while maintaining support for old
browsers.

Feel free to check it out at http://jslegers.github.com/cascadeframework/ .

Translate into Brazilian Portuguese

@thiagoquint on twitter is working on this.

Never, ever forget to set the background color.

body { background: #fff }

Why is this so hard? Why doesn't anyone pay attention? This is probably the most important property to set on ANY website. Why? Because currently I have dark gray text on gray background, just because I use a dark system color scheme. And no, I don't use Macs.

max-width is not supported by IE7 as you claim

http://learnlayout.com/max-width.html

See the link you point to:

http://caniuse.com/#search=max-width

Grunt is failing in jekyll process

I have jekyll installed (using Ruby 2.1.0 here) and somehow the grunt process isn't running.

I am preparing some patches and I would like to make it run but I'm not expert on using Jekyll.

Problem with top menu in Firefox

Using firefox 16, in Persian, there is a problem with Top menu, You can see in picture below

CSS frameworks section - I would add Foundation and Kube framework too

In "frameworks" section, I would add Foundation and Kube frameworks too.

http://foundation.zurb.com/
http://imperavi.com/kube/

Great site by the way!

Keep up the good work,
Nikola

Show difference between inline and inline-block and block somewhere?

Per discussion

Translate into German

Offered by @chzumbrunnen on twitter https://twitter.com/chzumbrunnen/status/311797010007207936

CSS Frameworks Section: Replace 960gs with it's successor Unsemantic.

See http://www.unsemantic.com, I've been working with it for a few weeks and it's brilliant.

single page grammar introduction would help

I've written some CSS (just hacking at it) and had trouble following these lessons - until I found this page on "selectors" [http://www.w3schools.com/cssref/css_selectors.asp].

A simplified page with basic syntax for selectors would make a VERY useful link on the introductory page of these lessons. (for understanding '*' and '#' notation)

Thanks, a great learning experience!

Float Layout page missing text opening nav tag

Float Layout is missing the opening faux/text <nav>.

Translate site into spanish

Needs moar license

Someone just asked me if they could use this for a class, adapt it, etc. Would be great to have a license on it!

Display:table

Great tutorial overall. Clearly written and to the point.
However you should at least mention display:table (and perhaps display:grid) and give some advice as to where (if at all) it should be used.

html5 tags are inline in unsupported browsers

html5 tags like header are rendered as inline in old browsers. We need to manually set them as block. Browsers will make any unknown elements inline.

Still having trouble with buttons

If I click right below the button text the button doesn't work

Wraps weird with small window

lmk if you want screenshots

Take care for * selector

Hi,

on box-sizing page you show usage of the CSS * selector, which is itself no performance hit anymore... with two exceptions, which I think should be noted:

• IE6 performance will drop for some reason, although IE6 marketshare has dropped massively
• When not knowing about this and later-on using transform stuff from CSS3, then performance may drop as seen in http://lauripiispanen.github.com/blog/2012/03/05/best-way-to-kill-html5-tablet-app-performance/

Marco

Persian needs some RTL layout work

In position.html, red box is not positioned properly

In position-example.html, float-layout.html , media-queries.html and percent.html, sidebar must be a right-side sidebar, to match with rtl.

In inline-block.html, first example items are float left and not the same as second example. So they must have float:right

In inline-block-layout.html and flexbox.html, sidebar is correctly a right-side sidebar! May be you want to skip previous issue and change this one.

[Request] - Box Sizing also mention the purpose of the -webkit and -moz prefixes

Hello,

I feel that the Box Sizing page should contain info on the -webkit and -moz prefixes. Not in details, but their significance and why one does not simply use box-sizing sans the prefixes.

Bootstrap link is not working on slide 19.

Bootstrap link is not working on slide 19.

Page Progression Markers

A page progression would be helpful, e.g. 12/36, 13/36, etc. There's no indication of how far you're into it and how far you have to go. Thank you.

need padding around screen on mobile

flexbox browser support

These examples currently only work in the Chrome flexbox implementation.

They actually work, unprefixed, in Firefox 19+ (but it is behind a pref until Firefox 21) and Opera 12.10+ (MDN, and I've verified this myself—your demo page is identical in those two browsers and Chrome).

Translate this site in french

Hello,
I would be interested for you to translate the site into French.
soon

Some necessary fixes for right-to-left languages like Persian.

There are some necessary things to be fixed with Persian/Farsi/Arabic/Hebrew.

1. <code> must have "direction:ltr"
2. margin_auto.title: "margin: auto;" This must be "ltr", so it might be needed to be change to margin_auto.title: "<span style=\"direction:ltr\">margin: auto;</span>" or something similar
3. In position.html, red box is not positioned properly
4. In position-example.html, float-layout.html , media-queries.html and percent.html, sidebar must be a right-side sidebar, to match with rtl.
5. In media-queries.html, red sidebar items are not translatable.
6. In inline-block.html, first example items are float left and not the same as second example. So they must have float:right
7. In inline-block-layout.html and flexbox.html, sidebar is correctly a right-side sidebar! May be you want to skeep 4th issue and change this one.
8. The "Twitter" share link at the bottom of all pages is not translatable.
9. And one of most important ones! At the bottom of the index page among languages, it must be فارسی and not رسیدن
10. And as a suggestion, it is better to have paragraphs justified.

Playground

What I really think this needs a play ground where you can play with layout. Of course I used Chrome dev tools to mingle some CSS properties but it is not that fun.

Maybe some excercies? That will be fun.

position:absolute in tandem with position:static(default)

(before I submit this issue, this site is amazingly awesome & helpful. Thank you!)
I'm looking at this page: http://learnlayout.com/position-example.html

My issue is regarding position:absolute applied to the nav element:

The section elements flow to the right of the nav due to the "margin-left:200px;" applied to them. It may be beneficial to discuss what happens when "margin" is not applied to the section elements. I'm a fairly amateur front-end person so I could be wrong here, but I'm pretty sure "position:absolute" takes the element out of the flow of the parent element. If so, this could be a useful tip somewhere.

Again, thanks for an amazing tutorial!

Update Gumby logo

Review the float containment page

The clear page is lacking some good (and proper) informations.

We don't want the beginners to think that they need a dummy element .after-box to clear their floats.
Also the cons of .clearfix { overflow: hidden; } are not described.

The Float containment article explains in details what I am reporting here.

It would be great to have those info on learnlayout.com so we can start to link at the website on IRC for instance.

Cheers

Publish fixes in non-english languages

consider adding something re: % width on images (responsive as heck)