Skip to content

Instantly share code, notes, and snippets.

@lucasecdb
Last active August 17, 2016 00:31
Show Gist options
  • Save lucasecdb/d21df822ea176f53b369eb974d991d88 to your computer and use it in GitHub Desktop.
Save lucasecdb/d21df822ea176f53b369eb974d991d88 to your computer and use it in GitHub Desktop.
Simple sass grid generator script
#!/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