Vadiok
10/13/2016 - 9:14 AM

Шаблон странички с подключенными Bootstrap 3, UiKit 2 и моим StyleSheetReloader

Шаблон странички с подключенными Bootstrap 3, UiKit 2 и моим StyleSheetReloader

doctype html
html(lang='ru')

	head
		meta(charset='UTF-8')
		meta(name='viewport', content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0')
		meta(http-equiv='X-UA-Compatible', content='ie=edge')
		title Bootstrap & UiKit
		link(
			rel='stylesheet',
			href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/css/uikit.min.css',
			integrity='sha256-ZRu2uvT+IMWj7ooDbV50SFSrn3Zm3ewBc9s4mye4G58=',
			crossorigin='anonymous',
		)
		link(
			rel='stylesheet',
			href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
			integrity='sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u',
			crossorigin='anonymous',
		)

	body

		// Bootstrap
		.container
			.row
				.col-xs-12
					h1 Bootstrap 3
					ul
						li
							a(href='http://getbootstrap.com/css/', target='_blank') CSS
						li
							a(href='http://getbootstrap.com/components/', target='_blank') Components
					p
						| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum veritatis, tempore quibusdam, delectus ab accusamus libero vero doloremque cumque tempora, ea natus quas similique ex, minima modi dolorum a? Id?

		// UIKit
		.uk-container.uk-container-center.uk-margin-top.uk-margin-large-bottom
			.uk-grid
				.uk-width-1-1
					h1 UIKit 2
					p
						| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo expedita quas omnis corporis veritatis sed tempore officia, numquam porro dolor esse quidem dolorum eos temporibus nobis aperiam debitis possimus id!

		script(
			type='text/javascript',
			src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js',
			integrity='sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=',
			crossorigin='anonymous',
		)
		script(
			type='text/javascript',
			src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js',
			integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa',
			crossorigin='anonymous',
		)
		script(
			type='text/javascript',
			src='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/js/uikit.min.js',
			integrity='sha256-0hhrYqKEGB26I7AYQAQgXT9E3hQs1naSDHgPbvjIhXs=',
			crossorigin='anonymous',
		)
		script(
			type='text/javascript',
			src='//cdn.rawgit.com/Vadiok/StyleSheetReloader/master/dist/stylesheet_reloader.min.js',
			data-stylesheetreloader='',
		)
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap & UiKit</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/css/uikit.min.css" integrity="sha256-ZRu2uvT+IMWj7ooDbV50SFSrn3Zm3ewBc9s4mye4G58=" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <!-- Bootstrap-->
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <h1>Bootstrap 3</h1>
          <ul>
            <li><a href="http://getbootstrap.com/css/" target="_blank">CSS</a></li>
            <li><a href="http://getbootstrap.com/components/" target="_blank">Components</a></li>
          </ul>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum veritatis, tempore quibusdam, delectus ab accusamus libero vero doloremque cumque tempora, ea natus quas similique ex, minima modi dolorum a? Id?</p>
        </div>
      </div>
    </div>
    <!-- UIKit-->
    <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">
      <div class="uk-grid">
        <div class="uk-width-1-1">
          <h1>UIKit 2</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo expedita quas omnis corporis veritatis sed tempore officia, numquam porro dolor esse quidem dolorum eos temporibus nobis aperiam debitis possimus id!</p>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/js/uikit.min.js" integrity="sha256-0hhrYqKEGB26I7AYQAQgXT9E3hQs1naSDHgPbvjIhXs=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="//cdn.rawgit.com/Vadiok/StyleSheetReloader/master/dist/stylesheet_reloader.min.js" data-stylesheetreloader=""></script>
  </body>
</html>