https://github.com/foo-dogsquared/fds-css

My first attempt to create a CSS library. Also it will serve to make creating layouts for my apps to be a lot easier.
https://github.com/foo-dogsquared/fds-css

css-classes css-library layout

Last synced: 11 months ago
JSON representation

My first attempt to create a CSS library. Also it will serve to make creating layouts for my apps to be a lot easier.

• Host: GitHub
• URL: https://github.com/foo-dogsquared/fds-css
• Owner: foo-dogsquared
• License: mit
• Created: 2018-06-16T02:39:58.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-07-30T14:08:00.000Z (over 7 years ago)
• Last Synced: 2025-01-11T17:22:11.263Z (about 1 year ago)
• Topics: css-classes, css-library, layout
• Language: HTML
• Size: 17.6 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# fds-css-lib

My first attempt to create a CSS library. Also it will serve to make creating layouts for my apps to be a lot easier.

For now, this will be a lightweight CSS library that utilizes CSS grid through simple declarations of classes in each element. Although there is only one grid and the rest are... something else, I guess.

See the demo in [here](https://foo-dogsquared.github.io/fds-css).

## Documentation

This is made using SCSS for an easier time constructing this stylesheet as it gets a little more complex later on.

Anyways, there is one main way on how to utilize this library so far and that is through the `` tag. For this to (mostly) work, declare the `plain-grid-layout` class to the previously mentioned element. This will now enable the grid. Now there are mainly three componenets that makes up the usual layout: the ``, ``, ``, and the wrappers that is contained within each of them.

For an easier demonstration, here's the boilerplate in order to get the library to be fully working:

```html

    

        
Lorem, ipsum.

        


            
Element 1

            
Element 2

            
Element 3

        

        
Lorem ipsum dolor sit.

    

```


The header and footer over there are already have `flex` as the display value so you might want to go place your sublayouts according to individual containers.

Well, if you are familiar with Jekyll, you might notice that the stylesheet is *pretty much* inspired from the [default stylesheet of the default theme](http://jekyll.github.io/minima/) albeit with a few tweaks, obviously.

You can expand this little layout library as much as you want as long as you credit me (I'm speaking as if anybody will be interested in this, lol).

### Different layouts

Yeah, there is different choices on layouts now even though most (or all) or them are still in development. You can see each 

layout (except for the unsure ones) in the demo page.