Hello all,
My name is Cameron Burkholder, and I’m a front end developer (you can find me here). With all of the buzz about the 100 days of code, I decided to join in as a way of improving myself. While I didn’t push to Github every single day, or code for exactly an hour each day, I did code daily.
At first, the only real products of this were several small projects for myself, and the redesign of some of my front end cert projects. My projects were all based in Bootstrap, and the more I used it the more I got to thinking. Bootstrap is great for creating components like wells, navs, lists, buttons, etc. You already know the like. With building each project, I got frustrated with the amount of CSS involved in styling these components. Why couldn’t Bootstrap make responsive styling easier?
For me, I tend to lean towards the Atomic CSS model. You know, tiny CSS classes that apply extremely specific styles. I started looking for something with the power of Bootstrap’s components, but easily supported responsive atomic classes. Maybe I didn’t search hard enough, but I couldn’t find anything. So, making a profound over-estimation of the difficulty, I decided to build my own.
I called my framework Rose, and I’m not gonna lie, its not that good. As I started, the first thing I thought needed to be done is lay out class syntax. I settled on what I call the Display - Trait _ Size system. Essentially, I divided screens into 5 sizes. Monitor (>1824px), Desktop (>1224px), Laptop (>990px), Tablet (>480px), and Mobile (anything less). I assigned these displays a display prefix: monitor and desktop: lg, laptop: md, tablet: sm, mobile: xs. That is the Display system. The Traits are commonly used styles like position, color, border-size, etc. Finally, Size is the size, also given the lg, md, sm, and xs suffixes.
That’s really confusing but here is an example. I want a div to have large margin on a big desktop, but no margin on a mobile device, so to do this, instead of relying on making my own stylesheet, I can do this with Rose. This would be
< div class=“lg-margin_lg xs-no-margin” > < / div >
My intent in doing this is to make applying styles that change based on screen size much easier.
Next, I made a grid. Currently, each grid unit has built in margin, and is base 1, 2, 3, 4, 6, 8, 12, and 16 (yeah its kinda flexible). These are used by applying the unit class to anything that is a unit, and then adding the screen size prefix and the desired fraction of the parent element. So, md-1-6 would take up 1-6 on a laptop or larger (because I did build in some fallback support so you didn’t have to declare a style for each size. At minimum, you only need xs and md for any styles).
The grid also has containers, known as grid and grid full. These are comparable to container and container-fluid.
In going with the design trend of large screen content pages, I created the cover, cover-image, cover-small, and cover-image-small classes.I won’t go into specifics, but on laptop and bigger, cover and cover images have a minimum height of the screen height, but will expand to fit content. Both cover-image and cover-image-small make use of HTML5 custom data atrributes, so this way you only have to add the cover-image class, and then the data-src attribute with a value of where ever your background media comes from. I thought this was cool because this way you only need two attributes each with one value (technically) to style a full screen div with a background image, no repeat, positioned to the center.
There are a lot of traits and things like this, and once I get around to it, they will be fully documented on my Github.
After all of the modules, I added some theming. Basically, using Sass I set a base color, accent color, and a light color. Each has two classes: color, and color-bg. The first sets font color and the second sets background color. You can easily add more just by creating your own classes with similar nomenclature.
Finally, after the theme I did my best to create a type of normalize.css stylesheet that I called base. Here I gave some basic stylings to what I figured might be the most common base html tags.
After all the coding was done, I divided the stylesheets into 3 forms (Modules, Theme, Base) based on the SMACSS guide. Of course, once I did this I realised it would be way easier to use if they were all included in once stylesheet so I recombined them.
Once all of this was done, give or take a few bug fixes and feature updates, it was done, clocking in at over 23,000 lines of code (uncompressed).
This may all sound impressive, but honestly, I don’t know how development ready Rose is. There aren’t a whole lot of Bootstrap-ish components (wells, navs, etc…) (yet), there is certainly enough to build good looking websites pretty fast, which I’m proud of. You can link to the css stylesheet for Rose at my website, https://burkholderwd.com/rose/rose.min.css , and the same for the js: rose/rose.min.js .
With all this being said, I did learn a lot, and given that I designed it for my tastes in css, I understand that this may not be for everyone, or for anyone, but for me, its my biggest project and it makes designing much easier. Feel free to check the project out on my Github, but neither the site nor the documentation are completely done yet as I literally finished it < 1 hour ago.
And can you post the unminified version?