ReactJS + Redux: Where to properly include CSS and index.html files?

Question

My current set up for index.html is

<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Practice Example</title>

    <!-- favicon -->
    <link rel="icon" href="/img/favicon.ico"/>

    <meta name="description" content="Practice Example">

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"
    >
    <link rel="stylesheet" type="text/css" href="app.css">
  </head>

  <body>
    <div id="app"></div>
    <script>
      var WebFontConfig = {
        google: { families: [ 'Roboto:400,300,500:latin' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>
    <script src="bundle.js"></script>
  </body>
</html>

And I am trying to follow the following tutorial http://callmenick.com/post/animated-resizing-header-on-scroll and the downloaded source code has the following files:

Where and how should I cleanly and properly integrate their index.html into mine? Also am I supposed to use .css or .scss or both?

Thank you in advance!

do you want to integrate it to your react build or separate? — David, Aug 15 '16 at 18:21
@David sorry but could you clarify on the difference? Still learning — Jo Ko, Aug 15 '16 at 18:24
I see you are using react and already have a bundle.js , I am asking if you want to inline their css into bundle.js file or just include the css into index.html page. If you do the former you have to do css loaders in webpack, if you are using webpack but the latter is simple, you just include the css in the header of index.html — David, Aug 15 '16 at 18:30
@David which one would you say is best practice regardless of simplicity? I already have a .css file named `app` going as you can see. It is just placed in the same directly as where `bundle.js` is and works fine. Is that not the right way to do it? — Jo Ko, Aug 15 '16 at 18:41
it depends on your use cases but most in the react community do use webpack css loaders and include it in the bundle.js instead of doing it in index.html check this link out http://webpack.github.io/docs/stylesheets.html — David, Aug 15 '16 at 18:54
@David got it and as for the index.html, how should I integrate it with mine? And am I supposed to use .css or .scss or both? Also where should the classie.js go? — Jo Ko, Aug 15 '16 at 19:12
put all their assets relative to your index.html and you can just use the .css file, scss is compiled to css so you don't need it. replace their index.html with your index.html of course make sure all your previous files that are linked from index.html are in their appropriate place — David, Aug 15 '16 at 19:23
@David Sorry but could you show? So that I can also accept your answer and want to give you points as well for always helping ;) — Jo Ko, Aug 15 '16 at 19:40

David · Accepted Answer · 2016-08-15T20:11:50.643

you already have their assets

here I have taken the relevant part from your index.html and merged it with their index.html. copy paste it to index.html

<!DOCTYPE html>
<html lang="en">

<head>

<!-- title and meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="" />
<title>Header Resize On Scroll with Animations</title>

<!-- css -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="app.css">    
<!-- js -->
<script src="js/classie.js"></script>
<script>
    function init() {
        window.addEventListener('scroll', function(e){
            var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                shrinkOn = 300,
                header = document.querySelector("header");
            if (distanceY > shrinkOn) {
                classie.add(header,"smaller");
            } else {
                if (classie.has(header,"smaller")) {
                    classie.remove(header,"smaller");
                }
            }
        });
    }
    window.onload = init();
</script>
</head>



<body>

<div id="wrapper">

<header>
    <div class="container clearfix">
        <h1 id="logo">
            LOGO
        </h1>
        <nav>
            <a href="">Lorem</a>
            <a href="">Ipsum</a>
            <a href="">Dolor</a>
        </nav>
    </div>
</header><!-- /header -->

<div id="main">
    <div id="content">
        <section>
            <div class="container">
                <h1>Header Resize On Scroll with Animations</h1>
                <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
                <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
                <p>
                    <a href="http://www.callmenick.com/tutorials/create-an-animated-resizing-header-on-scroll">&laquo; Go back to this tutorial?</a><br>
                    <a href="http://www.callmenick.com/tutorials">&laquo; Go back to all tutorials?</a>
                </p>
            </div>
        </section>
        <section class="color">
            <div class="container">
                <h1>Cupcakes for the people!</h1>
                <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
                <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
            </div>
        </section>
        <section>
            <div class="container">
                <h1>Chocolate, vanilla, and red velvet</h1>
                <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
                <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
            </div>
        </section>
        <section class="color">
            <div class="container">
                <h1>Come to me!</h1>
                <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
                <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
            </div>
        </section>
        <section>
            <div class="container">
                <h1>Sugar rush, oh my...</h1>
                <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
                <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
            </div>
        </section>
    </div>
</div><!-- #main -->


<footer>
<div id="info-bar">
    <div class="container clearfix">
        <span class="all-tutorials"><a href="http://www.callmenick.com/tutorials">&larr; all tutorials</a></span>
        <span class="back-to-tutorial"><a href="http://www.callmenick.com/tutorials/create-an-animated-resizing-header-on-scroll">back to the tutorial</a></span>
    </div>
</div><!-- /#top-bar -->
</footer><!-- /footer -->



</div><!-- /#wrapper -->
<div id="app"></div>
<script>
      var WebFontConfig = {
        google: { families: [ 'Roboto:400,300,500:latin' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>
<script src="bundle.js"></script>
</body>
</html>

Got it but I was looking forward to more of a cleaner way to do it. Is there a way to reference the new index.html from my index.html? — Jo Ko, Aug 15 '16 at 19:54
what do you mean by referencing index.html? you mean load one html file into another if so checkout this answer http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file — David, Aug 15 '16 at 20:01
Gotcha. Will take a look. In the case of just adding .css into header of .html, could you show that as well? — Jo Ko, Aug 15 '16 at 20:10
checkout the updated code. I included your app.css file in the header — David, Aug 15 '16 at 20:12
It works but since HTML, it applied to every single page... How can I just have it focused on certain pages? — Jo Ko, Aug 16 '16 at 00:34
thats when you use webpack to load css modules in different parts of your app, checkout the link I posted earlier http://webpack.github.io/docs/stylesheets.html — David, Aug 16 '16 at 06:36
Okay will take a look. Thanks David! In the meantime, I am trying to use an image instead of the `
LOGO
`, and I was suggested to `100% width and auto height inside a fixed size container, then animate the width of the container`. What does that mean? — Jo Ko, Aug 16 '16 at 17:45
just checking to see if you've received my previous comment. Thank you David! — Jo Ko, Aug 17 '16 at 17:06

ReactJS + Redux: Where to properly include CSS and index.html files?

1 Answers1

LOGO