11 -- The CSS of the Lambs -- Ben Griffith

[BFGriffith]

• [x] Yak Shaving
  • WIP Issue: 11 -- The CSS of the Lambs
  • WIP Branch:
  • Epicurean306.github.io:journal-week-2
  • student-roster:master
  • TIY-Assignments:11--css-of-the-lambs
  • WIP Files:
  • USERNAME.github.io
    • about/cascading-style-sheet.md
    • *.md (journal entry)
  • student-roster
    • 2015-05/FEE/*.md
  • TIY-Assignments
    • FullWidthTabs/
    • styles.css
    • scripts.js
• [x] Journal, Week 2
  • [x] Final Draft, First Revision
  • [x] Peer reviewed by 2 people
  • [x] Final Draft, 2nd Revision
  • [x] Peer reviewed by 2 people
  • [x] 2x :+1:s
• [x] Reading CSS
  • [x] Flag in the sand: font-* properties
  • [x] Flag in the sand: text-* properties
  • [x] Flag in the sand: line-* properties
  • [ ] 2 new properties fully documented!
  • [ ] 5 new properties!
  • [ ] 8 new properties!
  • [ ] 10 new properties!
• [x] Following the Blueprints, Part 2
  • [x] Mostly empty PR... YAK SHAVED.
  • [ ] I love it when a plan comes together... or you make one.
  • [ ] From lists to tabs!
  • [ ] And clicky tabs, to boot!
  • [ ] Who needs to see all those panels all the time?
  • [ ] Well, maybe just one at a time...
  • [ ] Initial page state: Activate Tab 1!
  • [ ] BEAST MODE Media Queries! I have Media Queries!
  • [ ] NIGHTMARE MODE I have no more unfinished assignments...

[BFGriffith]

link to PR for Epicurean306.github.io WIP branch: journal-week-2, final draft

link to PR for student-roster

link to PR for TIY-Assignments WIP branch 11--css-of-the-lambs

[BFGriffith]

Full Width Tabs

• [ ] missing / broken images
• [x] body text: cornflower blue
• [ ] non-default font: ???
• [ ] tabs!
• [ ] decorative icons next to each tab
• [ ] laid out side-by-side (horizontally)
• [ ] bottom border under all tabs except active
• [ ] spacing between tabs: ???px / ???pt
• [ ] centered on the page

active tabs:

• [ ] top border is heavier
• [ ] no bottom border
• [ ] text and icon are cornflower blue

inactive tabs:

• [ ] text and icons are light gray
• [ ] border thin and light gray
• [ ] turn darker when hovered
• [ ] content
• [ ] title and copy line up underneath the image
• [ ] only show three content sections at a time
• [ ] display content sections in a 3-up side-by-side layout