Responsive Grid System

Using Responsive Grid System. Different files are joined together as one to save some bandwidth. Please copy the code in Notepad++ or any text editor and save it i.e. spartans-grid.css
/* Using Responsive Grid System by Graham Miller with Thanks */

/* SECTIONS ============================================================================= */

.section {
clear: both;
padding: 0px;
margin: 0px;
}

/* GROUPING ============================================================================= */

.row:before,
.row:after {
content:””;
display:table;
}
.row:after {
clear:both;
}
.row {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/* GRID COLUMN SETUP ==================================================================== */

.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */

/* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}
/* GRID OF TWO ============================================================================= */

.span-2-of-2 {
width: 100%;
}

.span-1-of-2 {
width: 49.2%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.span-2-of-2 {
width: 100%;
}
.span-1-of-2 {
width: 100%;
}
}

/* GRID OF THREE ============================================================================= */

.span-3-of-3 {
width: 100%;
}

.span-2-of-3 {
width: 66.13%;
}

.span-1-of-3 {
width: 32.26%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.span-3-of-3 {
width: 100%;
}
.span-2-of-3 {
width: 100%;
}
.span-1-of-3 {
width: 100%;
}
}

/* GRID OF FOUR ============================================================================= */

.span-4-of-4 {
width: 100%;
}

.span-3-of-4 {
width: 74.6%;
}

.span-2-of-4 {
width: 49.2%;
}

.span-1-of-4 {
width: 23.8%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.span-4-of-4 {
width: 100%;
}
.span-3-of-4 {
width: 100%;
}
.span-2-of-4 {
width: 100%;
}
.span-1-of-4 {
width: 100%;
}
}

/* GRID OF FIVE ============================================================================= */

.span-5-of-5 {
width: 100%;
}

.span-4-of-5 {
width: 79.68%;
}

.span-3-of-5 {
width: 59.36%;
}

.span-2-of-5 {
width: 39.04%;
}

.span-1-of-5 {
width: 18.72%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.span-5-of-5 {
width: 100%;
}
.span-4-of-5 {
width: 100%;
}
.span-3-of-5 {
width: 100%;
}
.span-2-of-5 {
width: 100%;
}
.span-1-of-5 {
width: 100%;
}
}

/* GRID OF SIX ============================================================================= */

.span-6-of-6 {
width: 100%;
}

.span-5-of-6 {
width: 83.06%;
}

.span-4-of-6 {
width: 66.13%;
}

.span-3-of-6 {
width: 49.2%;
}

.span-2-of-6 {
width: 32.26%;
}

.span-1-of-6 {
width: 15.33%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.span-6-of-6 {
width: 100%;
}
.span-5-of-6 {
width: 100%;
}
.span-4-of-6 {
width: 100%;
}
.span-3-of-6 {
width: 100%;
}
.span-2-of-6 {
width: 100%;
}
.span-1-of-6 {
width: 100%;
}
}

/* GRID OF SEVEN ============================================================================= */

.span-7-of-7 {
width: 100%;
}

.span-6-of-7 {
width: 85.48%;
}

.span-5-of-7 {
width: 70.97%;
}

.span-4-of-7 {
width: 56.45%;
}

.span-3-of-7 {
width: 41.94%;
}

.span-2-of-7 {
width: 27.42%;
}

.span-1-of-7 {
width: 12.91%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.span-7-of-7 {
width: 100%;
}
.span-6-of-7 {
width: 100%;
}
.span-5-of-7 {
width: 100%;
}
.span-4-of-7 {
width: 100%;
}
.span-3-of-7 {
width: 100%;
}
.span-2-of-7 {
width: 100%;
}
.span-1-of-7 {
width: 100%;
}
}

/* GRID OF EIGHT ============================================================================= */

.span-8-of-8 {
width: 100%;
}

.span-7-of-8 {
width: 87.3%;
}

.span-6-of-8 {
width: 74.6%;
}

.span-5-of-8 {
width: 61.9%;
}

.span-4-of-8 {
width: 49.2%;
}

.span-3-of-8 {
width: 36.5%;
}

.span-2-of-8 {
width: 23.8%;
}

.span-1-of-8 {
width: 11.1%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.span-8-of-8 {
width: 100%;
}
.span-7-of-8 {
width: 100%;
}
.span-6-of-8 {
width: 100%;
}
.span-5-of-8 {
width: 100%;
}
.span-4-of-8 {
width: 100%;
}
.span-3-of-8 {
width: 100%;
}
.span-2-of-8 {
width: 100%;
}
.span-1-of-8 {
width: 100%;
}
}

/* GRID OF NINE ============================================================================= */

.span-9-of-9 {
width: 100%;
}

.span-8-of-9 {
width: 88.71%;
}

.span-7-of-9 {
width: 77.42%;
}

.span-6-of-9 {
width: 66.13%;
}

.span-5-of-9 {
width: 54.84%;
}

.span-4-of-9 {
width: 43.55%;
}

.span-3-of-9 {
width: 32.26%;
}

.span-2-of-9 {
width: 20.97%;
}

.span-1-of-9 {
width: 9.68%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.span-9-of-9 {
width: 100%;
}
.span-8-of-9 {
width: 100%;
}
.span-7-of-9 {
width: 100%;
}
.span-6-of-9 {
width: 100%;
}
.span-5-of-9 {
width: 100%;
}
.span-4-of-9 {
width: 100%;
}
.span-3-of-9 {
width: 100%;
}
.span-2-of-9 {
width: 100%;
}
.span-1-of-9 {
width: 100%;
}
}

/* GRID OF TEN ============================================================================= */

.span-10-of-10 {
width: 100%;
}

.span-9-of-10 {
width: 89.84%;
}

.span-8-of-10 {
width: 79.68%;
}

.span-7-of-10 {
width: 69.52%;
}

.span-6-of-10 {
width: 59.36%;
}

.span-5-of-10 {
width: 49.2%;
}

.span-4-of-10 {
width: 39.04%;
}

.span-3-of-10 {
width: 28.88%;
}

.span-2-of-10 {
width: 18.72%;
}

.span-1-of-10 {
width: 8.56%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.span-10-of-10 {
width: 100%;
}
.span-9-of-10 {
width: 100%;
}
.span-8-of-10 {
width: 100%;
}
.span-7-of-10 {
width: 100%;
}
.span-6-of-10 {
width: 100%;
}
.span-5-of-10 {
width: 100%;
}
.span-4-of-10 {
width: 100%;
}
.span-3-of-10 {
width: 100%;
}
.span-2-of-10 {
width: 100%;
}
.span-1-of-10 {
width: 100%;
}
}

/* GRID OF ELEVEN ============================================================================= */

.span-11-of-11 {
width: 100%;
}

.span-10-of-11 {
width: 90.76%;
}

.span-9-of-11 {
width: 81.52%;
}

.span-8-of-11 {
width: 72.29%;
}

.span-7-of-11 {
width: 63.05%;
}

.span-6-of-11 {
width: 53.81%;
}

.span-5-of-11 {
width: 44.58%;
}

.span-4-of-11 {
width: 35.34%;
}

.span-3-of-11 {
width: 26.1%;
}

.span-2-of-11 {
width: 16.87%;
}

.span-1-of-11 {
width: 7.63%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.span-11-of-11 {
width: 100%;
}
.span-10-of-11 {
width: 100%;
}
.span-9-of-11 {
width: 100%;
}
.span-8-of-11 {
width: 100%;
}
.span-7-of-11 {
width: 100%;
}
.span-6-of-11 {
width: 100%;
}
.span-5-of-11 {
width: 100%;
}
.span-4-of-11 {
width: 100%;
}
.span-3-of-11 {
width: 100%;
}
.span-2-of-11 {
width: 100%;
}
.span-1-of-11 {
width: 100%;
}
}

/* GRID OF TWELVE ============================================================================= */

.span-12-of-12 {
width: 100%;
}

.span-11-of-12 {
width: 91.53%;
}

.span-10-of-12 {
width: 83.06%;
}

.span-9-of-12 {
width: 74.6%;
}

.span-8-of-12 {
width: 66.13%;
}

.span-7-of-12 {
width: 57.66%;
}

.span-6-of-12 {
width: 49.2%;
}

.span-5-of-12 {
width: 40.73%;
}

.span-4-of-12 {
width: 32.26%;
}

.span-3-of-12 {
width: 23.8%;
}

.span-2-of-12 {
width: 15.33%;
}

.span-1-of-12 {
width: 6.86%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.span-12-of-12 {
width: 100%;
}
.span-11-of-12 {
width: 100%;
}
.span-10-of-12 {
width: 100%;
}
.span-9-of-12 {
width: 100%;
}
.span-8-of-12 {
width: 100%;
}
.span-7-of-12 {
width: 100%;
}
.span-6-of-12 {
width: 100%;
}
.span-5-of-12 {
width: 100%;
}
.span-4-of-12 {
width: 100%;
}
.span-3-of-12 {
width: 100%;
}
.span-2-of-12 {
width: 100%;
}
.span-1-of-12 {
width: 100%;
}
}

WordPress Theme Development Kit

WordPress Theme Development Kit

Prerequisites for WordPress Theme Development / Web Project 

Have you ever thought about ‘House Building Process’? With each web project, we go through the same process (almost). House building is a need. My need. Your need. Or it can be any client’s need. Right? So, before we start building, we consider a few things beforehand. We try to get as many details as we can. We discuss budget etc. Budgets vary and the building process varies along with it. The core will always remain same. However, the use of resources and the outcome will let us know that heavy investments were made in the building proces.

To create or build any WordPress Theme from Scratch, we go through the same process. Following is a list of steps that we usually take to make a WP Theme.

  1. Idea – Preliminary Thoughts – Brainstorming
  2. Pencil Sketch – Raw Prototype – Reference Sites
  3. Color Palette – Typography – Icons – Images –
  4. Markup / Structure / Sections, Divs and Classes etc
  5. CSS – Styles as per brainstormed design
  6. Interactivity / Animations / Effects etc
  7. Programming (CMS based website or Non-CMS based Website). Theme Building / Plugin Development / Addon etc
  8. Production – Staging – Live (Git etc)
  9. Preparing to Move from Localhost to Live Server / Migration / Manual or Automated Process
  10. Feedback – Revisions – Updates etc
  11. Final Product – How/ When and Where to Deliver/ Invoices / Payment / For Sale or One Time Product

 

USEFUL RESOURCES / ASSETS 2019 for #WPSPARTANS300

 

NOTE: Please Watch Task # 73 for additional infohttps://www.youtube.com/FreelancePakistan

 

Prototype / Wireframe / Mockup

 

  

Typography / Fonts

 

 

Color Scheme Generators

 

 

Icons / SVGs

 

 

Animations / Effects

 

  

WordPress Code Generators

 

  

WordPress Useful Snippets

 

 

Educational Resources / Assets

 

 

Boilerplate / Blank HTML Markup

 

 

Boilerplate / Blank WordPress Themes

 

 

 

 

300 Spartans! WP Developers 2019

Please subscribe and Join 300 WP Spartans to get WordPress Theme Development related assets time to time.

You have Successfully Subscribed!

Pin It on Pinterest