Pixyll in Action


There is a significant amount of subtle, yet precisely calibrated, styling to ensure that your content is emphasized while still looking aesthetically pleasing.

All links are easy to locate and discern, yet don’t detract from the harmony of a paragraph. The same goes for italics and bold elements. Even the the strikeout works if for some reason you need to update your post. For consistency’s sake, The same goes for insertions, of course.

Code, with syntax highlighting

Here’s some PHP not being highlighted.

<?php 

public function browse(BrowseRequest $request)
    {
        $artist = $request->get('artist_id');
        $color = $request->get('color_id');
        $movement = $request->get('movement_id');
        $subject = $request->get('subject_id');

        $paintings = Painting::query();

        if($color != ''){
            $paintings->where('color_id', $color);
        }

        if($artist != ''){
            $paintings->where('artist_id', $artist);
        }

        if($movement != ''){
            $paintings->where('movement_id', $movement);
        }

        if($subject != ''){
            $paintings->where('subject_id', $subject);
        }

        $paintings = $paintings->paginate(6);

        // dd($paintings);

        return view('layouts.browse.results', compact('paintings'));
    }

Here’s an example of some ruby code with line anchors.

# The most awesome of classes
class Awesome < ActiveRecord::Base
  include EvenMoreAwesome

  validates_presence_of :something
  validates :email, email_format: true

  def initialize(email, name = nil)
    self.email = email
    self.name = name
    self.favorite_number = 12
    puts 'created awesomeness'
  end

  def email_format
    email =~ /\S+@\S+\.\S+/
  end
end

Here’s some CSS:

.foobar {
  /* Named colors rule */
  color: tomato;
}

Headings!

They’re responsive, and well-proportioned (in padding, line-height, margin, and font-size). They also heavily rely on the awesome utility, BASSCSS.

They draw the perfect amount of attention

This allows your content to have the proper informational and contextual hierarchy. Yay.

There are lists, too

  • Apples
  • Oranges
  • Potatoes
  • Milk
  1. Mow the lawn
  2. Feed the dog
  3. Dance

Images look great, too

desk

There are also pretty colors

Also the result of BASSCSS, you can highlight certain components of a post with CSS classes.

I don’t recommend using blue, though. It looks like a link.

Stylish blockquotes included

You can use the markdown quote syntax, > for simple quotes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis porta mauris.

However, you need to inject html if you’d like a citation footer. I will be working on a way to hopefully sidestep this inconvenience.

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

Antoine de Saint-Exupéry

There’s more being added all the time

Checkout the Github repository to request, or add, features.

Happy writing.

Related Posts

JavaScript | Flattening Arrays

A one-line code snippet to flatten arrays in JavaScript

Colours

Colour is an important part of design, here's a brief introduction to the world of colour, and how we can leverage this understanding in web design.

First tracks ever – written and recorded!

So last week I sat down and tried to write some songs, the first time I tried was years ago, and they were rubbish. I think these ones are a bit better, the one at the end of this post was inspired by living in China for a few years.

At long last – TTC

So this one’s for Ian, leaving Yangshuo after so long and having played thing song on his own and with the band countless times over the years, it’s finally gone digital!

Guilin Waterpark Gig

Probably our most fun gig to date was in Guilin Victory Park, a massive water park, a few square kilometres in area. We must have seen thousands of people there enjoying the rides and sunshine, everything in China seems to be on a completely different scale to the west, bigger, faster, longer, and definitely more crowded!

Home recording studio

For those of you not in China or don’t know about Taobao it’s basically eBay on steroids.

I’m a big faker

Definitely one of our strangest gigs. Well, if you could call it a gig. Five foreigners standing on a giant illuminated cityscape pretending to play along to a Bruno Mars track (of which I have ridded my mind of).

Tan Ka Guitar promo work

Whilst having some dinner at Alley Bar, quite possibly one of their very nice home-made pasta dishes, the Chinese owner asked if I’d be interested in recording some songs for a Shanghai-based guitar company.

Three Pigs

A day out on the rock at Yangshuo's latest crag.

Watch Out!

Definitely one of our strangest gigs. Well, if you could call it a gig. Five foreigners standing on a giant illuminated cityscape pretending to play along to a Bruno Mars track (of which I have ridded my mind of).