Little NEko CSS

Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes.

Typography

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

Additional heading formating is provide for bigger headings. large and x-large

Made with love by Little Neko

Made with love by Little Neko

Made with love by Little Neko

Made with love by Little Neko

Made with love by Little Neko

Made with love by Little Neko

Made with love by Little Neko
Made with love by Little Neko

Body copy

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.

Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.

Lead body copy

Make a paragraph stand out by adding .lead.

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.

Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.

Inline text elements

Marked text

For highlighting a run of text due to its relevance in another context, use the <mark> tag.

You can use the mark tag to highlight text.

Deleted text

For indicating blocks of text that have been deleted use the <del> tag.

This line of text is meant to be treated as deleted text.

Alignment classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

Transformation classes

Transform text in components with text capitalization classes.

Lowercased text.

Uppercased text.

Capitalized text.

Adresses

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com

Blockquotes

Default blockquotes

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blockquote options

Style and content changes for simple variations.

Naming a source

Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Someone famous in Source Title
Reversed blockquote

Add .blockquote-reverse for a blockquote with right-aligned content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Someone famous in Source Title
Centered blockquote

Add .text-center for a centered blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Someone famous in Source Title

Lists

Standard <ul> and <ol> list are supported.
Several classes will change the list display

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Icon list

Arrow icon list
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
Star icon list
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
Hyphen icon list
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
Plus sign icon list
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
Arrow icon list rounded
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
Star icon list rounded
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
Hyphen icon list rounded
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
Plus sign icon list rounded
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
Alternative markup
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit

Tables

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Forms

Basic example

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Example block-level help text here.

Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

Checkboxes and radios

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

A checkbox or radio with the disabled attribute will be styled appropriately. To have the label for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your .radio, .radio-inline, .checkbox, .checkbox-inline, or fieldset.


Selects

Use the default option, or add multiple to show multiple options at once.


Buttons

Options

Use any of the available button classes to quickly create a styled button.

block level buttons

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

Sizes

Fancy larger or smaller buttons? Add .large, .small, or .x-small for additional sizes.

Disabled state

Add the disabled attribute to <button> buttons. Add the .disabled class to <a> buttons.

Primary link Link

Icon button

Style 1

Style 2

Social buttons

Social icons

By default, social icons will get their own color. They can be square, rounded or circular using .squared, .rounded or .circle classes.

Colored icons

Theme colors

Use theme color classes to color the icons: .main-color, .dark-main-color, .light-main-color, .dark-color or .light-color.

Colored hover icons

Add .social-hover class to keep the social network color on rollovers.

Minimal icons

Just remove the .circle class to display simple and minimal icons.

Sizes

Add .x-large, .large or .medium for additional sizes.

Icons

Icon fonts magic will make your icons always look great no matter which screen they are displayed on. We have included a custom icon font pack. Here is a example on how to use these icons fonts.

Just change the class name to switch the icon inside you html element. Here is a link showing the complete custom pack included with your theme.

You can extend the icons with the Fontello library. To add more icons to the set:

  1. Go to http://fontello.com/
  2. Click on the settings and choose "import config.json"
  3. Import the file from font-icons/custom-icons. This will highlight the icons of the set
  4. Choose the icons you want, download, unzip and replace the files

Icon sizes

Add .x-large, .large, .medium, .small for additional sizes.

Icon circle

Add .circle for circle icons.

Icon rounded

Add .rounded for rounded icons.

Icon squared

Add .squared for squared icons.

Icon colors

Add .main-color, .main-dark-color, .main-light-color, .light-color, .dark-color to apply theme colors on backgrounds of rounded icons.

Icon animated

Add .animated for animated icons.

Utilities

Margins modifier

Margin bottom

Add .mb-large, .mb-medium, .mb-small and .no-mb to add or remove margin bottom on elements

Margin bottom large
Next block
Margin bottom medium
Next block
Margin bottom sm
Next block
No margin bottom
Next block

Margin top

Add .mt-large, .mt-medium, .mt-small and .no-mt to add or remove margin top on elements

Previous block
Margin top large
Previous block
Margin top medium
Previous block
Margin top sm
Previous block
No margin top

Margins for mobile devices

Sometimes you need to add add some space beetwen elements on mobile or tablet device. Add .mb-xs for extra bottom margin on mobile devices only, or .mb-sm for tablets.

Paddings modifier

Padding bottom

Add .pb-large, .pb-medium, .pb-small and .no-pb to add or remove padding bottom on elements

Padding bottom large
Padding bottom medium
Padding bottom sm
No padding bottom

Padding top

Add .pt-large, .pt-medium, .pt-small and .no-mt to add or remove padding top on elements

Padding top large
Padding top medium
Padding top sm
No padding top

Images

Responsive images

Images can be made responsive-friendly via the addition of the .responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

Responsive image
Responsive image
Responsive image

Image shapes

Add classes .circle, .rounded or .thumbnail to an img element to easily style images in any project.

Bootstrap standard alternative: .img-circle, .img-rounded and .img-thumbnail
Responsive image
Responsive image
Responsive image

Avatar

Add classes .avatar to an img element to easily style avatar images. Avatar images class comes with 4 size: standard (40px) .large (80px), .medium (60px) or .small (20px).

Responsive image Responsive image Responsive image Responsive image

Responsive image Responsive image Responsive image Responsive image

Responsive image Responsive image Responsive image Responsive image

Responsive image Responsive image Responsive image Responsive image