Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Kube

    Загружено:

    Jesús Marín
    83 просмотров40 страниц
    Kube is a minimalist web framework that aims to help developers and designers spend less time on routine tasks and more time creating products. It provides a flexible grid system, typography elements, forms, tables, buttons and other components to build interfaces quickly. Kube works across modern browsers and devices and uses a responsive design. It is free to use for personal or commercial projects under the MIT license. The framework is written in CSS and JavaScript and uses LESS preprocessing. Updates add new features and fix issues. Stencils are also provided to help make wireframes.

    Исходное описание:

    Kube presentation slides

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    PPT, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    Kube is a minimalist web framework that aims to help developers and designers spend less time on routine tasks and more time creating products. It provides a flexible grid system, typography elements, forms, tables, buttons and other components to build interfaces quickly. Kube works across modern browsers and devices and uses a responsive design. It is free to use for personal or commercial projects under the MIT license. The framework is written in CSS and JavaScript and uses LESS preprocessing. Updates add new features and fix issues. Stencils are also provided to help make wireframes.

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PPT, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    83 просмотров40 страниц

    Kube

    Загружено:

    Jesús Marín
    Kube is a minimalist web framework that aims to help developers and designers spend less time on routine tasks and more time creating products. It provides a flexible grid system, typography elements, forms, tables, buttons and other components to build interfaces quickly. Kube works across modern browsers and devices and uses a responsive design. It is free to use for personal or commercial projects under the MIT license. The framework is written in CSS and JavaScript and uses LESS preprocessing. Updates add new features and fix issues. Stencils are also provided to help make wireframes.

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PPT, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 40

    DJV

    Kube Web Framework


    by Imperavi
    Dailos Sabina
    Jess Marn
    Vanessa Marn

    DJV

    Kube Web Framework

    One of the world's most advanced


    and flexible frameworks.
    Minimalistic framework for professional
    developers and designers.
    Helps you spend less time on routine
    tasks and more time
    creating amazing products.
    Focus on success, and Kube will cover the
    technology behind it.

    DJV

    Kube Web Framework

    Kube doesnt force you into specific


    styling.
    Kube doesnt require rewriting its code; it
    leaves all of the important decisions to you
    and your creative genius.
    Think about Kube as if it was your most
    reliable helper, who would do your routine
    job with a smile on his face, so that you
    can actually concentrate on something big
    and wonderful.

    DJV

    Kube Web Framework

    Kube is built with integrity and technology


    in mind. Professional developers and
    designers usually dont use pre-existing
    templates and other pre-defined elements
    from other frameworks, so Kube doesnt
    have any of these: Kube gives you full
    power of choice, creativity and beauty,
    while handling all of the technology behind
    it.

    DJV

    Kube Web Framework

    Kube has responsive grid, noncommittal


    flexible typography, clean forms, tables
    and basically everything you may need to
    build a fast wireframe, a web portal or a
    mobile application (yes, Kube has got your
    back in mobile development too).

    DJV

    Kube Web Framework

    Kube works in all modern browsers on


    desktops and mobile devices:
    Latest Chrome
    Latest Firefox
    Latest Safari
    Latest Opera
    IE9+
    and mobile browsers

    DJV

    Kube Web Framework

    Plantilla Base:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Kube Web Framework</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet"href="css/kube.min.css" />
    <link rel="stylesheet" href="css/your-styles.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
    <script src="js/kube.min.js"></script>

    </head>
    <body>
    <h1>Hello, world!</h1>
    </body>
    </html>

    DJV

    Kube Web Framework

    License under MIT:


    Kube Framework is absolutely free for
    personal or commercial use and you can
    use Kube in any open-source project
    You can fork Kube on Github for any
    needs whatsoever.
    You can sell and redistribute any
    modification of Kube and even rename to
    Mube, if you like

    DJV

    Kube Web Framework

    Licencia:
    Kube Framework is absolutely free for
    personal or commercial use and you can
    use Kube in any open-source project
    You can fork Kube on Github for any
    needs whatsoever.
    You can sell and redistribute any
    modification of Kube and even rename to
    Mube, if you like

    DJV

    Kube Web Framework

    Based on:
    CSS Components
    JavaScript Tools
    Stencils

    DJV

    Kube Web Framework


    Css Components

    Overview
    line height
    All text and elements have line-height:
    1.618em; applied to them We think this
    value is perfect and universal for line
    spacing no matter what font size you use.

    DJV

    Kube Web Framework


    Css Components

    Overview (2):
    box-sizing
    All elements in Kube have box-sizing:
    border-box; property set. Long story short,
    additional padding will not add any extra
    width to elements.

    DJV

    Kube Web Framework


    Css Components

    Overview (3a):
    variables.less
    If you download Kube with LESS, youll
    find variables.less file. This file contains all
    the settings for Kube, such as font family,
    font size, headers size, colors, etc.
    Of course, you can change any setting you
    like and completely rebuild Kube for your
    needs and according to your taste.

    DJV

    Kube Web Framework


    Css Components

    Overview (3b):
    less
    Less is a CSS pre-processor, meaning
    that it extends the CSS language, adding
    features that allow variables, mixins,
    functions and many other techniques that
    allow you to make CSS that is more
    maintainable, themable and extendable.

    DJV

    Kube Web Framework


    Css Components

    Overview (4):
    Grid
    We researched and researched all of the
    grids out there, and Kube is a result of
    rethinking worlds best practices and our
    experience with grids.

    DJV

    Kube Web Framework


    Css Components

    Overview (5):
    Grid (2)
    Grid behind a framework must be simple
    and universal, no matter what you are
    working on.
    We dont think that maths in grids or fixed
    grids is a good idea for the Web.
    Thats why grid in Kube is fluid and being
    set in block percents. Kube grid system

    DJV

    Kube Web Framework


    Css Components

    Overview (5):
    Grid (3)
    Thats why grid in Kube is fluid and being
    set in block percents. Kube grid system
    lets you think, develop and project on a
    high level of abstraction without wasting
    time on getting accustomed to artificial
    units and measurements.

    DJV

    Kube Web Framework


    Css Components

    Tipography
    Headers, Lists, Paragraphs, Blockquotes,
    and other necessary elements
    Typography is by far the most visible thing
    on the Web. Kube introduces precisely
    measured, visually appealing and
    graphically attractive typography elements
    of every possible kind.

    DJV

    Kube Web Framework


    Css Components

    Blocks
    Fast Block elements
    It is very easy to add, adjust, rearrange or
    stylize all sorts of blocks on a page.

    DJV

    Kube Web Framework


    Css Components

    Tables
    All sorts of tables
    Tables may or may not look like tables, it
    is totally up to you. Borders, margins,
    captions, fully responsive and completely
    customizable.

    DJV

    Kube Web Framework


    Css Components

    Default Table
    First Name

    Last Name

    Points

    Jill

    Smith

    50

    Eve

    Jackson

    94

    Total points
    1.<table>
    2.<thead>
    3.<tr>
    4.<th>...</th>
    5.</tr>
    6.</thead>
    7.<tbody>
    8.<tr>
    9.<td>...</td>
    10.</tr>
    11.</tbody>
    12.<tfoot>
    13.<tr>
    14.<td>...</td>
    15.</tr>
    16.</tfoot>
    17.</table>

    223

    DJV

    Kube Web Framework


    Css Components

    Forms
    Beautiful looking forms.
    Kube offers full control over look and feel
    of a form, whether you need black
    background, Live Search or Autocomplete.
    Full set of input types make it easy to
    create forms of any kind. Only utilize
    native tags while remaining most flexible in
    building most complicated forms.

    DJV

    Kube Web Framework


    Css Components

    Navigation
    Vertical or horizontal, it is so much more
    than just navbars
    Create, customize and enhance navigation
    in seconds. Full-width, vertical,
    breadcrumbs, pagination, you name it!

    DJV

    Kube Web Framework


    Css Components

    Buttons
    Large, small, flat or round. Any width,
    any color.
    Kube offers widest variety of fully
    customizable buttons. Append a button to
    an input field, or make a button full-width,
    or let a button complement your flat
    design. The possibilities are endless.

    DJV

    Kube Web Framework


    Css Components

    Labels
    And badges
    Choose between colorful labels and
    colorful badges. Whichever works best for
    you.

    DJV

    Kube Web Framework


    Css Components

    Search
    Lookup anything
    Incorporate search forms into any design
    you come up with. Works best with
    Live Search, Autocomplete and
    Navigation.

    DJV

    Kube Web Framework


    Css Components

    Notifications
    Notify in style, any style
    Choose a perfect style for your
    notifications. Let users know whats
    urgent, complete or needs attention using
    various colors.

    DJV

    Kube Web Framework


    Css Components

    Colors
    Bright or pastel, basic or grayscale, and
    everything in between
    Six beautiful and carefully measured basic
    colors with three variations of each.

    DJV

    Kube Web Framework


    Css Components

    Helpers
    Native useful tools
    Use plain English to apply properties. If
    you want it to be light, say .light, if you
    want it smaller, say .smaller

    DJV

    Kube Web Framework


    Css Components

    Mixins
    Smarter, smaller and faster markup
    With Mixins, save tons of time on applying
    common properties. Type less, get more.

    DJV

    Kube Web Framework


    Css Components

    Icons
    Use icons with ease
    Easily add and use icons. FontAwesome
    or custom fonts, its as easy as
    <button class="btn"><i class="fa
    facog"></i> Button</button>

    DJV

    Kube Web Framework


    JavaScript Tools

    Message
    Show up notifications
    over a page
    A nice Notification
    appears on a page
    whenever needed.

    Tooltip
    Helpful little hints
    Useful information
    about elements on
    a page shown on
    mouse hover.

    DJV

    Kube Web Framework


    JavaScript Tools
    Buttons

    Tabs
    Control tabs with API
    and Callbacks.
    Selected tabs get active
    via API or run custom
    code when
    openCallback fires.

    JS-powered switch,
    toggle and
    segmented buttons.

    DJV

    Kube Web Framework


    JavaScript Tools

    Accordion
    Dropdown
    Foldable or unfoldable
    data on click.

    For a list of layers


    with just text or
    whole layers.

    DJV

    Kube Web Framework


    JavaScript Tools

    Check All
    Upload
    Drag and drop made
    easy for file upload
    with simple file input.

    Check or uncheck all


    checkboxs at once.

    DJV

    Kube Web Framework


    JavaScript Tools

    Infinite Scroll
    Modal
    Good old modal with
    better event
    handling.

    For those who do not


    like pagination.

    DJV

    Kube Web Framework


    JavaScript Tools
    Progress
    Display progress bar
    on the top. Works
    best with upload.
    TextFit
    Automagical text
    resizing

    DJV

    Kube Web Framework


    Updates

    Updates
    Version 4.0.2 September 24, 2014
    Added .unit-role-right and .unit-role-left in
    grid.less
    Added .hide-on-mobile in helpers.less
    Fixed Butons disabled state
    Fixed JS Navigation Toggle
    Fixed Hide JS Message via ESC

    DJV

    Kube Web Framework


    Stencils

    Set of elements for making wireframes in


    OmniGraffle 5/6 on Mac OS X. It consists
    of a simple and clear elements to create
    rapid prototypes and wireframes of
    websites.
    Kube Stencils is all you need to make a
    clean and nice looking wireframes.

    DJV

    Kube Web Framework


    by Imperavi
    Questions & Answers

    Вам также может понравиться