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 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;
}

Here’s some JavaScript:

var isPresent = require('is-present')

module.exports = function doStuff(things) {
  if (isPresent(things)) {
    doOtherStuff(things)
  }
}

Here’s some HTML:

<div class="m0 p0 bg-blue white">
  <h3 class="h1">Hello, world!</h3>
</div>

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

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

Web Front-end developer가 하는일은 무엇인가 그리고 웹개발자에게 바라는 JS

quora에 올라온 글을 재밌게 번역해 주신 내용 중에 프론트엔드 개발자가 하는 일

React transmit with flux store, dynamic data with state

Transmit 또는 Relay를 flux와 함께 사용하기

Apply, call, bind - javascript

apply, call, bind 정리하기

Isomorphic과 Universal javascript에 대한 단상

Isomorphic, Universal에 대해 들어보셨나요?

Hintholder - 모든 브라우저를 위한 placeholder

크롬, 파폭, 사파리 등 모던 브라우저부터 구버전 IE 까지 사용할 수 있는 placeholder

React, react-router, history npm 설치시 버전 충돌

react-router가 react와 버전이 맞지 않을 때 해결

기존에 익숙하게 사용하던 ES5 Javascript 와 ES6 비교

Front-end 에서 많이 사용하는 Javascript의 ES6 버전을 아직 많이 사용하고 있지 않다. 비교를 해보자.

Ubuntu 14.04 서버 셋팅 - python 3.4 & virtualenv

python 3.4 & virtualenv at ubuntu 14.04

github page로 blog 시작

Blog - github page with jekyll.