-
Notifications
You must be signed in to change notification settings - Fork 71
/
en.yaml
171 lines (148 loc) · 20 KB
/
en.yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
# English
global.title: "Learn CSS Layout"
global.short_title: "CSS"
global.home: "Home"
global.toc: "Table of Contents"
global.next: "Next"
global.previous: "Previous"
global.feedback: "Issues / Feedback"
util.extra_credit: "extra credit"
util.ipsum: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit."
util.nav.1: "Home"
util.nav.2: "Taco Menu"
util.nav.3: "Draft List"
util.nav.4: "Hours"
util.nav.5: "Directions"
util.nav.6: "Contact"
index.1: "This site teaches the CSS fundamentals that are used in any website's layout."
index.2: "I assume you already know what selectors, properties, and values are. And you probably know a thing or two about layout, though it may still be a rage-provoking activity for you. If you want to learn HTML and CSS from the beginning, you should check out <a href=\"http://learn.shayhowe.com/html-css/\">this tutorial</a>. Otherwise, let's see if we can save you some fury on your next project."
index.translator: ""
index.get_started: "Get Started"
no_layout.title: "no layout"
no_layout.1: "Having no layout whatsover is almost ok if all you want is one big column of content. However, if a user makes the browser window really wide, it gets kind of annoying to read: after each line your eyes have a long distance to travel right-to-left to the next line. Try resizing your browser to see what I mean!"
no_layout.2: "Before we fix this problem, let's make sure we're clear on the very important <code>display</code> property."
display.title: "the \"display\" property"
display.intro: "<code>display</code> is CSS's most important property for controlling layout. Every element has a default display value depending on what type of element it is. The default for most elements is usually <code>block</code> or <code>inline</code>. A block element is often called a block-level element. An inline element is always just called an inline element."
display.block.title: "block"
display.block: "<code>div</code> is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can. Other common block-level elements are <code>p</code> and <code>form</code>, and new in HTML5 are <code>header</code>, <code>footer</code>, <code>section</code>, and more."
display.inline.title: "inline"
display.inline.1: "<code>span</code> is the standard inline element. An inline element can wrap some text inside a paragraph"
display.inline.2: "like this"
display.inline.3: "without disrupting the flow of that paragraph. The <code>a</code> element is the most common inline element, since you use them for links."
display.none.title: "none"
display.none.1: "Another common display value is <code>none</code>. Some specialized elements such as <code>script</code> use this as their default. It is commonly used with JavaScript to hide and show elements without really deleting and recreating them."
display.none.2: "This is different from <code>visibility</code>. Setting <code>display</code> to <code>none</code> will render the page as though the element does not exist. <code>visibility: hidden;</code> will hide the element, but the element will still take up the space it would if it was fully visible."
display.other.title: "other display values"
display.other: "There are plenty of more exotic display values, such as <code>list-item</code> and <code>table</code>. <a href=\"https://developer.mozilla.org/en-US/docs/CSS/display\">Here is an exhaustive list</a>. We'll discuss <code>inline-block</code> and <code>flex</code> later on."
display.extra: "As I mentioned, every element has a default display type. However, you can <em>always</em> override this! Though it wouldn't make sense to make an inline div, you can use this to customize the display of elements that have particular semantics. A common example is making inline <code>li</code> elements for horizontal menus."
margin_auto.title: "margin: auto;"
margin_auto.1: "Setting the <code>width</code> of a block-level element will prevent it from stretching out to the edges of its container to the left and right. Then, you can set the left and right margins to <code>auto</code> to horizontally center that element within its container. The element will take up the width you specify, then the remaining space will be split evenly between the two margins."
margin_auto.2: "The only problem occurs when the browser window is narrower than the width of your element. The browser resolves this by creating a horizontal scrollbar on the page. Let's improve the situation..."
max_width.title: "max-width"
max_width.1: "Using <code>max-width</code> instead of <code>width</code> in this situation will improve the browser's handling of small windows. This is important when making a site usable on mobile. Resize this page to check it out!"
max_width.2: "By the way, <code>max-width</code> is <a href=\"http://caniuse.com/#search=max-width\">supported by all major browsers</a> including IE7+ so you shouldn't be afraid of using it."
box_model.title: "the box model"
box_model.intro: "While we're talking about width, we should talk about width's big caveat: the <em>box model</em>. When you set the width of an element, the element can actually appear bigger than what you set: the element's border and padding will stretch out the element beyond the specified width. Look at the following example, where two elements with the same width value end up different sizes in the result."
box_model.simple: "I'm smaller..."
box_model.fancy: "And I'm bigger!"
box_model.outro: "For generations, the solution to this problem has been extra math. CSS authors have always just written a smaller width value than what they wanted, subtracting out the padding and border. Thankfully, you don't have to do that anymore..."
box_sizing.title: "box-sizing"
box_sizing.1: "The original box model behavior was eventually considered unintuitive, so a new CSS property called <code>box-sizing</code> was created. When you set <code>box-sizing: border-box;</code> on an element, the padding and border of that element no longer increase its width. Here is the same example as the previous page, but with <code>box-sizing: border-box;</code> on both elements:"
box_sizing.simple: "We're the same size now!"
box_sizing.fancy: "Hooray!"
box_sizing.2: "Since this is so much better, some authors want all elements on all their pages to always work this way. Such authors put the following CSS on their pages:"
box_sizing.3: "This ensures that all elements are always sized in this more intuitive way."
box_sizing.4: "Since <code>box-sizing</code> is pretty new, you should use the <code>-webkit-</code> and <code>-moz-</code> prefixes for now, as I have in these examples. This technique enables experimental features in specific browsers. Also, keep in mind that this one is <a href=\"http://caniuse.com/#search=box-sizing\">IE8+</a>."
position.title: "position"
position.intro: "In order to make more complex layouts, we need to discuss the <code>position</code> property. It has a bunch of possible values, and their names make no sense and are impossible to remember. Let's go through them one by one, but maybe you should bookmark this page too."
position.static.title: "static"
position.static.1: "<code>static</code> is the default value. An element with <code>position: static;</code> is not positioned in any special way. A static element is said to be <em>not positioned</em> and an element with its position set to anything else is said to be <em>positioned</em>."
position.relative.title: "relative"
position.relative.1: "<code>relative</code> behaves the same as <code>static</code> unless you add some extra properties."
position.relative.2: "Setting the <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code> properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element."
position.fixed.title: "fixed"
position.fixed.1: "A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. As with <code>relative</code>, the <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code> properties are used."
position.fixed.2: "I'm sure you've noticed that fixed element in the lower-right hand corner of the page. I'm giving you permission to pay attention to it now. Here is the CSS that puts it there:"
position.fixed.3: "A fixed element does not leave a gap in the page where it would normally have been located."
position.fixed.4: "Mobile browsers have surprisingly shaky support for fixed. <a href=\"http://bradfrostweb.com/blog/mobile/fixed-position/\">Learn more about the situation here</a>."
position.fixed.example: "Hello! Don't pay attention to me yet."
position.absolute.title: "absolute"
position.absolute.1: "<code>absolute</code> is the trickiest position value. <code>absolute</code> behaves like <code>fixed</code> except relative to <em>the nearest positioned ancestor</em> instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a \"positioned\" element is one whose position is anything except <code>static</code>."
position.absolute.2: "Here is a simple example:"
position.absolute.relative: "This element is relatively-positioned. If this element was <code>position: static;</code> its absolutely-positioned child would escape and would be positioned relative to the document body."
position.absolute.absolute: "This element is absolutely-positioned. It's positioned relative to its parent."
position.absolute.3: "This stuff is tricky, but it's essential to creating great CSS layouts. On the next page we'll use <code>position</code> in a more practical example."
position_example.title: "position example"
position_example.1: "This position stuff might make a little more sense in a practical example. Below is a realistic page layout."
position_example.section.1: "The <code>margin-left</code> style for <code>section</code>s makes sure there is room for the <code>nav</code>. Otherwise the absolute and static elements would overlap"
position_example.section.2: "Notice what happens when you resize your browser. It works nicely!"
position_example.2: "This example works because the container is taller than the nav. If it wasn't, the nav would overflow outside of its container. In the coming pages we'll discuss other layout techniques that have different pros and cons."
position_example.footer: "If you use a fixed header or footer, make sure there is room for it! I put a <code>margin-bottom</code> on the <code>body</code>."
float.title: "float"
float.1: "Another CSS property used for layout is <code>float</code>. Float is intended for wrapping text around images, like this:"
clear.title: "clear"
clear.floating: "I feel like I'm floating!"
clear.1: "The <code>clear</code> property is important for controlling the behavior of floats. Compare these two examples:"
clear.2: "In this case, the <code>section</code> element is actually after the <code>div</code>. However, since the <code>div</code> is floated to the left, this is what happens: the text in the <code>section</code> is floated around the <code>div</code> and the <code>section</code> surrounds the whole thing. What if we wanted the <code>section</code> to actually appear after the floated element?"
clear.3: "Using <code>clear</code> we have now moved this section down below the floated <code>div</code>. You use the value <code>left</code> to clear elements floated to the left. You can also clear <code>right</code> and <code>both</code>."
clearfix.title: "the clearfix hack"
clearfix.1: "Here is a weird, bad thing that can sometimes happen when using floats:"
clearfix.2: "Uh oh... this image is taller than the element containing it, and it's floated, so it's overflowing outside of its container!"
clearfix.3: "Boo. There is a way to fix this, but it's ugly. It's called the <em>clearfix hack</em>."
clearfix.4: "Let's try adding this new CSS:"
clearfix.5: "Now let's see what happens:"
clearfix.6: "Much better!"
clearfix.7: "This works for modern browsers. If you want to support IE6 you will want to add the following:"
clearfix.8: "There are exotic browsers that may require extra attention. <a href=\"http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best\">The world of clearfixing is pretty scary</a>, but this simple solution will work for the vast majority of browsers today."
float_layout.title: "float layout example"
float_layout.1: "It's very common to do entire layouts using <code>float</code>. Here is the same layout we did with <code>position</code> earlier, but using <code>float</code> instead."
float_layout.2: "This example works just like the last one. Notice we put a <code>clearfix</code> on the container. It's not needed in this example, but it would be if the <code>nav</code> was longer than the non-floated content."
percent.title: "percent width"
percent.1: "Percent is a measurement unit relative to the containing block. It's great for images: here we make an image that is always 50% the width of its container. Try shrinking down the page to see what happens!"
percent.2: "You could even use <code>min-width</code> and <code>max-width</code> to limit how big or small the image can get!"
percent.layout.title: "percent width layout"
percent.layout.1: "You can use percent for layout, but this can require more work. In this example, the <code>nav</code> content starts to wrap in a displeasing way when the window is too narrow. It comes down to what works for your content."
percent.layout.2: "When this layout is too narrow, the <code>nav</code> gets squished. Worse, you can't use <code>min-width</code> on the nav to fix it, because the right column wouldn't respect it."
media_queries.title: "media queries"
media_queries.1: "\"Responsive Design\" is the strategy of making a site that \"responds\" to the browser and device that it is being shown on... by looking awesome no matter what."
media_queries.2: "Media queries are the most powerful tool for doing this. Let's take our layout that uses percent widths and have it display in one column when the browser is too small to fit the menu in the sidebar:"
media_queries.3: "Now when you resize your browser it's even cooler than ever!"
media_queries.4: "Tada! Now our layout looks great even on mobile browsers. Here are <a href=\"http://mediaqueri.es/\">some popular sites that use media queries this way</a>. There is a whole lot more you can detect than <code>min-width</code> and <code>max-width</code>: check out <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Media_queries\">the MDN documentation</a> to learn more."
media_queries.5: "You can make your layout look even better on mobile using <a href=\"http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/\">meta viewport</a>."
inline_block.title: "inline-block"
inline_block.1: "You can create a grid of boxes that fills the browser width and wraps nicely. This has been possible for a long time using <code>float</code>, but now with <code>inline-block</code> it's even easier. <code>inline-block</code> elements are like <code>inline</code> elements but they can have a width and height. Let's look at examples of both approaches."
inline_block.hard_way.title: "The Hard Way (using float)"
inline_block.hard_way.box: "I'm floating!"
inline_block.hard_way.after: "I'm using clear so I don't float next to the above boxes."
inline_block.easy_way.title: "The Easy Way (using inline-block)"
inline_block.easy_way.info: "You can achieve the same effect using the <code>inline-block</code> value of the <code>display</code> property."
inline_block.easy_way.box: "I'm an inline block!"
inline_block.easy_way.after: "I don't have to use <code>clear</code> in this case. Nice!"
inline_block.2: "You have to do extra work for <a href=\"http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/\">IE6 and IE7 support</a> of <code>inline-block</code>. Sometimes people talk about <code>inline-block</code> triggering something called <code>hasLayout</code>, though you only need to know about that to support old browsers. Follow the previous link about IE6 and IE7 support if you're curious to learn more. Otherwise, let's continue."
inline_block_layout.title: "inline-block layout"
inline_block_layout.1: "You can also use <code>inline-block</code> for layouts. There are a few things to keep in mind:"
inline_block_layout.caveat.1: "<code>inline-block</code> elements are affected by the <code>vertical-align</code> property, which you probably want set to <code>top</code>."
inline_block_layout.caveat.2: "You need to set the width of each column"
inline_block_layout.caveat.3: "There will be a gap between the columns if there is any whitespace between them in the HTML"
inline_block_layout.tada: "Tada!"
column.title: "column"
column.1: "There is a new set of CSS properties that let you easily make multi-column text. Have a look:"
column.2: "CSS columns are very new, so you need to use the prefixes, and it won't work <a href=\"http://caniuse.com/#search=column\">through IE9 or in Opera Mini</a>. There are some more column-related properties, so <a href=\"http://www.quirksmode.org/css/multicolumn.html\">click here to read more</a>. Otherwise, off to the next topic."
flexbox.title: "flexbox"
flexbox.1: "The new <code>flexbox</code> layout mode is poised to redefine how we do layouts in CSS. Unfortunately the specification has changed a lot recently, so it's implemented differently in different browsers. Still, I'd like to share a couple examples so you know what's coming up. These examples currently only work <a href=\"http://caniuse.com/flexbox\">some browsers</a> that use the <a href=\"http://www.w3.org/TR/css3-flexbox/\">latest version of the standard</a>."
flexbox.2: "There are a lot of out-of-date flexbox resources around. If you want to learn more about flexbox, <a href=\"http://css-tricks.com/old-flexbox-and-new-flexbox/\">start here</a> to learn how to identify if a resource is current or not. I have written a <a href=\"http://weblog.bocoup.com/dive-into-flexbox/\">detailed article using the latest syntax</a>."
flexbox.3: "There is a lot more you can do with flexbox; these are just a few examples to give you an idea:"
flexbox.simple.title: "Simple Layout using Flexbox"
flexbox.simple.1: "Flexbox is so easy!"
flexbox.fancy.title: "Fancy Layout using Flexbox"
flexbox.fancy.1: "I will be 200px when there is room, and I will shrink down to 100px if there is not room, but no smaller."
flexbox.fancy.2: "I will always be 200px, no matter what."
flexbox.fancy.3: "I will fill up 1/3 of the remaining width."
flexbox.fancy.4: "I will fill up 2/3 of the remaining width."
flexbox.centering.title: "Centering using Flexbox"
flexbox.centering.1: "Finally, it's easy to vertically center something in CSS!"
frameworks.title: "css frameworks"
frameworks.1: "Because CSS layout is so tricky, there are CSS frameworks out there to help make it easier. Here are a few if you want to check them out. Using a framework is only a good idea if the framework really does what you need your site to do. They're no replacement for knowing how CSS works."
frameworks.2: "That's it! If you have any feedback on this site, please <a href=\"https://twitter.com/intent/tweet?source=webclient&text=%40_gsmith\">let me know on Twitter</a>!"
about.title: "about this site"
about.credits: "Written and built by <a href=\"http://incompl.com\">Greg Smith</a>. Design by <a href=\"http://www.isaacdurazo.com/\">Isaac Durazo</a>. We work at <a href=\"http://bocoup.com\">Bocoup</a>."