• Сведения об образовательной организации
    • Основные сведения
    • Структура и органы управления образовательной организацией
    • Документы
  • Расписание
  • Тренера
  • Лучшие спортсмены
  • Новости
  • Контакты

Typography

Опубликовано: 29 января 2011
  • Печать
  • Электронная почта

Headings



h1. Heading 1

Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

h2. Heading 2

Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

h3. Heading 3

Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

h4. Heading 4

Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

h5. Heading 5

Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

h6. Heading 6

Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

Big headings

Jumbo font

Add class .yjsg-font-jumbo

Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

Mega font

Add class .yjsg-font-mega

Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

Lists



Default

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

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit

Unstyled - add class .unstyled

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

Custom Lists



Add class .video

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Add class .check

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Add class .star

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Add class .yjt_iconlist

  • Using .fa fa-book class
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Buttons


Button sizes

Button colors

Large colored buttons

Medium colored buttons

Small colored buttons

markup:

<button type="button" class="yjsg-button-blarge">Large button</button>
<button type="button" class="yjsg-button-bmedium">Medium button</button>
<button type="button" class="yjsg-button">Default</button>
<button type="button" class="yjsg-button-bsmall">Small button</button>
<button type="button" class="yjsg-button-color">Default color</button>
<button type="button" class="yjsg-button-blue">Blue button</button>
<button type="button" class="yjsg-button-red">Red button</button>
<button type="button" class="yjsg-button-green">Green button</button>
<button type="button" class="yjsg-button-yellow">Yellow button</button>
<button type="button" class="yjsg-button-dark">Dark button</button>
<button type="button" class="yjsg-button-gray">Gray button</button>
<button type="button" class="yjsg-button-color-blarge">Default color</button>
<button type="button" class="yjsg-button-blue-blarge">Blue button</button>
<button type="button" class="yjsg-button-red-blarge">Red button</button>
<button type="button" class="yjsg-button-green-blarge">Green button</button>
<button type="button" class="yjsg-button-yellow-blarge">Yellow button</button>
<button type="button" class="yjsg-button-dark-blarge">Dark button</button>
<button type="button" class="yjsg-button-gray-blarge">Gray button</button>
<button type="button" class="yjsg-button-color-bmedium">Default color</button>
<button type="button" class="yjsg-button-blue-bmedium">Blue button</button>
<button type="button" class="yjsg-button-red-bmedium">Red button</button>
<button type="button" class="yjsg-button-green-bmedium">Green button</button>
<button type="button" class="yjsg-button-yellow-bmedium">Yellow button</button>
<button type="button" class="yjsg-button-dark-bmedium">Dark button</button>
<button type="button" class="yjsg-button-gray-bmedium">Gray button</button>
<button type="button" class="yjsg-button-color-bsmall">Default color</button>
<button type="button" class="yjsg-button-blue-bsmall">Blue button</button>
<button type="button" class="yjsg-button-red-bsmall">Red button</button>
<button type="button" class="yjsg-button-green-bsmall">Green button</button>
<button type="button" class="yjsg-button-yellow-bsmall">Yellow button</button>
<button type="button" class="yjsg-button-dark-bsmall">Dark button</button>
<button type="button" class="yjsg-button-gray-bsmall">Gray button</button>

Dividers



markup:

<div class="yjsg-hr-hrsolid"></div>
<div class="yjsg-hr-hrdotted"></div>
<div class="yjsg-hr-hrdashed"></div>
<div class="yjsg-hr-small-hrsolid"></div>
<div class="yjsg-hr-large-hrsolid"></div>
<div class="yjsg-hr-small-hrsolid fa fa-star"></div>
<div class="yjsg-hr-small-hrsolid famedium fa fa-star"></div>
<div class="yjsg-hr-small-hrdashed falarge facolor fa fa-star"></div>
<div class="yjsg-hr-small-hrsolid-left falarge facolor fa fa-star"></div>
<div class="yjsg-hr-small-hrsolid-right falarge facolor fa fa-trophy"></div>
<div class="yjsg-hr-small-hrsolid-hrcircle"></div>
<div class="yjsg-hr-small-hrsolid-hrcircle-left"></div>
<div class="yjsg-hr-small-hrsolid-hrcircle-right"></div>
<div class="yjsg-hr-small-hrsolid-hrcircle-left-pull-small"></div>
<div class="yjsg-hr-small-hrsolid-right-pull-small famedium facolor fa fa-star"></div>
<div class="yjsg-hr-large-hrsolid-hrcircle-left-pull-large"></div>
<div class="yjsg-hr-large-hrsolid-right-pull-large famedium facolor fa fa-star"></div>

Dropcaps



YQuisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

SQuisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

JQuisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

GQuisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.

markup:

<span class="dropcap">Y</span>lypian... 
<span class="dropcap2">J</span>lypian... 
<span class="dropcap3">S</span>lypian... 
<span class="dropcap4">G</span>lypian...

Blockquotes



Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat

Someone famous in Source Title

Blockquote .pull-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat

Someone famous in Source Title

Blockquote quoted .quoted

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat

Someone famous in Source Title

Blockquote brackets .brackets

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat

Someone famous in Source Title

markup:

<blockquote>
    <p>
        Text...
    </p>
</blockquote>
<blockquote class="pull-right">
    <p>
        Text...
    </p>
</blockquote>
<blockquote class="quoted">
    <p>
        Text...
    </p>
</blockquote>
<blockquote class="brackets">
    <p>
        Text...
    </p>
</blockquote>

Big numbers



Blocknumber

01 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat

02 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat

03 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat

Blocknumber round

01 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat

02 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat

03 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat

markup:

<p class="blocknumber">
    <span class="bignumber">02</span> Sample...
</p>
<p class="blocknumber bnround">
    <span class="bignumber">02</span> Sample...
</p>

Additional



Emphasis classes

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

markup:

<p class="muted">
    Fusce...
</p>
<p class="text-warning">
    Etiam...
</p>
<p class="text-error">
    Donec...
</p>
<p class="text-info">
    Aenean...
</p>
<p class="text-success">
    Duis...
</p>

Addresses

Some Web Studio, Inc.
1870 Northgate Hill DR
Atlanta, GA 30021
P: (123) 456-7890
Full Name
first.lastATyourmailDOTcom

markup:

<address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">
        first.lastATyourmailDOTcom
    </a>
</address>

Quick menu:

  • Headings
  • Lists
  • Buttons
  • Dividers
  • Dropcaps
  • Blockquotes
  • Big numbers
  • Additional

YJSG Key Features

Опубликовано: 27 января 2011
  • Печать
  • Электронная почта

YJSG Key Features

Responsive Layout

From v1.0.14 all YJSG based templates come with responsive layout support that also includes responsive menu.

HTML5 Template

To keep up with current web standards YJSG framework v1.0.14 and UP supports HTML5 markup language.

Enhanced Template Admin

YJSG Template Manager is one of the most interesting features our framework has to offer. We combined most used and most asked features and put them in a beautifully styled accordions for easy access and fast editing.

Built for 1.5/1.6/1.7/2.5/3.0

Take advantage of YJSG template framework and feel free to use it on 1.5 [?] , 2.5 and 3.0.

Single codebase for 1.6/1.7/2.5/3.0

So that you can take advantage of easy updates, we used single code base ( template install packages ) for all versions starting from 1.6.

52 module positions

YJSG comes with 7 grids of 5 module positions , 3 grids of 3 modules positions and mainbody grid modules positions mix, which makes it one of the most flexible templates framework.

Flexible mainbody grid layouts

Mainbody grid layout consists of component output, module positions (left,right,insettop,instebottom) and 2 module grids above and under component output. You can chosse from 3 mainbody grid layouts:
Left-Mid-Right, Mid-Left-Right, Right-Left-Mid.

Custom Shortcodes

Starting from v1.0.14 YJSG comes with enhanced typography
and list of useful shortcodes like:
Notifications, Boxes, Image effects, HTML5 videos and complete range of Bootstrap shortcodes.

Sophisticated modules grid system

With 52 modules grid system there are no layout limits in any YJSG based template. Version 1.0.14 includes forceleft and forceright module class names that will let you space distances between the modules in a grid or simply force the module container width and float to specific side.

Native RTL

YJSG based templates come with support for RTL ( right to left language ) like Arabic, Hebrew or Syriac.

Cross Browser Compatible

YJSG based templates are cross browser compatible and are built for:
IE8 and up, Firefox, Chrome, Opera, Safari.

Custom CSS Fonts

From v1.0.14 all YJSG powered templates will let you use 600+ Google fonts, unlimited @font-face kits, and 15 CSS font types. All these can be easily switched to from template manager.

Advanced Template Options

YJSG comes with array of custom options and parameters like: 220 FontAwesome icons , smooth scroll class, top menu , header or logo off switch, Google Pretty print (v1.0.14 and up ), HTML5 videos , Google Analytics, custom css for easy template extend and many more.

5 Menu Types

YJSG Templates come with 5 different menu types. Dropdown, SmoothDropdown, Dropline, SmoothDropline, Split menu and from version 1.0.14 support for Bootstrap pill and Bootstrap navbar menu. To take a full advantage of built in menu system please download and install YJSG Mega Menu Plugin.

Built in mega menu

To maximize the menu space all YJ Simple Grid powered templates demos come with YJ Mega Menu ( plugin ) that will let you group your menu items or even include modules within your menu.

Built in LESS CSS

From v1.0.14 we included less php class that compiles LESS CSS and normal CSS files and this way let you take advantage of JBoostrap plugin for 2.5 or built in Bootstrap system that comes with 3.x.

Easy to extend

YJSG is built with end users in mind that would like to take advantage of this framework and make unlimited website layouts and combinations. Custom params and rich extend functions will give you the freedom to extend YJSG to fit your desired website layout.

Sample News item

Опубликовано: 27 января 2011
  • Печать
  • Электронная почта
Praesent posuere tempus nibh bibendum aliquam. Integer ullamcorper vestibulum nisl vitae ullamcorper. Donec fermentum ligula at tortor tincidunt rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque blandit tellus vitae justo rutrum viverra.
Proin semper sapien faucibus dolor ultrices a tempus leo porta. Integer sed lorem nisl, ac tincidunt diam. Sed ante felis, pellentesque in consectetur at, rutrum non turpis. Aenean id pellentesque lacus. Quisque ligula est, aliquam vitae lobortis ornare, posuere sit amet risus. Sed massa lacus, iaculis et venenatis nec, tempor mattis est. Sed placerat placerat volutpat. Integer ut orci metus.
Etiam egestas, ante ac fermentum dapibus, arcu est semper odio, nec mattis metus elit eget nunc. Praesent posuere tempus nibh bibendum aliquam. Integer ullamcorper vestibulum nisl vitae ullamcorper. Donec fermentum ligula at tortor tincidunt rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia

Страница 2 из 2

  • Назад
  • 1
  • 2
  • Вперёд
  • В конец
CSS Valid | XHTML Valid | Top | + | - | reset | RTL | LTR
Copyright © Yougrids 2024 All rights reserved. Custom Design by You.com
YJSimpleGrid Templates Framework official website
Новости