Justchill.css Progress Thread

1

Hi! Im creating a responsive CSS library powered by flexbox… the flexbox part is easy. the responsive part? easy when it works…

you guys should try too! I would use bootstrap but I hate using tech I dont understand/create. This was especially spurred with webflows flexbox only mode. I want to make a competitor to webflows and that starts with a easy to use modular stylesheet.

calling it “just chill” because of how easy flowing it is. for example…

<div class="container">
		<div class="flex-row">
			<div class="flex-laptop-12">
				<div class="flex-row flex-justify-center">
					<div class="flex-laptop-1 item-align-end"></div>
					<div class="flex-laptop-1"></div>
					<div class="flex-laptop-1"></div>
					<div class="flex-laptop-1"></div>
					<div class="flex-laptop-1"></div>
					<div class="flex-laptop-1"></div>
					<div class="flex-laptop-1"></div>
					<div class="flex-laptop-1"></div>
					<div class="flex-laptop-1"></div>
					<div class="flex-laptop-1"></div>
					<div class="flex-laptop-1"></div>
					<div class="flex-laptop-1"></div>
				</div>
			</div>
		</div>
	</div>

SUPER readable right? If you have used any css library you already know that the laptop part is the break point. Its so readable its crazy. all this col-sm-4 stuff just looks sloppy to me. I plan on going through with this.

If nothing else, then so that I have a CSS library that I feel entirely comfortable using when it comes to personal projects…

3 Likes
2

Hello!

I am creating a flexbox based CSS only for now framework called justchill.

Im making it as a way to speed up my flexbox projects and front end development all together. At the same time however I really did not want to use bootstrap because I like programming the CSS. Best of both worlds I say.

I have already finished the responsive part of everything so Im a bit lost as to what comes next…

Right now the only thing I have lined up is navbar stuff because my next project requires a navbar.

Any suggestions?
Git repository can be found here: https://github.com/AveryLucas/justchill Still havnt created a .md file

1 Like
3

Forgot about this one. Sorry bout that.

4

This may give you inspirations on where to go next! https://aerolab.co/blog/flexbox-grids

5

I thought about using grid but because its still so new it would make it not work with pretty much all older browsers…

That said my curiosity in it is def. peaked. I probably will follow your advice.

6

Made changes to the syntax. It felt too much like bootstrap. I was trying too hard to make it easy to read that it became bloated and despite how simple it was… it was not any easier to read.

so I changed it. Now it looks like this.

New Syntax

<div class="container">
	<div class="flex">
		<div class="twelve">
			<div class="flex justify-center">
				<div class="one align-end"></div>
				<div class="one"></div>
				<div class="one"></div>
				<div class="one"></div>
				<div class="one"></div>
				<div class="one"></div>
				<div class="one"></div>
				<div class="one"></div>
				<div class="one"></div>
				<div class="one"></div>
				<div class="one"></div>
				<div class="one"></div>
			</div>
		</div>
	</div>
</div>

Compare this to the first post so you can see the difference.

or look at this comparison.

Breakpoints
by default .one does not have breakpoints.
breakpoints can be added by typing the device in question and the number of columns it should take up on said device.
Example…

<div class="flex">
	<div class="twelve tablet-6 laptop-3 desktop-1">
	  Breakpoint Example
	</div>
</div>

I do not have to add .phone-12 because .twelve acts as the break point for phones already. This way, if you want to deal with responsiveness later… .twelve - .one is all you need.

Also switched to programming the Library in SCSS.
I’m really starting to like it more and more now.

Finishing up my portfolio site aswell. built on justchill, will edit this post with link once its done. :+1: