Some of these are really great at helping you understand Flexbox.
A Flexbox ‘playground’ (like CodePen) that lets you adjust flexbox values and see the results:
Same sorta thing, you may like it better:
A great intro document (originally a presentation) on why to use Flexbox, why it’s cool, how to use it, common errors – this is a really great document:
The ‘S’Mores Builder’ site referenced in the above PDF:
display: flex; /* as opposed to ‘display: block;’ or ‘display: inline;’ – makes your container flexible! */
flex-direction: row; (column;) /*adjust the main axis to be vertical or horizontal */
flex-wrap: wrap / no-wrap /*allow content to wrap inside a fixed-width container */
flex-flow: row wrap /*combines the above two rules! */
flex-shrink: 0/1 /*allow or disallow content to shrink beneath the default value */
flex-grow: 0/1 /*allow or disallow content to grow beneath the default value */
min-height: 100vh; /* ‘vh’ equals 1/100th of the browser’s overall height */
min-wifth: 100vw; /* ‘vh’ equals 1/100th of the browser’s overall height */
align-items: center; /* ‘vertically center content */
justify-content: center; /* ‘horizontally center content */
We are learning Flexbox today. It’s a great solution to all layout problems. But it’s confusing. So, as a follow-up, I’m asking you folks to follow along with a Lynda tutorial called ‘CSS: Flexbox First Look.’ You can view it by going to www.elon.edu/lynda and clicking the big Lynda icon in the middle; you’ll be prompted for your Elon credentials, and need to be on campus (or using the VPN) to see it.
Additionally, here’s links to the content I’ll be discussing in class:
What is the Holy Grail?
How to code the Holy Grail (old way)
Holy grail using Flexbox
A Complete Guide to Flexbox
While working on your resumes, many of you experienced the strange phenomenon of your code only occasionally ‘listening’ to your commands to adjust margin and padding to change placement. Inconsistencies regarding the result of paddingand margin are almost always due to the display setting of the element. We’ve already dealt with two types of display: inline and block. Inline elements, such as <span>, allow additional content to be displayed on the same horizontal line, but ignore commands like ‘width’ and ‘height’ and only adjust padding/margins horizontally. Block elements, like <div>, respond as one would predict to margin and padding rules, but block elements do not allow other elements to be displayed on the same line.
So, a new type of display setting is available: inline-block. An element set to ‘display:inline-block;‘ will listen to rules regarding width, height, padding and margin, but will also allow other elements to appear on the same line.
Here’s an excellent round-up of the display property, and specifically how inline-block works, which I recommend you read before Monday’s class:
Additionally, as we’ve mentioned in class, centering content can be tough. We’ve done the easy way (margin: 0 auto;), but that doesn’t always work. Here’s a great description of how to deal with centering issues:
Our next assignment regards layout, and I’ll ask each of you to sketch out three layouts (two ‘traditional,’ one creative). So start paying attention to the layout strategies of the Websites you check out. There are some kind of interesting ideas on Pinterest:
I’ll achieve some of our more bizarre layouts in part by utilizing the CSS ‘transform’ property, described here:
Class, as we went over in class, your FTP settings for connecting to the student server from any FTP program are:
Username/PW: your Elon username/PW combo
Please refer to this page on the wiki for step-by-step instructions on how to connect:
the <progress> and <meter> tags work well enough now in browsers that I encourage you to use them. The syntax is pretty easy: both require parameters for ‘min,’ ‘max’ and ‘value,’ and the meter will be assembled for you:
<progress min=”1″ max=”10″ value=’8′></progress>
To see the meter tag do the same thing, replace <progress> with <meter>.
The appearance of these bars cannot be totally controlled by CSS, as each browser/OS shows them slightly differently. Even whether the meter is animated depends largely on the browser.
Class, I’ve put an example of a stretchable background image on the server, in a folder called ‘background-stretch.’ Additionally, you may find this link useful in how to code a stretching background, and what the different options do:
The server also has an example of using Smooth Scroll. Here’s the URL I referenced when setting up that example, which walks you through the process from Step 1:
Favicons are the little icons that show up in your browser tabs, and that save when you bookmark a site. They also indicate the difference between an amateur site and a professional site.
While it’s relatively easy to create these little images, getting them to consistently show up on your site in various browsers can be a struggle. Here’s a few links that will help:
A great video walk-through (screencast) of how to create and add a favicon to your site:
A more in-depth explanation of the (now) complicated world of favicons:
An app that does the heavy lifting for you:
And here’s the code I used in class to add a favicon to my site:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Keep in mind, your ‘favicon.ico’ fie needs to be in the root directory of your site – the same location as your ‘index.html’ file – and that it may not show up in all browsers, so try a different one if you cannot see it.
OK, here’s what I’m looking for in your online resume:
First of all, it should be a resume! Not a portfolio, not a biography, but a resume. Some specifics that I’ll be checking for:
- A page title. Always necessary. ‘Your Name – Resume’ is a good one.
- A consistent, clear layout and design scheme for your resume. It’s fine if it looks ‘traditional;’ what’s most important is that it makes sense. Pick a color scheme, pick a font, use font weights and sizes effectively, make sure all the sections and text line up correctly.
- Effective use of CSS classes (.jobTitle, .jobDate, .jobDescription, etc.)
- Embedded font(s), to make things more interesting.
- Hyperlinks (opening in a new window) to your previous employers, schools, etc.
- A favicon. (We’ll cover this soon)
So those would be the assignment requirements. Here are a few good ideas of things to add:
- A picture: of you, or of what you do, or of something. Makes it a bit more personable.
- Icons instead of text, whenever possible. Consider replacing or amending your text for the ‘Awards’ part of your resume with, say, a little trophy?
- Some CSS3 bling, like rounded corners, drop-shadows, transitions, etc.
- Some CSS layout strategies, like a float or positioning.
- A nav, with smooth scrolling (more on this soon)
Some things to make sure you do NOT do:
- Use deprecated HTML, such as <i>, <u>, <b>, <center>, or use a <table> for layout.
- Make a super-wide page that adds a horizontal scrollbar in most desktop resolutions (max out any width declaration at about 960px)
- Have your resume look exactly like one of the ones we looked at in class!
- Create a design that only looks good at a certain screen resolution – we’re not making these mobile-friendly or responsive, but I should be able to resize the browser a little bit without the site collapsing
This project will be due on Wednesday, September 10. You should put it on your student networked drive and email me a link to it.
As with all of our assignments, I encourage you to send me a ‘draft’ version ahead of the due date, and I can point out what to fix / change.
CSS positioning should only be used deliberately; by which I mean you should not use it unless you intend on using it. It comes in 4 types, but one of those types doesn’t ‘do’ anything: static. That’s the default value; in other words, that’s what all of your HTML is set to automatically. So let’s look at the other ones more thoroughly:
Absolute. This is the one that causes the most headaches, but is used the least frequently (phew!). Absolute positioning removes an element from the flow of the document, meaning your other HTML totally ignores its placement (in other words, your regular HTML content will overlap what you absolutely position, so you need to plan for that).
Relative. Here, you’re just asking an HTML element, ‘could you please just scoot over a teeny, tiny bit? ‘ Wherever an element naturally lands on your page according to the flow of the document, relative positioning can be used to nudge it over a few pixels relative to its original position. Hence the name. This type of positioning can also result in overlapping content.
Fixed. To have a persistent header or footer, or a fixed sidebar, this is the positioning rule to use. ‘Fixed’ means that the element does not scroll with the rest of your content – it’s fixed in place.
As mentioned, these positioning strategies can result in elements overlapping. You can control what’s on top and what’s on bottom by using the z-index. A higher value for the z-index means the element is more on ‘top.’ Z-index values are relative to the document, i.e. if you position one element with a z-index of 2, it will be on top of another element with a z-index of 1. The scale goes up to 9,999, and many developers take that as an opportunity to spread their z-index values out, like 1, 50, 100, 150, etc.