/Base

A front-end web template

Primary LanguageCSS

♥ Base V2.0.1 ♥

Base is a front-end HTML5 template. Featuring the latest technologies and impeccable code this download is the ideal starting point for any web project.

Features

Base is a CSS/SASS/HTML5 based mobile first front end template which is impeccably neat and tidy and is an ideal starting point for a web project of any size.

Base is for developers who want a platform to start their web projects. Base offers the fundamental parts of a web project that a developer can then build upon.

Base is extremely lightweight and is ready to go straight out of the box. Download the files. Choose either CSS/SASS for your stylesheet language and then get coding. The files are impeccably neat and generously commented and they include markup and style examples.

Base uses a mobile first/progressive enhancement approach. It offers some basic features such as media queries, but it’s also very modular so if you don’t want something then take it out. Chances are you will use everything that’s in there though.

Base is not an extensive template that offers a ton of code that means a developer doesn’t have to do much coding. Only an amateurish developer would use those. ;-)

View the website at www.base.webknit.co.uk

Gulp - Start Guide

  • Need to ensure you have everything on your machine
  • Run npm install --global gulp
  • Run npm install to install everything (might need sudo)
  • gulp to run it

SASS Modules

The modules directory is reserved for Sass code that doesn't cause Sass to actually output CSS. Things like mixin declarations, functions, and variables.

  • _variables.scss - Colours, Gradients, Typography
  • _functions.scss - All the functions go in here
  • _mixins.scss - All the mixins go in here

SASS Partials

The partials directory is where most of the CSS is constructed. Plan ahead and think how to structure these.

  • _reset.scss - Reset, including HTML5
  • _vendor.scss - The vendor directory is for third-party CSS
  • _base.scss - All the base elements, HTML, body, container, headers, links, img, blockquote etc
  • _buttons.scss - Button styles
  • _forms.scss - Form styles
  • _font-face.scss - Font face stuff

Structuring your projects

This is a developer preference. There is no offical way. Do you want all your pages in partials? Would you rather just add main components and still use style.scss for the bulk of the CSS? Do what's best for you and your project.

Log

  • V2.0.1 (23/06/2015) - Swapping EMs for REMs
  • V2.0.0 (23/06/2015) - New folder structure and swapping Grunt for Gulp
  • V1.4.4 (07/12/2014) - Introducing new way of writing colour variables in SASS
  • V1.4.3 (22/09/2014) - Importing Compass to the SASS files
  • V1.4.2 (12/08/2014) - Including Susy SASS & new CSS grids based on Susy output
  • V1.4.1 (12/08/2014) - Including Susy
  • V1.4.0 (09/08/2014) - Including Grunt
  • V1.3.4 (21/06/2014) - Updating to jQuery 1.11.1 and adjusting spacing in the JS file
  • V1.3.3 (09/05/2014) - Removing Modernizr & GA code - users should add these if needed
  • V1.3.2 (16/03/2014) - New design. Also new website design at http://base.webknit.co.uk/
  • V1.3.1 (25/02/2014) - Media queries all in one file for both vanilla CSS and SASS uses a new function
  • V1.3.0 (20/02/2014) - Completely reworking SASS, including modules and partials folders
  • V1.2.4 (14/05/2013) - Updating jQuery to 1.10.2, renaming SASS files, Adding form attributes
  • V1.2.3 (14/05/2013) - Moving away from px and onto ems
  • V1.2.2 (24/04/2013) - Removing LESS, new folder structure, cleaning HTML markup
  • V1.2.1 (12/04/2013) - Introducing SASS @import modules
  • V1.2.0 (13/02/2013) - Mobile first
  • V1.1.2 (28/01/2013) - Introducing SASS
  • V1.1.1 (17/12/2012) - Grid.css now also LESS. CSS ordered alphabetically
  • V1.1.0 (17/12/2012) - Introducing LESS. CSS Reset refined
  • V1.0.1 (26/11/2012) - Adding additional spacing to CSS file
  • V1.0.0 (03/11/2012) - Initial Base template release

Who's behind this?

Base is proudly made by Webknit and is the result of many hours working on projects of all sizes. It is driven by a massive enthusiasm for all things web.

Base is constantly updated and modified to ensure it stays on top of the game. If you’ve any suggestions or ideas then don’t hesitate to get in touch.