7
\$\begingroup\$

I have written the following code for my personal website, in Jade and Stylus. Can anyone review this code? Are there any tips that you can give me on how to make it better?

GitHub

main-page.jade:

doctype html
html(lang="en")
  head
    title Darcey Mckelvey
    link(rel="stylesheet" href="/css/main.css")
  body
    header.header
      nav.nav
        ul
          li.nav-item
            a(href="#about") About
          li.nav-item
            a(href="#skills") Skills
          li.nav-item
            a(href="#projects") Projects
      .space
      .headings
        .title
          h1 Darcey Mckelvey
     #about
        h1 About Me
        p Hello, I'm a Designer, Front-end Developer and of course a Tea Enthusiast. It is my mission to program simple and elegant, responsive websites while under the influence of tea.
    #skills
      h1 My Skills
      .skills-section
        .skills
          ul
            li HTML5/CSS3
            li Javascript/jQuery
            li Nodejs/Express
            li Jade
            li Stylus
        .skills
          ul
            li Responsive Design
            li Concept Sketches
            li UI
            li Mobile Ready
            li Crose Browser
            li QBASIC
        .skills
          ul
            li Git
            li Terminal
            li Linux(Ubuntu)
            li Atom
            li Sublime Text
    #projects
      h1 My Projects / Work
      .project
        h2 Darcey Mckelvey(Current):
        img(src="img/personal.png")
        .description
          p The site you are on at this very moment has been programmed and designed by me.
          p It's hosted on a Digital Ocean. Site is programmed in NodeJS, HTML templated in Jade, and CSS preprocessed in Stylus.
    .footer
      p &copy Copyright 2015

style.styl:

global-reset()

*
    box-sizing border-box

body
    font-size 16px
    font-family sans-serif

.header
        background #f7f7f7
        height 50vh
        border-bottom 1px solid #333

.nav
    display flex
    align-items center
    justify-content flex-end
    padding 1em
    background rgba(0,0,0,0.5)
    border-bottom 1.5px solid #333
    position fixed
    top 0
    left 0
    width 100%
    z-index 5

    .nav-item
        list-style none
        display inline
        padding 1em

        a
            text-decoration none
            color #111
            transition 1s
            padding-right 1em

        a:hover
            color #333

.space
    content " "
    height 3.0625em

.headings
    height calc(50vh - 3.0625em)
    display flex
    align-items center
    justify-content center
    flex-direction column

    h1
        font-size 2em
        font-weight 400

#about
    height 50vh
    background #e1e1e1
    display flex
    align-items center
    justify-content center
    flex-direction column
    border-bottom 1px solid #333

    h1
        font-size 1.5em
        font-weight 300

    p
        font-size 1em
        font-weight 100
        max-width 50em
        text-align center
        margin-top 1em
        line-height 150%

#skills
    height 100vh
    display flex
    align-items center
    justify-content center
    flex-direction column

#skills h1
    font-size 2em
    padding 1em
    font-weight 100
    display flex
    align-items center
    justify-content center

.skills-section
    display flex
    align-items baseline
    justify-content center
    font-weight 300
    font-size 1.20em

.skills
    margin 1em

    ul
        list-style square
        width 10em

#projects
    min-height 100vh
    padding-top 5em
    background #e1e1e1

    h1
        text-align center
        font-size 2em
        padding 1em
        font-weight 100

    img
        height calc(1280px/6)
        width calc(720px/2)
        margin 1em

.project
    display flex
    align-items center
    justify-content center
    flex-direction column

    h2
        font-weight 100
        text-align left
        width 100%
        padding-left 25vw

.description
    max-width 45em

    p
        line-height 150%
        font-weight 100
        margin-bottom .5em

.footer
    height 25vh
    background #111
    clearfix()
    display flex
    align-items center
    justify-content center
    color #f7f7f7

    p
        font-size .75em

    p:nth-child(1)
        width 50%

    p:nth-child(1)
\$\endgroup\$
2
  • 4
    \$\begingroup\$ Is it really necessary to post Jade/Stylus when you're not actually using any features of either languages? Couldn't you have just posted the compiled HTML/CSS? To use the html/css tags seems a bit misleading, especially since I have to find a way to compile these things myself before I can suggest improvements. \$\endgroup\$
    – cimmanon
    Commented May 9, 2015 at 19:31
  • 3
    \$\begingroup\$ I think that it's definitely necessary to post the code in the format it is being authored. How could you get a code review of your stylus if we couldn't see it... \$\endgroup\$
    – sheriffderek
    Commented Jun 16, 2017 at 15:52

1 Answer 1

Reset to default
1
\$\begingroup\$

It's weird that I love stylus but can't stand to look at Jade/Pug... I think it's harder to reason about - and stuffing Handlebar expression into standard HTML is so much more accessible to a range of developers.

First suggestion: don't use PUG unless you have teeny-tiny templates/components (you can take this and throw it into http://html2jade.org/).

Codepen example

Markup

<!-- 
give these sections a shared class - 
so you can style them all with base rules
- in this case: .container
-->
<header class='container site-header'>
<div class='inner-w'>

    <nav class='site-navigation'>
        <ul class='item-list'> <!-- what is in an "item"-list? ..."items" -->
            <li class='item'>
                <a href='#about'>
                    <span>About</span><!-- you may need this span for finer styles -->
                </a>
            </li>
            <!-- etc. you can copy the li / but in many templating situations, you would iterate over some data and just have the one template-->
        </ul>
    </nav>
    <!--
    <div class="space"></div> you can style space without adding elements
    -->

    <h1 class='site-title'>Site title: person name etc.</h1>

</div>
</header>



<section class='container about' id='about'>
<div class='inner-w'>

    <h1 class='section-title'>About</h1>

    <p>About info</p>

</div>
</section>



<section class='container skills' id='skills'>
<div class='inner-w'>

    <h1 class='section-title'>Skills</h1>

    <ul class='type-list'>
        <li class='type'>
            <h2 class='name'>Skillset name</h2>

            <ol class='skill-list'> <!-- these might be 'ordered' -->
                <li class='skill'>Skill one</li>
                <li class='skill'>Skill two</li>
                <li class='skill'>Skill three</li>
            </ol>
        </li>
        <li class='type'>
            <h2 class='name'>Skillset name</h2>

            <ul class='skill-list'>
                <li class='skill'>Skill one</li>
                <li class='skill'>Skill two</li>
                <li class='skill'>Skill three</li>
            </ul>
        </li>
        <!-- more types etc. -->
    </ul>

</div>
</section>



<section class='container projects' id='projects'>
<div class='inner-w'>

    <h1 class='section-title'>Projects</h1>

    <ul class='project-list'>
        <li class='project'>
            <h2 class='title'>Project title</h2>

            <figure class='poster'>
                <img src='https://placehold.it/1600x900' alt='Project poster' />
            </figure>

            <p>Description</p>
        </li>
        <!-- more projects etc. -->
    </ul>

</div>
</section>



<footer class='container site-footer'>
<div class='inner-w'>

    <p class='legal'>Legal stuff</p>

</div>
</footer>

Stylus

// $variables
// $color
$black = #000
$white = #fff
$color = lightgreen
$highlight = lightblue


// $space
$pad = 10px // global spacing unit / whatever works for you size wise
$thin = 1px // for borders... thick etc


// $breakpoints
$break-point-1 = '(min-width: 500px)' // arbitrary
$break-point-2 = '(min-width: 900px)'


// $type - well crafted type patterns are easy to drop into mini-themes
whisper-voice()
    font-size: 12px
    line-height: 1.3
    font-weight: normal
    font-family: 'helvetica'

standard-type()
    font-size: 16px
    line-height: 1.3
    font-weight: normal
    font-family: 'helvetica'

calm-voice()
    font-size: 19px
    line-height: 1.3
    font-weight: normal
    font-family: 'helvetica'
    @media $break-point-1
        font-size: 20px

strong-voice()
    font-size: 22px
    line-height: 1.3
    font-weight: bold
    font-family: 'helvetica'
    @media $break-point-1
        font-size: 24px
    @media $break-point-2
        font-size: 26px

// https://www.paulirish.com/2012/box-sizing-border-box-ftw/
/* apply a natural box layout model to all elements, but allowing components to change */
html
  box-sizing: border-box
*, *:before, *:after
  box-sizing: inherit
// NOTE: full 'reset' applied in the settings cog above...


// $user reset
a // reset links
    text-decoration: none
    color: inherit

figure
    margin: 0 // use 'max-width' on image parents to control size
    img // let images inside figures respond to their parent size
        display: block
        width: 100%
        height: auto

ul, ol // strip lists of default (already done in reset I think)
    list-style: none
    margin: 0
    padding: 0


// $structure
.container
    // border: 1px solid red
    .inner-w
        // border: 1px solid blue
        max-width: 690px // whatever's clever
        margin: 0 auto // center it
        padding: $pad


// $decorations
body
    standard-type()
    color: $black

.site-header // takes on the .container rules... specific ones here
    background: $color

.about
    //
    .inner-w
        padding-top: $pad*5
        padding-bottom: $pad*3
    .section-title
        strong-voice()
    p
        margin-top: $pad*2

.skills // you can think of each section as a mini website
    background: $highlight
    .inner-w
        padding-top: $pad*3
        padding-bottom: $pad*4
    .section-title
        strong-voice()
    .type-list
        margin-top: $pad*2
        @media $break-point-1
            display: flex
            flex-direction: row
            .type
                padding-right: $pad*3
        .type
            margin-top: $pad*2
        .name
            calm-voice()
            opacity: .5
            // next as least deeply as is reasonable... there is only one skill-list in skills... so you don't need to nest it under .type-list, for example
    .skill-list
        margin-top: $pad
        .skill
            &:before
                content: '- ' // cheap list styles...

.projects
    background: $color
    .inner-w
        padding: $pad*5 $pad $pad*8
    .section-title
        strong-voice()
    .project-list
        margin-top: $pad*2
        .project
            .title
                calm-voice()
            .poster
                max-width: 600px // for example
                padding: $pad 0

.site-footer
    background: $black
    color: $white
    whisper-voice()
\$\endgroup\$
2
  • \$\begingroup\$ Why do you say "don't use PUG unless you have teeny-tiny templates/components"? \$\endgroup\$
    – Sean
    Commented Mar 5, 2022 at 19:17
  • \$\begingroup\$ I'm not sure why I said that. Probably because it's hard to read. However - when broken up into components, it's not so bad. I company worked for recently rebuilt their website with pub templates. I asked them why. They just said "because?" - and yeah. They introduced a whole build step - for really no reason. It depends what you are doing. I find that most front-end stuff that's actually complex is more difficult to write with pug. That's just me - from 5 years ago! : ) \$\endgroup\$
    – sheriffderek
    Commented Mar 5, 2022 at 19:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.