Last active
August 17, 2016 00:31
-
-
Save lucasecdb/d21df822ea176f53b369eb974d991d88 to your computer and use it in GitHub Desktop.
Simple sass grid generator script
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#!/usr/bin/env ruby | |
# calculate the columns width in percentage | |
def calc_cols(num) | |
cols = Array.new(num) | |
for i in 0...num do | |
# 100% (total) / total number of columns | |
# * the number of columns we are current calculating | |
cols[i] = (100.0 / num * (i + 1)).round 5 | |
end | |
return cols | |
end | |
# write to the file the final grid | |
def create_grid(filename, cols_w, cols_fix, cols_bound) | |
# open up file with write privileges | |
file = File.new(filename, 'w') | |
# basic scss for grid to work | |
file.puts <<-SCSS | |
.row { | |
\t&::before, | |
\t&::after { | |
\t\tdisplay: table; | |
\t\tcontent: " "; | |
} | |
\t&::after { | |
\t\tclear: both; | |
\t} | |
} | |
SCSS | |
file.puts | |
file.puts <<-SCSS | |
[class*="col-"] { | |
\tdisplay: inline-block; | |
\twidth: 100%; | |
\tfloat: left; | |
\tmin-height: 1px; | |
} | |
SCSS | |
# this only inserts a new line in the file | |
file.puts | |
# for all columns prefixes we have, create 1 media query | |
for i in 0...cols_fix.length | |
file.puts '@media screen and (min-width: %s) {' % [cols_bound[i]] | |
# inside each media query, we have the actual columns classes, for all | |
# columns width | |
for j in 0...cols_w.length | |
file.puts "\t.col-%s-%d {" % [cols_fix[i], j + 1] | |
file.puts "\t\twidth: %s%%;" % [cols_w[j]] | |
file.puts "\t}" | |
end | |
file.puts '}' | |
file.puts | |
end | |
file.close | |
end | |
def main | |
print 'Type the number of columns in your grid: ' | |
col_num = gets.to_i | |
puts 'Calculating columns width...', '' | |
cols = calc_cols col_num | |
print 'Type the columns infix (for responsiveness): ' | |
cols_fix = gets.split ',' | |
# get rid of white space | |
for i in 0...cols_fix.length do | |
cols_fix[i] = cols_fix[i].strip | |
end | |
cols_bound = Array.new() | |
cols_fix.each do |e| | |
print 'Min-width for %s: ' % [e] | |
cols_bound.push gets.chomp | |
end | |
puts | |
create_grid '_grid.scss', cols, cols_fix, cols_bound | |
end | |
if __FILE__ == $0 | |
main | |
end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment