Just a simple, customizable blog theme.
- Mobile-first responsive layout.
- (Almost) every element has multiple designs to serve content in multiple ways.
- Scalable and maintainable codebase written with several naming conventions and methodologies like OOCSS, BEVM in mind.
- Opinionated styles as options.
- No CSS frameworks used.
- Only homemade components.
- Improved legibility with vertical rhythm and modular scale by default.
- Written with modern specifications like custom properties, mediaMatch...
- Supports every web browser except all versions of Internet Explorer, Opera Mini, and other browsers that has global usage lesser than 0.33%
- System font bundle as fallback.
- Solarized as default theme colors, and many other options like Monokai, Atom One...
- Touch-friendly dropdown menu.
- Everything is automated with Gulp.js.
Note: Instructions tested on Linux and macOS. I haven't tested in Windows yet.
Open a terminal emulator (/Applications/Terminal.app in macOS) and execute commands below.
# Clone the repository to your local machine git clone https://github.com/egeesin/pxl # Change directory cd pxl # Install Gulp plugins to local directory. npm install # Generate gulp build
Export as Jekyll theme
Warning: Jekyll support isn't quite ready yet. Highly recommended to test on clean local server until it's ready for general use.
Dependencies: jekyll-paginate, jekyll-menus, nokogiri, iconv
# After completion of build, generate Jekyll theme and move to your local. gulp jekyll mv jekyll-build/* /path/to/local/jekyll/server/
To using the theme with full potential and to keep maintainability, this guideline will help your development.
At this time, guideline might not cover everything in the theme but starting with crucial/confusing parts, everything will be included step by step.
The intention is to support modern browsers to use newest tools. Supporting legacy browsers isn't main focus yet.
At this time,
- All IE versions, Opera Mini unsupported,
- Edge is partially supported,
- All other modern browsers has bigger than 0.33% usage is fully supported.
In this theme, intention is to combine a few of naming conventions to improve legibility and maintainability. Word groups are written with camelCase instead of comma-separated in order to not confused between seperation of block-element-modifier and word group.
Modifier and variant classes are separated from block and element classes. If you familiar with UNIX command line this will probably help.
// Not like this block block--modifier block__element block__element--modifier // But this block --modifier block__element --modifier block -variant
To connect modifier with a block(in CSS):
Note: Classes begins with a tick or an underscore, doesn't support in IE8 or older browsers.
Every width, height, padding, margin unit are em-based. Heading elements are proportionally sized by modular scale and each typographic element margin resized to fit vertical rhythm. Thanks to CSS variables, everything is reconfigurable. Default font is based on user's operating system.
Most of them has pretty simple purposes. As far as it's simple, all of them can be reusable, some of them can be placed recursively.
First thing comes in mind when placing content, that would be a card. It's really similar concept that mostly visually seen in Material Design, iOS App Store. Cards are portable and contains any type of content. Height of a card must be formed by included content.
Cards must not look like it's part of element itself but children of element. That's the main difference between frames and cards.
This concept can host full-sized content like jumbotron, videos. It must looks like part of element. Visually, frames must contain, not being contained. Width of a frame is also width of viewport.
This grid system based on csswizardry-grids.
A navigation menu must let reader navigate through site or category. It doesn't have be limited to be a navigation bar. This concept can involve Table of Content lists, site map, blog tags and other relevant things too.
Tree View |
Tree view is the most simple form of a navigation concept.
Dropdown View |
A navigation bar with only first-level shown. Deeper levels displayed by hovering cursor on its parent (in mobile, by tapping its parent). It's useful to make complex navigations look compact.
-collapsible option, first-level of navigation bar minimizes to toggle (
c-toggleTrigger) button. Highly recommended for handheld devices, if you have complex menu items.
Dropdown navigation placement can also changed by
Perfectly Full-Sized, Fixed Background Image
Originally, to make background image viewable as much as possible no matter how window resized, there's an independent element with 'c-background -viewFullSizeFixed' classes. It's necessary if you want your background image look fixed in iOS. (Source)
The default color theme is based on Solarized theme which terminal users is familiar with because of different tones, harmonical colors and dark theme option. But users who doesn't prefer Solarized can choose other themes like Monokai, Seti, Night Owl, Atom One etc. or change color variables.
Unlike most other works breakpoints are not grouped by device/model names but human ergonomics.
- Long sub-menus are unreachable in short screens.
o-nav --collapsibledoesn't quite work in MS Edge.
- Custom icon set
- Improving documentation, grammar etc.
- Build info for Windows users
- Full Jekyll and WordPress theme support
- Dynamic dark theme script
- Pywal support
- Legacy support
Issues and PRs are welcomed!
Theme is under GNU GPL 2.0 license.