feh1ks
7/17/2016 - 6:10 PM

new_gist_file.md

new_gist_file.md
content_copyfile_download
  • Rendered
  • Source

####CSS Comment

/* 
======================================*/

####HTML Sceleton

<!DOCTYPE html>
<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>
    <link rel="shortcut icon" href="*.ico">

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/style.min.css" rel="stylesheet">
    
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    !!{cursor}

    <!-- jQuery -->
    <script src="js/jquery.min.js"></script>
    
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
    
    <!-- Custom JavaScript -->
    <script src="js/script.js"></script>

</body>

</html>

####One page navigation JS

##To-do

1. <body id="page-top">                                           - скролл к верху страницы
2. <nav id="mainNav" ...">                                        - привязка навбара по #id
3. <a class="page-scroll navbar-brand" href="#page-top">logo</a>  - лого => go top
4. <a class="page-scroll" href="#one">one</a>                     - нав ссылка для скролла к секции
5. <section id="one"></section>                                   - привязка секции к нав ссылке по #id
6. bower jquery.easing                                            - установить js библиотеку
7. <script src="js/jquery.easing.min.js"></script>                - подключить ее

##JS

// jQuery for page scrolling feature - requires jQuery Easing plugin
$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: ($($anchor.attr('href')).offset().top - 50)
    }, 1250, 'easeInOutExpo');
    event.preventDefault();
});

// Highlight the top nav as scrolling occurs
$('body').scrollspy({
    target: '.navbar-fixed-top',
    offset: 51
})

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
    $('.navbar-toggle:visible').click();
});

// Offset for Main Navigation
$('#mainNav').affix({
    offset: {
        top: 100
    }
})

####Less loop

// Define two variables as the loop limits
@from : 0;
@to : 10;
 
// Create a Parametric mixin and add a guard operation
.loop(@index) when(@index =< @to) {
 
  // As the mixin is called CSS is outputted
  div:nth-child(@{index}) {
    top: unit(@index * 100, px);
    transition-delay: (@index * .1s);
  }
 
  // Interation call and operation
  .loop(@index + 1);
}
 
// the mixin is called, css outputted and iterations called
.loop(@from);