Cras bibendum, mauris et placerat condimentum, enim urna porttitor nulla, sit amet bibendum neque eros at felis. Vivamus erat ligula, dapibus a pharetra vitae, venenatis et turpis. Vestibulum lectus velit, placerat sit amet urna sed, ullamcorper feugiat enim. Morbi nec magna libero.

h2. Heading Emphasis

Etiam condimentum ante a lorem aliquam, sit amet varius felis auctor. In eget commodo ex. Aenean non euismod massa, sit amet dignissim metus. Phasellus quis quam et mi cursus gravida. Pellentesque egestas velit ut dignissim semper. Curabitur quis ullamcorper purus.

Make a paragraph stand out by adding .emphasis.
The people crushed back on one another to avoid the horse. My brother pushed the pony and chaise back into the hedge, and the man drove by and stopped at the turn of the way. It was a carriage, with a pole for a pair of horses, but only one was in the traces. My brother saw dimly through the dust that two men lifted out something on a white stretcher and put it gently on the grass beneath the privet hedge.

Duis eu auctor erat, a porta nulla. Donec mattis leo enim, tempus sollicitudin sapien pharetra eu. Nulla aliquet ut sem sit amet suscipit. Curabitur finibus tincidunt diam, in eleifend tellus dapibus sit amet.

h3. Heading Flexbox Columns

h4. Heading Image Alignment

This is an Left-aligned thumbnail image ( 150X150 ). When using illustration and photography to enhance the user experience, choose images that express personal relevance, information, and delight.

The puppy began a series of short charges at the stick, running a very little way forwards each time and a long way back, and barking hoarsely all the while, till at last it sat down a good way off, panting, with its tongue hanging out of its mouth, and its great eyes half shut.

Right-aligned medium sized image ( 300X150 ). The image with space in all directions neatly places itself in the right corner and lets the text wrap around it.Now I am not going to keep typing but what follows may be filler text but its worth reading.

Imagery is more than decoration.It’s a powerful tool to help you communicate and differentiate your product. Bold, graphic, and intentional imagery helps to engage the user.

Whether the mood is subdued and muted or bright and colorful, the following principles and best practices can help you successfully incorporate imagery and bring your apps to life, no matter what the visual brand.

Now that’s a proper selfie.

h5. Heading Dropcap

A drop cap is a large capital letter at the beginning of a text block that has the depth of two or more lines of regular text. Use the .dropcap class on the first letter of any word to use this typogrphic effect. See example below

At once there came running to her from all directions a pack of great wolves. They had long legs and fierce eyes and sharp teeth. “Go to those people,” said the Witch, “and tear them to pieces.” “Are you not going to make them your slaves?” asked the leader of the wolves. “No,” she answered, “one is of tin, and one of straw; one is a girl and another a Lion.

Lists

Tables

Classes

These are classes that you can use within content.

Alignment

To align text to the left use class .text-left.Too many type sizes and styles at once can wreck any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.

To align text to the center use class .text-center.Too many type sizes and styles at once can wreck any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.

To align text to the right use class .text-right.Too many type sizes and styles at once can wreck any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.

To align text to the justify use class .text-justify.Too many type sizes and styles at once can wreck any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.

Emphasis

Increase the emphasis on any headline with the use of .text-shadow class.

h2 Text shadow h2 Small text shadow

h3 Text shadow h3 Small text shadow

Decrease emphasis on any text use .muted class.

Hardly knowing what she did, she picked up a little bit of stick, and held it out to the puppy; whereupon the puppy jumped into the air off all its feet at once, with a yelp of delight, and rushed at the stick, and made believe to worry it; then Alice dodged behind a great thistle, to keep herself from being run over; and the moment she appeared on the other side, the puppy made another rush at the stick, and tumbled head over heels in its hurry to get hold of it;

Use the .labelled class to highlight text.

Visibility

With millions of mobiles, tablets and other devices out there delivering content based on the device is hard.In order to make it easier we have introduced visibility classes for standard devices. We have averaged media queries that allows you to show or hide content specifically based on screen sizes and its properties.

Use these classes to show or hide paragraph, image, video or any other content based on devices and its orientation. You can target

The classes follow a simple syntax of .[show/hide]-on-[device]-[only/up]

I guess show or hide part of the class is self explanatory. Moving on to the device part, use any of the following 6 device classification

Use of only will let you hide/show the content on targeted device and nowhere else.
Use of up will hide/show content on the device and all others with bigger screen sizes to the targeted device.

Let us say that you decide to use the .show-on-tablet-up class on a paragraph text it will show your paragraph text on tablets, laptops, hd, full hd or 4K resolution devices but will hide on mobile.

If you use the .hide-on-tablet-up class it will hide your content on tablets, laptops, hd, full hd or 4K resolution devices but will show on mobile.

Examples

This may be a tablet, laptop, HD, Full HD or 4K device but defintely not mobile.

This is a mobile device.

This may be a laptop, HD, Full HD or 4K device but defintely not tablet.

This is a tablet device.

This may be a HD, Full HD or 4K device but defintely not laptop.

This is a laptop device.

This may be a Full HD or 4K device but defintely not HD.

This is a HD device.

This is a 4K device and defintely not Full HD.

This is a FullHD device.

Few more examples..

This is not a tablet, laptop, HD, Full HD or 4K device.

So, it is a tablet device.

This is not a laptop, HD, Full HD or 4K device.

So, it is a laptop device.

This is not a HD, Full HD or 4K device.

So, it is a HD device.

This is not a Full HD or 4K device.

So, it is a Full HD device.

Touch Screen

Apart from screen sizes you can also target certain screen properties.
You can show/hide based on whether the screen is a touch enabled or not. Use classes show-on-touch and .hide-on-touch

This is a touch-enabled screen.

This is not a touch-enabled screen.

Accessibility

To hide content visually but still make it readable through screen readers and other accessibility devices use the .screen-reader-text class.

The line of text below is only visible for screen readers.

This text can only be read by a screen reader.

Tags

Code

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
        display: block;
}

Keystrokes

To open charms bar press windows + c key

Abbrevation

HDMI

Address

BOOM…! you completed the guide.

The post <strong>Style Guide</strong> appeared first on Saraswathi.