Home Explore Help
Register Sign In
dsaravanan
/
reference
Watch 1
Star 1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
reference
/
opensource_web_design_templates.html

opensource_web_design_templates.html 11 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 
  1. <!DOCTYPE html>
    2. 

  2. <head>
    3. 

  3. <title>3 open source web design templates | Opensource.com</title>
    4. 

  4. <body>
    5. 

  5.   
    6. 

  6. <h1>3 open source boilerplate web design templates</h1>
    7. 

  7.   
    8. 

  8. <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="schema:articleBody content:encoded"><p>In the olden days, creating a website from scratch was easy.</p>
    9. 

  9. 

  10. <p>With a basic understanding of HTML, and maybe a little CSS, you could put together a pretty functional web page with very little effort. Throw it onto your web server, and you were good to go.</p>
    11. 

  11. 

  12. <pre>
    13. 

  13. <div class="geshifilter"><div class="html5 geshifilter-html5"><span class="sc2">&lt;<a href="http://december.com/html/4/element/html.html"><span class="kw2">html</span></a>&gt;</span><br />
    14. 

  14. &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/head.html"><span class="kw2">head</span></a>&gt;</span><br />
    15. 

  15. &nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/title.html"><span class="kw2">title</span></a>&gt;</span>My awesome webpage<span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/title.html"><span class="kw2">title</span></a>&gt;</span><br />
    16. 

  16. &nbsp; <span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/head.html"><span class="kw2">head</span></a>&gt;</span><br />
    17. 

  17. &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/body.html"><span class="kw2">body</span></a>&gt;</span><br />
    18. 

  18. &nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/h1.html"><span class="kw2">h1</span></a>&gt;</span>This site is awesome!<span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/h1.html"><span class="kw2">h1</span></a>&gt;</span><br />
    19. 

  19. &nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/p.html"><span class="kw2">p</span></a>&gt;</span>And I coded it from scratch.<span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/p.html"><span class="kw2">p</span></a>&gt;</span><br />
    20. 

  20. &nbsp; <span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/body.html"><span class="kw2">body</span></a>&gt;</span><br />
    21. 

  21. <span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/html.html"><span class="kw2">html</span></a>&gt;</span></div></div></pre>
    22. 

  22. 

  23. <p>Of course, you can still code a page like this today. What has changed, for better or for worse, are expectations. As internet connection speeds grew faster, and browsers became more standardized and powerful, people asked more from the web. And websites grew in size and complexity, more and more often we'd see even experienced designers who were comfortable with raw HTML and CSS using design tools and code editors with advanced features just to keep everything straight.</p>
    24. 

  24. 

  25. <p>Today, few people design their web pages from scratch. Most opt to use a pre-built template design, custom fit for their content management system of choice. Even developers building complex web applications came to rely on templating libraries to put together the majority of their application.</p>
    26. 

  26. 

  27. <p>But what if you want to build a new template for your content management system or static site generator? What if you want to build a simple site with a single landing page, or a small number of static pages that are unlikely to change very often? What if you want to code a JavaScript application but don't want to use a complicated framework or library to build the final output?</p>
    28. 

  28. 

  29. <p>There are still a million reasons out there to hand-code a web page. For me, the top reason is control. Web pages are getting increasingly <a href="http://idlewords.com/talks/website_obesity.htm" target="_blank">obese</a> as time goes on. But when you design a page from scratch, it's easier to leave out things you don't really need. Do I really need to load in web fonts for this page to look nice? Is jQuery something I need, or can a couple of lines of <a href="http://vanilla-js.com/" target="_blank">Vanilla JS</a> accomplish the same thing? Could a little bit of <a href="http://caniuse.com/#feat=svg" target="_blank">SVG</a> instead of a complex image?</p>
    30. 

  30. 

  31. <p>At the same time, there's no point in reinventing the wheel every time you sit down to design something for the web. There probably are common elements you want on every page you build, and modern development tools like <a href="http://sass-lang.com/" target="_blank">Sass</a> and <a href="http://lesscss.org/" target="_blank">Less</a> make dealing with finicky CSS much easier than it used to be.</p>
    32. 

  32. 

  33. <p>For these reasons, using an HTML boilerplate templates and frameworks helps bring you the best of both worlds. It can help bring standardization, an easy-to-use grid for layout, and modern feature support to your pages, but at the same time, they are often simple enough to cut the cruft of anything you're not actually using.</p>
    34. 

  34. 

  35. <p>Here are three open source HTML5 templates for you to consider for your next web project.</p>
    36. 

  36. 

  37. <h2>Bootstrap</h2>
    38. 

  38. 

  39. <p>Twitter's <a href="https://getbootstrap.com/" target="_blank">Bootstrap</a> is perhaps one of the best-known templating frameworks for creating new web pages. Its ubiquity has led to a backlash from some in the web design community, not so much because of the framework itself but because of the pervasiveness of very simple, almost completely uncustomized implementations of it out in the wild.</p>
    40. 

  40. 

  41. <p>But if it has been overused, this probably speaks as much as anything to its usefulness. Bootstrap makes it easy to create a responsive design, and comes with lots of features out of the box: from icons to styled inputs and brings standardization to many common page elements, from breadcrumbs to alerts to pagination. There are also a ton of <a href="https://themes.getbootstrap.com/" target="_blank">ready-made</a> themes out there, in case theming isn't your thing.</p>
    42. 

  42. 

  43. <p>Bootstrap is available <a href="https://github.com/twbs/bootstrap" target="_blank">on GitHub</a> under an <a href="https://github.com/twbs/bootstrap/blob/v4-dev/LICENSE" target="_blank">MIT license</a>.</p>
    44. 

  44. 

  45. <h2>HTML5 Boilerplate</h2>
    46. 

  46. 

  47. <p>My personal favorite for starting with a new project is <a href="https://html5boilerplate.com/" target="_blank">HTML5 Boilerplate</a>. It includes most of the elements I end up adding to any new web project out of the box: a snippet for analytics, all of the various icon sizes I end up forgetting to look up, and some default CSS and JavaScript templates that help me keep organized.</p>
    48. 

  48. 

  49. <p>But it's also fairly lightweight, and if I don't need a particular component for a project, it's easy enough to snip it out and never look back. If you're looking for a balance between minimalist and full featured, HTML5 Boilerplate might hit that sweet spot for you.</p>
    50. 

  50. 

  51. <p>HTML5 Boilerplate is <a href="https://github.com/h5bp/html5-boilerplate" target="_blank">on GitHub</a> under an <a href="https://github.com/h5bp/html5-boilerplate/blob/master/LICENSE.txt" target="_blank">MIT license</a>.</p>
    52. 

  52. 

  53. <h2>Skeleton</h2>
    54. 

  54. 

  55. <p><a href="http://getskeleton.com/" target="_blank">Skeleton</a> is the lightest framework in the bunch. Weighing in at around 400 lines of code, it's also very easy to work with. If you've worked with web frameworks before and find them to be too bulky or just overkill for what you need, Skeleton provides some good bare bones (hah!) to work with: a simple grid; nicely formatted forms, lists, tables. typography, and other basic elements; and cross-browser support. Everything else is up to you.</p>
    56. 

  56. 

  57. <p>Skeleton is <a href="https://github.com/dhg/Skeleton/" target="_blank">on GitHub</a> under an <a href="https://github.com/dhg/Skeleton/blob/master/LICENSE.md" target="_blank">MIT license</a>.</p>
    58. 

  58. 

  59. <hr /><p>Should you use one of these?</p>
    60. 

  60. 

  61. <p>My recommendation is to shop around, try out a few options, and use which one works best for your needs. Hate all three of these options? There are plenty of <a href="https://github.com/melvin0008/awesome-projects-boilerplates#websites" target="_blank">other options</a> out there. And if you spend a substantial amount of your time creating for the web, consider building out a generic web template that works for you. Despite what some might have you think, you don't need a complicated JavaScript framework just to build a simple front-end, whether for a traditional informational page or a lightweight web application.</p>
    62. 

  62. 

  63. <p>You might also check out <a href="http://www.initializr.com/" target="_blank">Initializr</a>, an open source web application that can pre-configure HTML5 Boilerplate, either as a classic or responsive page, or Bootstrap, with only the options you need.</p>
    64. 

  64. 

  65. <p>So what about you? Do you have a favorite template or framework for web design? Or do you take a different approach to web design altogether? Let us know in the comments below.</p>
    66. 

  66. </div></div></div>
    67. 

  67.   
    68. 

  68.   </div>
    69. 

  69. <div class="panel-pane pane-views-panes pane-listacles-panel-pane-1"  >
    70. 

  70.   
    71. 

  71.       
    72. 

  72.   
    73. 

  73.   <div class="view view-listacles view-id-listacles view-display-id-panel_pane_1 view-dom-id-8a150d9fb72961b749d668c33d768213">
    74. 

  74.         
    75. 

  75.   
    76. 

  76.   
    77. 

  77.       <div class="view-content">
    78. 

  78.               
    79. 

  79.   <div class="views-field views-field-field-listacles">        <div class="field-content"></div>  </div>      </div>
    80. 

  80.   
    81. 

  81.   
    82. 

  82.   
    83. 

  83.   
    84. 

  84.   
    85. 

  85.   
    86. 

  86. </div>
    87. 

  87.   
    88. 

  88.   </div>
    89. 

  89. <div class="panel-pane pane-entity-field pane-node-field-tags"  >
    90. 

  90.   
    91. 

  91.         <h2 class="pane-title">
    92. 

  92.       Topics    </h2>
    93. 

  93.     
    94. 

  94.   
    95. 

  95.   <div class="field field-name-field-tags field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even" rel="schema:keywords"><a href="/tags/web-development" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Web development</a></div></div></div>
    96. 

  96.   
    97. 

  97.   </div>
    98. 

  98. <div class="panel-pane pane-views-panes pane-author-info-panel-pane-1"  >
    99. 

  99.   
    100. 

  100.       
    101. 

  101.   
    102. 

  102.   <div class="view view-author-info view-id-author_info view-display-id-panel_pane_1 view-dom-id-d1961a114d3d017a68c4486343e8058e">
    103. 

  103.         
    104. 

  104.   
    105. 

  105.   
    106. 

  106.       <div class="view-content">
    107. 

  107.               
    108. 

  108.   <div class="authorbio">        <h2 class="authorbio__pane-title pane-title">About the author</h2>
    109. 

  109. <div class="authorbio__content">
    110. 

  110.   <span class="authorbio__name">Jason Baker</span> - <span class="authorbio__about">I use technology to make the world more open. Linux desktop enthusiast. Map/geospatial nerd. Raspberry Pi tinkerer. Data analysis and visualization geek. Occasional coder. Cloud nativist. Civic tech and open government booster.
    111. 

  111. </span>
    112. 

  112. </div>  </div>      </div>
    113. 

  113. 

  114.   <!-- This was a triumph! I'm making a note here, huge success. -->
    115. 

  115. </body>
    116. 

  116. </html>
    117. 

  117.