Git Product home page Git Product logo

forten's Introduction

Forten CSS Framework

Featuring:

  • Small file size (~15KB!)
  • SCSS foundation and user-friendly variables
  • Flexbox-based system that is lighter than Bootstrap
  • B.E.M. class-naming scheme
  • Semi-flat, semi-skeueomorphic design aesthetics
  • Optional Javascript functionality

Version: 0.2.3 September 24, 2020

Todo:

Pre 1.0

  • For button styling, add {cursor:pointer;}?
  • Add dashes to scss styling to be able to select pieces of the name really easily.
  • Fill in all HTML elements for the whole document
    • buttons
    • input
    • .block
    • .hero
    • aside
    • table
  • Organize sections of the index.html into sections
    • Typography
    • Layout
    • Flexbox and Grid
    • Forms
    • Annotations
  • Add tags and versioning systems
  • Make a bootstrap-like "column-m-30" scheme while mobile layouts.
    • .row
    • all .column sizes
  • Make a CDN option for font downloads as to not host font files.
  • Design a nav system. Only CSS preferably.
  • Make a max-width layout option that considers an aside.
  • Make an option for easily choosing between color swatches for forms
  • Make a wrapper element and logical mixins accordingly
  • Fill in information on augment classes
  • Add comment styling for _options.scss file for upfront streamlined options
  • Make the framework deliverable, create a start index.html, publish on Github - [x] style according to HTML5 section tags - [ ] Added section stylings attached to .container

Post 1.0 (Mainly Javascript)

  • add a dark mode switching function. Maybe automagically.
  • add css-based icons.
  • add input[range] value indicator
  • Make a way to display a file tree for demonstrating special structures like when a parent div class must have specific children

© Kyle Fontenot 2020

forten's People

Contributors

boguskyle avatar kylefontenot avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.