Welcome to the BasePixels theme style guide. This living style guide serves as a resource that helps to define a common visual language for the components of this theme. It can be used as a reference point for when you will add/edit your content.
Left Column
Adding a two column split layout has never been more simple than with the easy to use snippet provided with this theme.
Right Column
Adding a two column split layout has never been more simple than with the easy to use snippet provided with this theme.
Blockquote
The blockquote element represents a section that is quoted from another source. When you’re writing text in a web page, you sometimes want to call out a block of text as a quotation.
Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails.Jackson Brown
Pull Quotes
Pull Quote is a brief, attention-catching quotation taken from the main text of an article and used as a subheading or graphic feature.You can add it easily in your content by adding a class pullquote-left or pullquote-right something like this:
<span class="pullquote-left"></span>Left Pull Quote
The funny thing is that parents and all their friends from Liverpool were also curious and proud about this local group. Prior to that, the people in show business from the north of England had all been comedians.
It is easier to judge the mind of a man by his questions rather than his answers.
The Taj Mahal is a beautiful monument built in 1631 by an Emperor named Shah Jahan in memory of his wife Mumtaz Mahal. It is situated on the banks of river Yamuna at Agra. It looks beautiful in the moonlight. The Taj Mahal is made up of white marble. In front of the monument, there is a beautiful garden known as the Charbagh. Inside the monument, there are two tombs. These tombs are of Shah Jahan and his wife Mumtaz Mahal. The Taj Mahal is considered as one of the Seven Wonders of the World. Many tourists come to see this beautiful structure from different parts of the world.
Right Pull Quote
This is the first test of a gentleman: his respect for those who can be of no possible value to him.
Last week we installed a kitty door so that our cat could come and go as she pleases. Unfortunately, we ran into a problem. Our cat was afraid to use the kitty door. We tried pushing her through, and that caused her to be even more afraid. The kitty door was dark, and she couldn’t see what was on the other side. The first step we took in solving this problem was taping the kitty door open. After a couple of days, she was confidently coming and going through the open door. However, when we removed the tape and closed the door, once again, she would not go through. They say you catch more bees with honey, so we decided to use food as bait. We would sit next to the kitty door with a can of wet food and click the top of the can.
Headings
Level One Heading
Level Two Heading
Level Three Heading
Level Four Heading
Level Five Heading
Level Six Heading
Image Alignment
All BasePixels Themes come with flawlessly styled image captions and accurate alignments and using this feature is really easy and can be done directly from your WordPress content editor.
Left Aligned
To make her child completely immortal, Thetis tried various things – like totally immersing her son into the water of the Styx, river of the Underworld. If the water totally covered her baby, Thetis believed he would live forever. There was a slight problem, however. Thetis could not completely bathe her son in the water. To do so, she would have had to let go of him. In the end, Achilles was protected by the river everywhere on his body except for the heel where his mother held him. Because of that vulnerable heel, which would prove to be her son’s undoing, Thetis failed in her efforts to insure her son would never die.
Right Aligned
The Moon is a barren, rocky world without air and water. It has dark lava plain on its surface. The Moon is filled wit craters. It has no light of its own. It gets its light from the Sun. The Moo keeps changing its shape as it moves round the Earth. It spins on its axis in 27.3 days stars were named after the Edwin Aldrin were the first ones to set their foot on the Moon on 21 July 1969 They reached the Moon in their space craft named Apollo II.The sun is a huge ball of gases. It has a diameter of 1,392,000 km. It is so huge that it can hold millions of planets inside it. The Sun is mainly made up of hydrogen and helium gas. The surface of the Sun is known as the photosphere. The photosphere is surrounded by a thin layer of gas known as the chromospheres. Without the Sun, there would be no life on Earth. There would be no plants, no animals and no human beings. As, all the living things on Earth get their energy from the Sun for their survival.
Highlight
Highlights can be used to draw special attention to an important part of your content, using highlights is really easy all you have to do is wrap the text/content in a span tag a class of highlight like so:
<span class="highlight"></span>Table Styles
Tables are important to organize and display important chunks of content in a more readable fashion. This theme includes well styled tables to get you started.
| Task Details | Progress | Vital Task |
|---|---|---|
| Create pretty table design | 100% | Yes |
| Take the dog for a walk | 100% | Yes |
| Waste half day on twitter | 20% | No |
| Feel inferior after viewing Dribbble | 80% | No |
Gallery Styles
This theme support Jetpack galleries and displays them beautifully, getting the gallery setup is as easy as just inserting a gallery from the WordPress content editor and you can have a gallery ready in no time.
Syntax Highlighting
This theme comes with a handy easy to use syntax highligher to dress your pretty code with the clothes it deserves. It is very easy to implement and use, refer to the documentation for more info
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
::-moz-focus-inner {
border: 0;
padding: 0;
}Embeds
Embedding content from different third party services are relatively easy with this theme it includes a script to display these and more flawlessly on a mobile device.
Video
Code
See the Pen Plain JavaScript To-Do List with LocalStorage by Raghav joshi (@ragzor) on CodePen.
Soundcloud
[soundcloud url=”https://api.soundcloud.com/tracks/250711755″ params=”color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false” width=”100%” height=”166″ iframe=”true” /]