I just created a project 23,000 lines long

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.


This is very commendable.

A+ for the journey and effort. Why don’t you upload it to github, open source it, and give it an alpha-v0.1 designation :slight_smile: And can you post the unminified version?

And invite other fCC campers to contribute to it. I’m sure it will be a great and practical learning experience for others too, and you’ll also continue learning by vetting other people’s code, learning project management, and being in charge of the repository and claiming authorship for this CSS framework – great things to add to a resume.

I know a lot of people here on fCC look down on CSS/HTML as boring stuff, and only want to do Javascript programming. I say these people don’t really know what practical Front End development is really about. :slight_smile:


That’s awesome!!

I agree…open source it to make it even better and more “development ready”

1 Like

Thank you! It is on github under my profile as the “rose-framework” repository. The unminified version is in the root directory, and the version that gets compiled for the build is in the three separate files under the css folder. Now, I’m very new at using Github for open source projects, so I’m not entirely sure what making it open source entails, but I would love to do that. You can check out the repository at https://github.com/Cameron-Burkholder/rose-framework .

1 Like

Ive never collaborated with others on github, except posting bug reports, or working on my own stuff.

From what I understand of the process, others download/clone your project, make their changes, and then creates a Pull Request for you and others to review/comment what changes have been done. Then it’s up to you to accept it and put it in the main branch, or version branch.

Let’s figure this out.

Alright, that sounds like it isn’t that difficult. The repository is up, so I’m gonna go to a couple of the FCC message boards on Gitter and ask for interested developers.

1 Like

I third or fourth that you should open source it…

You can also set up the GitHub as a org which will give you the ability to assign other admins…

If not now maybe keep the link as something to think about if you grow it…

starting the org