Introducing Maracuya

A coat of purple for this site.

Lately, a lot of things have been stressing me out. I’ve taken to working on improvements to this site that I gradually want to roll out.

Kagami The site under the Kagami theme

I previously used the Kagami Theme for my website. It was a nice, minimal theme that did its job. I got a little frustrated with my lack of ability in frontend and design so I decided to take matters into my own hands. I ripped all the CSS and classnames out of the website, changed up the HTML markup and decided to completely re-theme the website. I did this work in a separate branch while I continued to edit the content as usual. With today’s merge, the content is finally live.

Maracuya The site under the Maracuya theme

I’m still working on Maracuya, but in the meantime, I’ve learned a lot of cliches about frontend design I want to share. These are all super basic for anyone who has done any real front-end work before.

Why Maracuya?

Maracuya is the Peruvian Spanish word for the passionfruit. I ate an unhealthy of amount of Maracuya and Maracuya flavoured items while I was traveling in Peru. I love the purple colour of the Maracuya exterior and I wanted to write a theme that was a tribute to this great fruit. Unsure if I have any pictures of the Maracuya. Again, I’m feeling really lazy.

How to CSS Properly

SCSS: …Wow.

My friend Michael Yang recommended that I check out SCSS. SCSS is a stylesheet language that serves as syntactic sugar for CSS. I was able to nest selectors, making organization of my CSS intuitive. Something else really cool about SCSS is the & operator, which allows you to nest CSS selectors that concatenate.

For example, the stylesheet:

.c-post {  
  &__metadata {  
    margin-top: 20px;  
    color: $light-black;  
    font-size: 0.8rem;  
  }  
  &__description {  
    font-weight: $light;  
    margin-top: 0;  
  }  
}  

Will compile to the following selectors:

.c-post__metadata {  
  margin-top: 20px;  
  color: $light-black;  
  font-size: 0.8rem;  
}  
.c-post__description {  
  font-weight: $light;  
  margin-top: 0;
}  

BEMIT CSS is really cool.

BEMIT is the combination of BEM and IT approaches to managing your CSS and it fits really well with using SASS. BEM requires you to split your CSS selectors by “Block, element and modifier”, while ITCSS refers to an “Inverted Triangle” that allows you to structure your CSS in a way that prioritizes some styles above others, starting with global style variables and finishing with individual style overrides.

Honestly, I’m too tired (or incompetent) to properly and thoroughly explain these concepts. But they’re really cool.

Ongoing Work:

Maracuya still needs a lot of work before I’m satisfied with the result, and here are some pieces of ongoing work.

  • Responsive Design: I don’t know how to handle mobile navigation. The easy way is to stuff everything into a hamburger menu, but angry reddit seems to tell me this is really poor usability. It looks good though so I’m really unsure what to do here. Advice appreciated.
  • Photo Gallery: I really like taking photos and having a centralized location where I can share all my photos would be really great!
  • Project Portfolio: Where I can share things that I’ve worked on!