A blank project to kickstart your next website!
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
desktop-first
mobile-first
LICENSE.md
README.md

README.md

Starter Kit

by Jessica Felts

Use this blank project to kickstart your next website!

What's New?

This Starter Kit now includes the option for a Desktop-First styling approach, as well as the original Mobile-First styling approach. These have been broken down into individual folders for easier access by potential users.

Includes:

index.html file

  • meta information
  • blank title
  • link to normalize.css cdn
  • link to main.css file

main.css file

  • global styles to make your life easier
  • main-container styling to get you started
  • either a mobile-first or desktop-first media query setup

Media Queries:

Mobile-First Styling

Mobile-first optimized media queries allow for 9 breakpoints, and one additional query for screens smaller than the first breakpoint. Developers will not need to use every breakpoint for every project, but these have been provided to give the Developer a better understanding of popular screen sizes. (The sizes have been determined with help from Chrome Developer Tools and general knowledge of popular Monitor Resolutions)

  • 319px or less -- Mobile XS
  • 320px -- Mobile S
  • 375px -- Mobile M
  • 425px -- Mobile L
  • 768px -- Mobile XL / Tablet
  • 1024px -- Tablet / Laptop / Desktop XS
  • 1280px -- Desktop S
  • 1366px -- Desktop M
  • 1440px -- Desktop L
  • 1920px -- Desktop XL

Desktop-First Styling

Desktop-first optimized media queries allow for 9 breakpoints, and an additional query for screens larger than the first breakpoint. Developers will not need to use every breakpoint for every project, but these have been provided to give the Developer a better understanding of popular screen sizes. (The sizes have been determined with help from Chrome Developer Tools and general knowledge of popular Monitor Resolutions)

  • 1920px or greater -- Desktop XL
  • 1919px -- Desktop L
  • 1439px -- Desktop M
  • 1365px -- Desktop S
  • 1279px -- Tablet / Laptop / Desktop XS
  • 1023px -- Mobile XL / Tablet
  • 767px -- Mobile L
  • 424px -- Mobile M
  • 374px -- Mobile S
  • 319px -- Mobile XS

Please Note:

If you are also planning to use the Bootstrap CSS framework, it supports the following breakpoints automatically:

  • 1200px or greater -- Large Devices, Desktops
  • 992px or greater -- Medium Devices, Desktops
  • 768px or greater -- Small Devices, Tablets
  • 767px or less -- Extra Small Devices, Phones

This Starter Kit can be used in combination with the Bootstrap framework breakpoints, for a more customized development experience.