A responsive forum, hope you like it. Tell me what you think!
A Pen by Robin Brons on CodePen.
Created
August 24, 2018 20:46
-
-
Save TrueSlu/ff1efbf2a4fea2a7e36a0f6cf03401c6 to your computer and use it in GitHub Desktop.
Responsive forum
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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(); | |
| } | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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