Elon University Home

Interactive Writing & Design

Layout & Nav Rubric

Finally, our assignment rubric Woo HOO!!!!

Please try to contain your excitement.

Firstly, the


Please choose to implement three (3) of the following options:

  • A nav that uses Flexbox
  • A responsive nav that changes appearance when you resize the browser
  • A ‘show/hide’ style nav that uses the :target pseudo-class – an example is on the server
  • A nav that uses jQuery to work – examples include the Magic Line nav and the jQuery drop-down nav.
  • A drop-down navigation, like this - I’ll make a basic one in class Monday, and there’s one on the server.

A few additional notes:

  • The nav shouldn’t ‘go’ anywhere; that is, make your links go to ‘#’
  • The nav can (and should) be on a page by itself, i.e. not on the same page as your layouts. You could even make all three nav’s on one page….
  • You can use our examples on the server, just be sure to personalize your version so it looks different.

And now, without further ado…


Please choose and implement three (3) of the following options:

  • A flexbox layout (either the entire site uses flexbox, or you use a fixed-width container, which has internal elements controlled with flexbox. Versions of each are on the server)
  • A horizontal layout – I recommend using the ‘NEWhorizontalScroll’ file as a starting point (on the server)
  • A vertical layout that uses a jQuery plugin, like fullpage.js (examples on server), or even a parallax plugin
  • A crazy, wacky layout never-before-seen on Earth. I have a (silly, basic) example on the server called ‘fourCorners’
  • A full layout that is totally responsive, using media queries.*

A few additional notes on the layouts:

  • I don’t care they have content. Some layouts are easier to achieve with content – for example, the mediocre horizontally scrolling pages I showed in class on Wednesday – and some may be easier without content. Totally up to you.
  • Your layout can have a navigation, but it doesn’t need one.
  • I encourage you to color the different sections so you and I can tell what’s going on

I haven’t decided on a concrete due date – how does ‘any time before Fall Break’ sound?


*We will learn to do this on Monday. This one requires that your layout have content. This is not the same as using a responsive framework, like Skeleton. Please don’t do that for this project, as it’s our next topic in class and we’ll have an assignment for it.


Posted in Uncategorized | Leave a comment

An Update on Layouts


I’ve made some new projects and put them on the server – let me tell you about them.

Firstly, I took the ‘basic horizontal’ site that was on the server and added our ‘scroll.js’ script to it, so it can now use a navigation bar to scroll around horizontally. If you plan to make a horizontal site, I’d definitely use this new one as a starting point, rather than the two ‘broken’ ones I showed in class.

It can be found on the server, in the ‘layouts’ folder, and is named ‘NEWhorizontalScroll.’

Next, I made a site using fullpage.js to show the layout of the Powell Building. It includes an ‘elevator’ for navigation. It can be found on the server in the ‘layout’ folder, and is called ‘powell.’

Lastly, I made a page with a huge wrapper – 10,000px x 10,000px – and put named anchors in each corner of the page. There’s a fixed-position nav that will move you from corner to corner. The wrapper itself has a gradient on it. Not high art or anything, but this could be a good start for thinking about unique ways to lay out a site. It’s also in the ‘layouts’ folder, called ‘fourCorners.’


Posted in Uncategorized | Leave a comment

Interesting Layout Plugins / Ideas

Firstly, our FullPage.js:


An interesting one we looked at in class, which ‘loops’ four pages of content:


The funky page that has little squares ‘animate’ between pages:


The ‘Origin of the Species’ book layout:


Posted in Uncategorized | Leave a comment

More Helpful Flexbox Links

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:


Posted in Uncategorized | Leave a comment

Some Flexbox Terms…

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 */

Posted in Uncategorized | Comments Off


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


Posted in Uncategorized | Comments Off

Wait, there’s such a thing as ‘inline-block?’

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:



Posted in Uncategorized | Comments Off

FTP settings for the student server

Class, as we went over in class, your FTP settings for connecting to the student server from any FTP program are:

Mode: SFTP

Host/Server: student.elon.edu

Username/PW: your Elon username/PW combo

Please refer to this page on the wiki for step-by-step instructions on how to connect:


Posted in Uncategorized | Comments Off

Progress / Meter


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.


Posted in Uncategorized | Comments Off

Stretch Backgrounds, Smooth Scroll

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:


Posted in Uncategorized | Comments Off