Skip to content

Instantly share code, notes, and snippets.

@TrueSlu

TrueSlu/index.html

Created August 24, 2018 20:46
Show Gist options
  • Save TrueSlu/ff1efbf2a4fea2a7e36a0f6cf03401c6 to your computer and use it in GitHub Desktop.
Save TrueSlu/ff1efbf2a4fea2a7e36a0f6cf03401c6 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive forum
Raw
index.html
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<header id="#top">
<div class="row">
<div class="large-4 column lpad">
<div class="logo">
<span>Some</span>
<span>Forum</span>
</div>
</div>
<div class="large-8 column ar lpad">
<nav class="menu">
<a href="#" class="current">Forum</a>
<a href="#">Members</a>
<a href="#">New Post</a>
<a href="#">Forum Actions</a>
<a href="#">Calendar</a>
<a href="#">My Profile</a>
<a href="#">FAQ</a>
<a href="#">Contact</a>
</nav>
</div>
</div>
</header>
<a href="#top" id="top-button">
<i class="icon-angle-up"></i>
</a>
<div class="row">
<div class="large-6 column lpad top-msg breadcrumb">
<span id="breadcrumb">
<a href="#"><i class="icon-home"></i></a>
<a href="#">some category</a>
<a href="#">some topic</a>
</span>
</div>
<div class="large-6 small-12 column lpad top-msg ar">
Welcome,
<a href="#" class="underline">Robin Brons</a>
</div>
</div>
<div class="row mt">
<div class="large-12">
<div class="large-12 forum-category rounded top">
<div class="large-8 small-10 column lpad">
Some category title
</div>
<div class="large-4 small-2 column lpad ar">
<a data-connect>
<i class="icon-collapse-top"></i>
</a>
</div>
</div>
<div class="toggleview">
<div class="large-12 forum-head">
<div class="large-8 small-8 column lpad">
Forums
</div>
<div class="large-1 column lpad">
Threads
</div>
<div class="large-1 column lpad">
Post
</div>
<div class="large-2 small-4 column lpad">
Freshness
</div>
</div>
<div class="large-12 forum-topic">
<div class="large-1 column lpad">
<i class="icon-file"></i>
</div>
<div class="large-7 small-8 column lpad">
<span class="overflow-control">
<a href="#">Title of the title</a>
</span>
<span class="overflow-control">
Description of the title of the topic(?)
</span>
</div>
<div class="large-1 column lpad">
<span class="center">96587</span>
</div>
<div class="large-1 column lpad">
<span class="center">678</span>
</div>
<div class="large-2 small-4 column pad">
<span>
<a href="#">Some sub-topic</a>
</span>
<span>08-29-2013 7:29PM</span>
<span>by <a href="#">Some user</a></span>
</div>
</div>
<div class="large-12 forum-topic">
<div class="large-1 column lpad">
<i class="icon-tablet"></i>
</div>
<div class="large-7 small-8 column lpad">
<span class="overflow-control">
<a href="#">Oops.. Foundation is supposed to be responsive</a>
</span>
<span class="overflow-control">
But it's not (yet) working here
</span>
</div>
<div class="large-1 column lpad">
<span class="center">25</span>
</div>
<div class="large-1 column lpad">
<span class="center">2523</span>
</div>
<div class="large-2 small-4 column pad">
<span>
<a href="#">Some sub-topic</a>
</span>
<span>08-29-2013 7:29PM</span>
<span>by <a href="#">Some user</a></span>
</div>
</div>
<div class="large-12 forum-topic">
<div class="large-1 column lpad">
<i class="icon-ellipsis-horizontal"></i>
</div>
<div class="large-7 small-8 column lpad">
<span class="overflow-control">
<a href="#">text-overflow: ellipsis;</a>
</span>
<span class="overflow-control">
You can type as many things as you want but the text will be shorter than bla bla bla
</span>
</div>
<div class="large-1 column lpad">
<span class="center">355</span>
</div>
<div class="large-1 column lpad">
<span class="center">215</span>
</div>
<div class="large-2 small-4 column pad">
<span>
<a href="#">Some sub-topic</a>
</span>
<span>08-29-2013 7:29PM</span>
<span>by <a href="#">Some user</a></span>
</div>
</div>
<div class="large-12 forum-topic">
<div class="large-1 column lpad">
<i class="icon-bug"></i>
</div>
<div class="large-7 small-8 column lpad">
<span class="overflow-control">
<a href="#">If you find any bugs is this pen...</a>
</span>
<span class="overflow-control">
... please tell me in the comments :)
</span>
</div>
<div class="large-1 column lpad">
<span class="center">255</span>
</div>
<div class="large-1 column lpad">
<span class="center">285</span>
</div>
<div class="large-2 small-4 column pad">
<span>
<a href="#">Some sub-topic</a>
</span>
<span>08-29-2013 7:29PM</span>
<span>by <a href="#">Some user</a></span>
</div>
</div>
<div class="large-12 forum-topic">
<div class="large-1 column lpad">
<i class="icon-lock"></i>
</div>
<div class="large-7 small-8 column lpad">
<span class="overflow-control">
<a href="#">[Locked] Some other topic</a>
</span>
<span class="overflow-control">
This topic is locked by someone
</span>
</div>
<div class="large-1 column lpad">
<span class="center">95</span>
</div>
<div class="large-1 column lpad">
<span class="center">234</span>
</div>
<div class="large-2 small-4 column pad">
<span>
<a href="#">Some sub-topic</a>
</span>
<span>08-29-2013 7:29PM</span>
<span>by <a href="#">Some user</a></span>
</div>
</div>
</div>
</div>
</div>
<div class="row mt mb">
<div class="large-12">
<div class="large-12 forum-category rounded top">
<div class="large-8 small-10 column lpad">
Some category title
</div>
<div class="large-4 small-2 column lpad ar">
<a data-connect="">
<i class="icon-collapse-top"></i>
</a>
</div>
</div>
<div class="toggleview">
<div class="large-12 forum-head">
<div class="large-8 small-8 column lpad">
Forums
</div>
<div class="large-1 column lpad">
Threads
</div>
<div class="large-1 column lpad">
Post
</div>
<div class="large-2 small-4 column lpad">
Freshness
</div>
</div>
<div class="large-12 forum-topic">
<div class="large-1 column lpad">
<i class="icon-file"></i>
</div>
<div class="large-7 small-8 column lpad">
<span class="overflow-control">
<a href="#">Title of the title</a>
</span>
<span class="overflow-control">
Description of the title of the topic(?)
</span>
</div>
<div class="large-1 column lpad">
<span class="center">96587</span>
</div>
<div class="large-1 column lpad">
<span class="center">678</span>
</div>
<div class="large-2 small-4 column pad">
<span>
<a href="#">Some sub-topic</a>
</span>
<span>08-29-2013 7:29PM</span>
<span>by <a href="#">Some user</a></span>
</div>
</div>
<div class="large-12 forum-topic">
<div class="large-1 column lpad">
<i class="icon-tablet"></i>
</div>
<div class="large-7 small-8 column lpad">
<span class="overflow-control">
<a href="#">Oops.. Foundation is supposed to be responsive</a>
</span>
<span class="overflow-control">
But it's not (yet) working here
</span>
</div>
<div class="large-1 column lpad">
<span class="center">25</span>
</div>
<div class="large-1 column lpad">
<span class="center">2523</span>
</div>
<div class="large-2 small-4 column pad">
<span>
<a href="#">Some sub-topic</a>
</span>
<span>08-29-2013 7:29PM</span>
<span>by <a href="#">Some user</a></span>
</div>
</div>
<div class="large-12 forum-topic">
<div class="large-1 column lpad">
<i class="icon-ellipsis-horizontal"></i>
</div>
<div class="large-7 small-8 column lpad">
<span class="overflow-control">
<a href="#">text-overflow: ellipsis;</a>
</span>
<span class="overflow-control">
You can type as many things as you want but the text will be shorter
</span>
</div>
<div class="large-1 column lpad">
<span class="center">355</span>
</div>
<div class="large-1 column lpad">
<span class="center">215</span>
</div>
<div class="large-2 small-4 column pad">
<span>
<a href="#">Some sub-topic</a>
</span>
<span>08-29-2013 7:29PM</span>
<span>by <a href="#">Some user</a></span>
</div>
</div>
<div class="large-12 forum-topic">
<div class="large-1 column lpad">
<i class="icon-bug"></i>
</div>
<div class="large-7 small-8 column lpad">
<span class="overflow-control">
<a href="#">If you find any bugs is this pen...</a>
</span>
<span class="overflow-control">
... please tell me in the comments :)
</span>
</div>
<div class="large-1 column lpad">
<span class="center">255</span>
</div>
<div class="large-1 column lpad">
<span class="center">285</span>
</div>
<div class="large-2 small-4 column pad">
<span>
<a href="#">Some sub-topic</a>
</span>
<span>08-29-2013 7:29PM</span>
<span>by <a href="#">Some user</a></span>
</div>
</div>
<div class="large-12 forum-topic">
<div class="large-1 column lpad">
<i class="icon-lock"></i>
</div>
<div class="large-7 small-8 column lpad">
<span class="overflow-control">
<a href="#">[Locked] Some other topic</a>
</span>
<span class="overflow-control">
This topic is locked by someone
</span>
</div>
<div class="large-1 column lpad">
<span class="center">95</span>
</div>
<div class="large-1 column lpad">
<span class="center">234</span>
</div>
<div class="large-2 small-4 column pad">
<span>
<a href="#">Some sub-topic</a>
</span>
<span>08-29-2013 7:29PM</span>
<span>by <a href="#">Some user</a></span>
</div>
</div>
</div>
</div>
</div>
<div class="row mt mb">
<div class="large-12">
<div class="large-12 small-12 forum-category rounded top lpad">
<span>Forum Statistics</span>
</div>
<div class="large-12 small-12 normal lpad">
<h1 class="inset">Who's online</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt cupiditate culpa id explicabo eum eius corporis minima laudantium dolor aperiam quam cumque sequi aliquam adipisci alias fugiat praesentium quibusdam sapiente.</p>
<h1 class="inset">Board Statistics</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta expedita temporibus dolorum esse modi hic quidem sit voluptas laboriosam veniam corporis accusamus id nam! Commodi sequi molestias quasi dolorum animi.</p>
</div>
</div>
</div>
Raw
responsive-forum.markdown
Raw
script.js
$(document).ready( function() {
$('nav.menu a').click( function() {
$(this).parent().find('.current').removeClass('current');
$(this).addClass('current');
});
$('a[data-connect]').click( function() {
var i = $(this).find('i');
i.hasClass('icon-collapse-top') ? i.removeClass('icon-collapse-top').addClass('icon-collapse') : i.removeClass('icon-collapse').addClass('icon-collapse-top');
$(this).parent().parent().toggleClass('all').next().slideToggle();
});
$(window).scroll(function(){
var w = $(window).width();
if(w < 768) {
$('#top-button').hide();
} else {
var e = $(window).scrollTop();
e>150?$('#top-button').fadeIn() :$('#top-button').fadeOut();
}
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Open+Sans+Condensed:300,700);
body {
font-family: 'Open Sans', sans-serif;
}
header {
background-image: url('https://subtlepatterns.com/patterns/use_your_illusion.png');
margin: 0;
border-bottom: 3px solid hsl(195, 73%, 58%);
}
a {
display: inline-block;
color: inherit;
text-decoration: none;
}
.row.mt { margin-top: 1.25em; }
.row.mb { margin-bottom: 1.25em; }
.pad { padding: 15px; }
.spad { padding: 5px; }
.lpad { padding: 20px;}
.ar { text-align: right; }
.logo {
color: hsl(0, 0%, 100%);
font-size: 18px;
text-transform: lowercase;
}
.logo span:first-child {
font-weight: 400;
}
.logo span:last-child {
color: hsl(0, 0%, 70%);
font-weight: 300;
}
nav.menu a {
margin: 0 7px;
color: hsl(0, 0%, 70%);
font-size: 12px;
font-weight: 600;
text-decoration: none;
}
nav.menu a:last-child {
margin: 7px 0 7px 7px;
}
nav.menu a.current {
color: hsl(0, 0%, 100%);
}
.top-msg {
border-bottom: 5px solid hsla(0, 0%, 90%, .3);
color: hsl(0, 0%, 40%);
font-size: 13px;
font-weight: 300;
}
.breadcrumb a {
transition: color .5s;
}
.breadcrumb a:hover {
color: hsl(0, 0%, 20%);
}
.breadcrumb a:after {
content: '\00a0\00a0\002F\00a0\00a0';
color: hsl(0, 0%, 70%);
}
.breadcrumb a:last-child:after {
content: '\00a0\00a0\002F\00a0\00a0 now you\0027re here';
color: hsl(0, 0%, 70%);
}
a.primary {
color: hsl(0, 0%, 70%);
transition: color .5s;
}
a.primary:hover {
color: hsl(195, 73%, 58%);
}
a.underline {
color: hsl(0, 0%, 70%);
}
a.underline:hover:after {
content: '';
display: block;
width: inherit;
height: 2px;
background-color: hsl(195, 73%, 58%);
margin-bottom: -2px;
animation: link .9s ease;
}
@keyframes link {
from { width: 0; }
to { width: 100%;}
}
/* Topic */
.rounded {
overflow: hidden;
}
.rounded.top {
border-radius: 4px 4px 0 0;
}
.rounded.all {
border-radius: 4px;
}
.forum-category {
background-color: hsl(195, 73%, 58%);
color: hsl(0, 0%, 100%);
font-weight: 600;
font-size: 13px;
text-shadow: 0 1px 1px hsl(195, 73%, 40%);
}
.forum-head > .column {
background-color: hsl(206, 35%, 13%);
border-right: 1px solid hsl(212, 35%, 15%);
border-left: 1px solid hsl(212, 28%, 12%);
color: hsl(0, 0%, 100%);
font-weight: 300;
font-size: 12px;
text-shadow: 0 1px 1px hsl(0, 0%, 0%);
text-align: center;
}
.forum-head > .column:first-child {
text-align: left;
border-left: none;
}
.forum-head > .column:last-child {
border-right: none;
}
.forum-topic > .column {
min-height: 71px;
max-height: 71px;
background-color: hsl(0, 0%, 96%);
border-bottom: 1px solid hsl(0, 0%, 90%);
color: hsl(0, 0%, 50%);
font-size: 12px;
}
.forum-topic > .column:first-child {
color: hsl(0, 0%, 60%);
font-size: 30px;
text-align: center;
}
.forum-topic > .column:nth-child(n+3) {
text-align: center;
}
.forum-topic > .column:last-child {
text-align: left;
}
.forum-topic a {
transition: color .5s;
color: hsl(195, 73%, 58%);
font-weight: 600;
}
.forum-topic a:hover {
color: hsl(195, 73%, 48%);
}
.forum-topic span {
display: block;
margin: 0 0 2px 0;
}
.overflow-control {
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
.forum-topic .column:nth-child(2) span.overflow-control {
width: 70%;
height: 15px;
}
.forum-topic span.center {
padding-top: 10px;
}
.normal {
background-color: hsl(0, 0%, 96%);
color: hsl(0, 0%, 50%);
font-size: 12px;
}
.normal h1.inset {
background-color: hsl(206, 35%, 13%);
margin: -20px -20px 20px -20px;
color: hsl(0, 0%, 100%);
padding: 15px 20px 15px 20px;
font-size: 12px;
font-weight: 300;
}
.normal p {
margin: 0 0 40px 0;
line-height: 20px;
}
.normal p:last-child {
margin: 0;
}
#top-button {
display: none;
width: 27px;
background-color: hsl(206, 35%, 13%);
position: fixed;
right: 60px;
bottom: 20px;
border-radius: 3px;
cursor: pointer;
padding: 5px;
text-align: center;
color: hsl(0, 0%, 100%);
}
#top-button.show {
display: block;
}
@media only screen and (max-width: 768px) {
header {
fz
}
.logo,
nav {
text-align: center;
}
nav.menu a {
margin: 7px;
}
.breadcrumb,
.forum-head > .column:nth-child(2),
.forum-head > .column:nth-child(3),
.forum-topic > .column:first-child,
.forum-topic > .column:nth-child(3),
.forum-topic > .column:nth-child(4),
#top-button {
display: none;
}
.forum-category > span,
.forum-category > .column:first-child,
.forum-head > .column,
.forum-topic > .column,
.normal,
.normal h1.inset {
font-size: 10px;
text-align: left;
}
.forum-head > .column {
color: hsl(0, 0%, 100%);
border: none;
font-weight: 600;
}
.rounded,
.rounded.top,
.rounded.all {
border-radius: 0;
}
.overflow-control > a,
.overflow-control {
display: block;
width: 290px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.breadcrumb a:nth-child(2) { margin: 3px 0 3px 10px; }
.breadcrumb a:nth-child(3) { margin: 3px 0 3px 20px; }
.breadcrumb a:nth-child(4) { margin: 3px 0 3px 30px; }
.breadcrumb a:after {
display: none;
}
}
Raw
styles
<link href="https://cdn.jsdelivr.net/foundation/5.0.2/css/foundation.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment