Starmite is a small set of CSS classes and some javacript that allow you to create grid layouts that are fluid and each grid element is square and has no margin.
Starmite was designed for images. When you need a grid of images that are square and touching each other, maybe starmite will help you. Or, maybe it won't.
You should not use starmite for paragraph text. Most grid systems have margins between cells for a reason (readability).
starmite is designed to play nicely with Bootstrap. So, not only can a starmite grid span the entire browser window (as you see at the top of this page), but it can also live inside a Bootstrap grid (as you can see to the right).
Starmite was a Kodak camera with a square negative. For you kids out there, Kodak was a company that used to make cameras and a negative is what you'd get after developing your film.
Each Starmite row in your grid should be a div with class="starmite-row".
Each column should then be the appropriate number of class="starmite-*" divs.
The available number of columns are: 3, 4, 5, 6, 7, 8, 9 and 10. The respective column classes are:
class="starmite-third", class="starmite-fourth", class="starmite-fifth",
class="starmite-sixth", class="starmite-seventh", class="starmite-eighth",
class="starmite-ninth", and class="starmite-tenth".
starmite uses percent widths to create its fluid grid. Because of this, the square format can only be achieved with Javascript. jQuery is required and the code below must be executed onload in order to achieve this. The code also resets the heights when the browser window is resized. This will eventually be refactored into a plugin.
$(function(){
makeSquares = function() {
var rows = $('.starmite-row');
rows.each(function() {
var elements = $('[class^=starmite]', this);
var firstWidth = elements.first().width();
elements.height(firstWidth);
});
}
makeSquares();
$(window).resize(makeSquares);
})
Created by Erik Dungan. Example images are mine from Instagram. Don't steal them.
Why don't you help out by improving it and submitting a pull request?
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.