Change Log

Here you can see what is new in this brand new v0.2...

What's new

  • General

    • We've corrected some typos in manual pages.
    • We've added comments into code sections to make them more understandable by no-knowledge readers.
  • Getting started

    • Javascript

      • We've updated jtb_md.js to add new plugins and integrate updated plugins.
      • We've added, button.js plugin to make buttons more interactive.
  • Layout system

    • Flex system

      • We've added _xl breaker to all flex system classes.
    • Relativeness

      • We've added _xl breaker to Occupy System classes.
      • We've added _xl breaker to Percentage System classes.
      • We've added _xl breaker to Multiplication System classes.
      • We've added _00 and _100 classes to Percentage System.
    • JTB Container

      • We've added _xl breaker to JTBContainer classes.
      • We've removed, 50+% padding classes because of unnecessity of them.
      • Now, instead of increasing padding levels by 5, you can use any integer between 0-50 for percentage, 0-100 for pixel paddings. For more details you can check available classes from here.
    • Responsiveness

      • We've added a new screen breaker that targets screens which have more than 1400px width called _xl and applied this breaker in all possible areas in JTB_MD.
      • To make your design unaffected, we changed all breakers' target device widths:
        • _xs: <768px screens
        • _sm: ≥768px and ≤991.9999px screens
        • _md: ≥992px and ≤1199.9999px
        • _lg: ≥1200px screens
        • _xl: ≥1400px screens
        note that, new breaker targets tries to cover all screens greater than a singe pixel point. So if you do not define the _xl style in your project, the _lg type will be applied to your elements.
  • Content

    • Core

      • We've removed .jtbEmph class due to unneccessity of it.
      • We've changed the border color of .jtbImg, .jtbImgCircle, and .jtbImgRounded to --jtb_blue_70
      • We've added .hoverable class to allow you make anything hoverable in your porject.
      • We've corrected some typos in manual page.
    • Typography

      • We've changed the default text color from jtbNavy to jtbGrayDark.
      • We've changed the default text size from 16px to 12px + 0.2% of screen width for making it responsive for each device and provide better user experience.
      • For jtbDisplayHeaders, we've added h5 and h6 tags. Also we've changed the sizes of headers to make them better on every screen.
      • We have changed the hover color of links to create a better emphasize effect. Now instead of adding transparency, they are changing colors to --jtb_blue_80 when they hovered.
    • Colors

      • We've expanded previous color scheme with lightning options. Now you can lighten or darken the color via number suffixes like --jtb_[color][_suffix]
      • We've added 4 new color groups: Pink | Purple | Teal | Aqua to expand the ability of JTB_MD design scheme.
      • We've changed the weights of RGB codes in colors to make them inline with each other. (It is not 'hardly' changed, to keep your previous designs as they are. But you can find some slight differences when you migrate your projects to v0.2.)
      • We've added new classes to JTB_MD to make applying new colors and variants as text color & background color possible without extra css codes.
    • Shadows

      • We have seperated class suffix with underscore (_). With that way, we aimed to make JTB_MD suffix method more consistent and easy to remember.
        • The new classes will be: .jtbBoxShadow_light .jtbBoxShadow .jtbBoxShadow_hard
      • Now it is possible to colorize the shadows with new JTB_MD classes (.jtbBoxShadow[color][_suffix]).
  • Components

    • Alerts

      • We've added new coloring options to alerts with the introduction of new colors in JTB_MD.
      • We've added callback option on jtbAlert plugin for methods.
        • To make this we've added callbackSpeed key into jtbAlert defaults and set it to 600ms.
    • Badges

      • We've applied new color palette of jtbColors to badges for making them beautiful.
    • Buttons

      • We've changed default font-size of buttons and padding options to make them inline with general design pattern.
      • We've added flex abilities to buttons for making placement of icons easier than before.
      • We've changed the default button color to jtbGrayDark from jtbNavy to make JTB_MD universal.
      • We've expanded button color options with new JTB_MD color palette.
      • We've added color lightning options for buttons.
      • We've removed .disabled class from jtbButton and made it universal so .disabled is now usable for any element in JTB_MD.
      • We've added new size for buttons (xl) and reshaped existing ones to make their design inline with JTB_MD.
      • Added, javascript plugin jtbButton.js to allow developers add some animations on their buttons.
        • Especially loading animations with disabling button effects and changing texts.
    • Button gorups

      • We've changed the hover effects of buttons with adding new animations and removing opacity factors from them.
    • Cards

      • We've updated design of jtbCards to make elements inline with general JTB_MD pattern.
      • We've cleared some bugs from card.js which retains browsers to adjust image dimentions.
    • Collapse

      • We've changed the color of borders in accordion elements from jtbGray to jtbGrayLight.
    • Dropdown

      • We've changed the color of items in dropdown container on hover state from jtbBlue to jtbGray.
      • We've changed the default caret of dropdown with triange-down in jtb icons library.
      • We've changed the animations of dropdowns on both fade in and out.
      • We've added ESC key listener to dropdown.js for tracking key press to trigger close action.
      • Now when someone clicks somewhere else other than dropdown area itself, if the container is open, it closes.
    • Input elements

      • We've changed the overall design of input elements to make them inline with design pattern of JTB_MD.
        • Changed the default colors of input areas from jtbBlue to jtbGray.
        • Changed the default font size from fixed to dynamic.
      • We've fixed the validation and emptycheck bug of input.js.
      • We've added, number & url check in validation function. So if you want to validate these; you can do it by adding related type to your input elements.
    • Lightbox NEW!

      • We've added new element to show image galleries on pages via pre-defined functions and animation on JTB_MD.
      • Since this one is brand new on v0.2, there is nothing to say as a 'new feature'. All features in Lightbox section are new!!!
    • List groups

      • We've changed the class attributes of list items, while they are inside of links. If an item is a child of a link, to disable or activate it; instead of adding .active or .disabled class to <li> you need to add it to <a> itself.
      • Now it is possible to generate list groups with <ol> elements.
      • We've changed the font-size attribute of icons inside list elements, and made them smaller than before to make the text inline with icons.
    • Modals

      • We've changed the default width of modal from 80% to 60%.
      • We've changed the default text size of headers from 22px to dynamic (15px + 0.04% of screen width).
      • We've changed the closing icon of modals from jtb-close to jtb-times.
      • We've changed the paddings of header, body, and footer elements inside modal to make them more robust.
      • We've added 4 different size options for modals: .jtbModal_xs, .jtbModal_sm, .jtbModal_md, .jtbModal_lg
      • We've added an option to close active modal via clicking outside of it on modal.js
      • We've added a listener for closing active modal with pressing ESC button in out modal.js
      • We've solved the initialization bug of modals with covering the listeners with document.ready function.
    • Navbars

      • We've changed item alignment to center in jtbNavbar to use its flex abilities.
      • We've changed the default text sizes of navbars to make them inline with general JTB_MD pattern.
      • We've changed the toggle animation and patched the bug on .jtbNavbarToggle click with making related listener to start listen after document ready.
      • We've changed the base brand height from dynamic to 55px in all navbar types.
      • Since the jtb-icons library changed and jtb-bar icon is removed, we are now using jtb-menu icon in out navbars.
      • We've adjusted buttons for each navbar size to make them look better on screen.
    • Progress elements

      • We've changed the default color of loading bars from jtbBlue to jtbGray to make them inline with general pattern.
      • We've integrated, new jtbColors palette to out progress elements.
      • We've add jtbProgress plugin to our jtb_md.js for our brand new 'update' function which allows our users to change the progress levels of our loading bars dynamically.
      • We've integrated, new jtbColors palette to out spinner elements.
    • Tables

      • We've changed the default color of striped tables and hover effects from jtbBlue to jtbGray to make them inline with general pattern.
      • We've increased header padding from 5px to 7px.
    • Toasts

      • We've changed position atrributre from absolute to fixed for showing the toast always in screen.
      • We've seperated the link and dismissable options. With that way a toast can be both has link and be dismissable.
      • We've changed the style of toast a little bit:
        • border-radius has been changed from 12px to 0
        • New min-width is 300px
        • New max-width is 380px
        • All texts now have word-break attribute
        • The icon is now 2em, instead of 1.5em
      • We've added 4 new options to the element:
        • allowSubContent ('false' default): adds a new area to the bottom of toast for showing secondary important things like notification time etc.
        • subContent ('' default): defines the text for sub area.
        • borderRadius ('0' default): allows to curve the toast borders.
        • textColor ('#ffffff' default): allows to give color to icon, image-border, header, content and closing x.
      • We've changed the close button icon from jtb-close to jtb-times because of icon library change.
      • We've corrected semicolon bug of toast.js so it is now working perfect.
    • Tooltips

      • We've added a feature to disable tooltip on 'tooltip hover', so the tooltips in your code will ve visible if and only if the trigger is hovered by user.
      • We've reduced the font-size of both tooltip content and header to make them inline with default text.
  • Icons

    • MD Icons

      • We've expaned usage manual with showing some options you can apply to JTB_MD icon library.
      • We've moved icons list to a new page to make filtering more powerful. (Also created a space for the next version features like animations...)
    • Icon list

      • We've completely changed the icon list with lighter version icons.
      • Added new icon categories.
      • With new icons, the number reached 1087.