Foundation фреймворк что это
Total filesize of every component and class now weighs in at 60KB CSS & 84KB JS, with plenty of room to make them even smaller when selectively removing unused components.
Emails
Our email framework helps you craft responsive HTML emails that can be read anywhere on any device. Foundation for Emails helps navigate the how different email clients handle HTML and provide tested patterns that work with Outlook as well as all the other major email clients.
Learn more about Foundation for Emails
Schema
Schema использует модульный подход для обеспечения оптимального опыта front-end разработки. Это означает, что его задачей является помощь в создании сложных пользовательских интерфейсов.
Чтобы лучше понять, как Schema использует новейшие функции CSS3 для создания сложных веб-страниц, посетите страницу документации и ознакомьтесь со всеми возможностями CSS UI framework .
Стиль веб-дизайна Metro приобрел за последнее время немало поклонников. Metro UI сконцентрирован исключительно на разработке Metro-стиля Windows , который позволяет строить гибкие интерфейсы с использованием его лучших черт. Metro UI использует оригинальную спецификацию стилей Metro от Microsoft для создания таких компонентов, как сетки, макеты и многое другое. Он поставляется с более чем двадцатью компонентами, содержит более трехсот полезных иконок и построен на базе препроцессора LESS .
Professional
Millions of designers and developers depend on Foundation. We have business support, training and consulting to help grow your product or service.
Transform your career with comprehensive Foundation Training and Certification
ZURB has been practicing product design since 1998 and our online webinar training will teach you and your team the same valuable skills our designers use on a daily basis.
Quick Project Starts
Spin Up Projects Faster Than Ever Before
Our new command line tool (CLI) lets you set up blank Foundation for Sites, Apps, or Emails projects with fewer dependencies than before. You can also install through NPM, Bower, Meteor, or Composer.
Material Framework
Material Design - это способ рассказать сообществу, как можно достичь красивых изменений, не затрачивая много времени на проектирование и планирование, а применяя научно обоснованные принципы в простой концепции веб-дизайна.
Material Design приобретает все большую популярность с тех пор, как Google сделал спецификации общедоступными. С момента его появления уже успел увидеть свет целый ряд фреймворков и руководств, целью которых является помощь дизайнерам / разработчикам в использовании Material Design в своих проектах.
Material Framework - это один из немногих Material Design CSS framework , которые мы будем рассматривать в этой статье. Он является одним из самых простых в использовании. Он использует только CSS , поэтому вам нужно только загрузить библиотеку CSS и обратиться к документации, чтобы узнать, как работает синтаксис и как начать использовать элементы Material Design.
Leaf - это еще один гибкий и минималистичный Material Design фреймворк, который разрабатывается Кимом Корте - молодым разработчиком из Швеции. Leaf также использует CSS и предлагает различные способы интеграции элементов Material Design . Просмотрите раздел « Компоненты » в меню фреймворка, чтобы узнать о возможностях Leaf больше.
Siimple
Минималистичный CSS-фреймворк , который служит основой для создания чистого плоского дизайна. Фактически фреймворк задается всего 250 строками кода, и его можно сжать в архив размером 6 Кб. Это полезно для тех, кто только делает первые шаги в веб-дизайне и нуждается во фреймворке, с которым можно просто экспериментировать.
History of Foundation
A little backstory on how and why Foundation was created and grown.
Foundation had its secret origins in the ZURB style guide back in 2008, which we used on every client project. Eventually, we decided we needed a framework that allowed us to prototype rapidly. We took our global CSS, jQuery plugins, common elements and best practices, and whipped them into what became Foundation, which we first released to the public in 2011. We decided to open-source Foundation because we knew it would help push responsive design forward, but mostly to help people design better and faster.
Like Hari Seldon, we predicted the future. We saw that mobile was becoming more popular — and more important. We knew we had to have something more functional and fluid to work on different screens, different orientations. That the framework had to be responsive was a no-brainer. And we were the first open-source framework to be responsive. We were also the first semantic framework and the first to be Mobile First. When Foundation 5 came out, we were also be the first to include Sass partials.
Throught the years, Foundation has grown a dedicated community of designers and developers. Along with that, our mascot, the Yeti has also changed. We continue to explore uncharted territories to ensure Foundation remains the most advanced responsive front-end framework in the world … and beyond!
23,900
GitHub Stars
Forks on GitHub
Top 30
Open Source Project
Daily Google Searches
Contributors
About ZURB
A T-shaped team of product designers changing the way people around the world design website, products and services.
ZURB is a product design company based in the Campbell, CA. Since 1998, we've partnered with companies like Samsung, eBay, McAfee, Mozilla, Netflix, SAP and over 250 startups to design better products, websites and services. We've considered our customers and employees integral parts of our success as a company. No matter their job title or role, we consider all of them designers. They've helped us build an amazing company and consistently focused us on designing great products and services.
Our Foundation open-source front-end frameworks are used by millions of designers and developers around the world to create amazing responsive websites, applications and emails. Our Notable Platform is built for Progressive Design, because getting from vision to product is hard work. It takes momentum and drive to learn from each iteration and get buy-in along the way. Most of all, it takes a team working together, pushing each other toward the win.
В этой статье мы сравним два фреймворка: Bootstrap и Foundation . Подробнее о том, как использование фреймворка может ускорить и упростить процесс разработки, можно прочитать ниже:
Motion UI
Easily Create Custom Animations and Transitions
Motion UI is our Sass based animation library that will help you add meaningful motion to your websites. This Sass library includes more than two dozen built-in transition and animation classes. It's very customizable and super easy to create your own with the Sass mixins.
Sculpt
Файлы CSS могут занять довольно много места, когда мы начинаем задавать стили и прописывать различные функции. Но большинство CSS-фреймворков , присутствующих на сегодняшний день на рынке, как правило, компактные и минималистичные. Sculpt является одним из таких компактных фреймворков, в котором основной упор сделан на мобильный и адаптивный дизайн. Sculpt был разработан специально для обслуживания через настройку медиа-запросов мобильных устройств с соответствующими размерами экрана.
Задача Sculpt - помочь разработчикам, дизайнерам обрабатывать запросы пользователей мобильных устройств с помощью простого дизайна, который позволяет быстро создавать функциональный мобильный сайт. Даже те пользователи, которые посещают ваш сайт через устаревшие браузеры, будут иметь возможность попробовать его мобильную версию.
Семантически чистый код является визитной карточкой Sculpt . Он включает в себя таблицу стилей, построенную на 25 пиксельной базовой линии типографики. Все заголовки, абзацы и списки создаются на ее основе.
Foundation
На сегодняшний день Foundation является одним из самых популярных front-end фреймворков на планете. Этот адаптивный фреймворк предоставляет дизайнерские решения в распоряжение тех, кто хочет быстро создать сайт, шаблон электронного письма или веб/мобильное приложение без необходимости тратить время на приобретение профессиональных навыков. Foundation прост в освоении, и с помощью его дополнительной справочной литературы практически каждый может всего за несколько недель в совершенстве овладеть фреймворком.
Faster to Learn
To help you improve your future-friendly website building skills, we've improved our documentation and created a community forum so you can learn more quickly. We've also written a new "Getting Started" guide that gets you up going with Foundation faster than you can make the Kessel Run. There's also our Foundation Forum where you can ask the entire Foundation community for help.
Выбор правильного CSS-фреймворка для вашего следующего проекта
CSS - это развивающийся язык, и оставаться в курсе последних тенденций довольно непросто. Фреймворки помогают преодолеть разрыв между необходимостью писать каждый отдельный запрос самостоятельно и использованием библиотеки, которая сделает это за вас. Как вы могли понять из этой статьи, CSS-фреймворки включают в себя ряд структур: типографика, сброс CSS , элементы интерфейса, глобальные стили и адаптивные сетки. Их можно использовать по отдельности или комбинировать друг с другом.
CSS framework незаменимы при решении задач обеспечения кроссбраузерной совместимости и адаптации под различные типы устройств. Благодаря им ваши сайты будут выглядеть одинаково хорошо на любых типах устройств. Большинство из представленных в этом обзоре CSS-фреймворков предоставляют возможность построения адаптивных шаблонов и позволяют работать над проектом нескольким разработчикам. Это в свою очередь позволяет сэкономить время и бюджет.
Пожалуйста, оставляйте ваши мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, лайки, подписки, дизлайки, отклики!
Baseguide
Это минималистичный и компактный CSS3-фреймворк , построенный на базе SASS . Он собирает необходимые компоненты веб-дизайна в небольшую, но стабильную библиотеку. Все компоненты полностью адаптивны и масштабируемы. Вы можете управлять формами с помощью оригинального CSS .
The most advanced responsive front-end framework in the world.
Faster for Users
Foundation has a faster core that allows you to create beautifully optimized pages for whatever screen you want. The updated core also removes unnecessary wait time for users, especially for animations and transitions. The new updated visual style is simpler, cleaner, sexier and faster to restyle.
Что такое CSS Framework?
Разработка сайта или приложения может потребовать много времени и усилий. CSS-фреймворки обычно используются разработчиками и веб-дизайнерами как инструмент для ускорения рабочего процесса.
CSS-фреймворк также иногда называется интерфейсной платформой. Он представляет собой пакет, состоящий из определенных HTML , CSS и JS , которые можно использовать при создании веб-проекта. Благодаря этому не нужно вводить код каждый раз, когда создаете сайт или веб-приложение. В этой статье мы уделим особое внимание интерфейсным фреймворкам.
CSS-фреймворк состоит из следующих компонентов :
- HTML-код , который помогает создать структуру страницы;
- Стили типографики;
- CSS для визуального изменения элементов ( стандартный набор простых в использовании классов );
- JavaScript для изменения динамических элементов, таких как выпадающие меню и т. д.;
- Адаптивные медиазапросы;
- Исправления ошибок кроссбраузерной совместимости.
Если мы посмотрим на Google Trends для CSS фреймворка Bootstrap 4 ( альфа-версии ) и « Foundation 6 » ( последней версии ), похоже, что с Bootstrap работают гораздо активнее. В этой статье мы сосредоточимся на сравнении Bootstrap 4 и Foundation 6 . Первый Bootstrap 4 alpha был представлен более года назад и на данный момент он почти запущен:
Согласно данным BuiltWith , 11,8% из 100 тысяч лучших сайтов используют Bootstrap . И 2,3% - Foundation Framework .
Foundation Support
We know how important it is for you to get solutions. We have a team ready to answer your questions.
Materialize
Materialize является одним из тех фреймворков, которые превосходят своих конкурентов по функциональным возможностям. Materialize получил более 15000 звезд на GitHub , что делает его самым популярным CSS-фреймворком на основе Material Design . Команда проекта сосредоточила свои усилия на том, чтобы предоставить пользователям четыре различных категории элементов: CSS , JavaScript , « Мобильные » и « Компоненты ». Каждая категория состоит из целого ряда примеров с описанием того, как лучше применять Material Design в конкретных ситуациях.
Их страница витрины является удивительным примером того, как воплотить функции фреймворка в жизнь. Она также содержит несколько вдохновляющих проектов дизайна.
Mobile First
You can build for small devices first. Then, as devices get larger and larger, layer in more complexity for a complete responsive design.
Fewer Base Styles
The Styles You Need, None That You Don’t
The base styles act as a coded wireframe rather than a final design. Simpler CSS styles allow you to more easily modify them to fit your brand.
Foundation Certification
Foundation certification shows that you understand responsive design and validates your coding skills with this public accreditation. Foundation Certification will help you become more marketable, get hired faster, and promote yourself.
A front-end Framework is a collection of HTML, CSS, and JavaScript containing design patterns that you can build upon. They keep you from wasting time rewriting boring, boilerplate code over and over again. In addition to saving time, they actually help you write better code. Sites built on Foundation work great on multiple devices including desktop and laptop computers, tablets, and mobile phones because it is a responsive framework that uses CSS media queries and a mobile-first approach. Designers can create unique designs for a variety of screen sizes, ensuring a smooth experience no matter the device.
12,100
Commits So Far
Foundation includes tools and resources like a robust and flexible responsive grid with tons of handy options, modals, typography, navigation components, and form elements that designers can quickly plug in to their products. Foundation is also modular, meaning you can use as little or as much of it as you need.
Because developers all around the world (including us here at ZURB) are using Foundation daily, lots of iteration is made on the code and bugs are constantly being squashed. Think of it as a collection of shared wisdom, with an entire global community figuring out best practices. Easy-to-use, quick to learn and full of powerful tools, Foundation is the most advanced front-end framework available.
Building Blocks & New Templates
A Growing Library of Resources.
We made some shiny new templates to kick off your next site or get some layout ideas. Pop these pre-made Building Blocks into your projects and save yourself time and resources.
A brief timeline
A quick look at how Foundation has grown through the years.
- The ZURB Style Guide is created to help us speed up our work. It’s a handy collection of HTML, CSS and Javascript that we use on every client project. The ideas of ZURB Style Guide evolve over the years and form the basis for a new framework, Foundation.
- ZURB style guide was solidified and named Foundation. It is being used internally on all client projects and ZURB sites and apps.
-
is released to the public as an open source project! Foundation is the first responsive front-end framework and helps lead the charge for RWD across the web.
-
is released! This version comes with Sass and is the first framework to use mixins.
February
November
November
- We launched Foundation for Apps, the first front-end framework created for developing fully responsive web apps. Foundation for Apps is now part of the ZURB Playground.
- Both Foundation for Sites and Emails frameworks are united under the Foundation name, a complete solution for quickly building responsive websites, apps and emails.
Blueprint
CSS3-фреймворк , специально разработанный, чтобы помочь вам сократить время, необходимое для создания адаптивных сайтов. Все начинается с простой в использовании и настройке системы сеток, которая служит основой для создаваемого дизайна.
Встроенная библиотека функций типографики обеспечит соответствие шрифтов и их размеров остальной части дизайна. Также доступен набор скриптов, которые могут быть использованы для настройки макета. И вам не нужно беспокоиться о том, что сайт станет слишком раздутым, потому что особое внимание авторы уделили именно простоте.
Foundation Training
We have a growing number of online courses to get your team started with Foundation. We can also come to you for custom training.
Bootstrap
Bootstrap 3 ( текущая версия, пока Bootstrap 4 готовится к выходу ) является самым популярным в мире front-end фреймворком для создания сайтов, макетов веб и мобильного дизайна.
Хотя Bootstrap не является только CSS framework, CSS3 - это одна из основных частей процесса разработки на Bootstrap . При этом фреймворк позволяет протестировать современные элементы дизайна и функции CSS3 . CSS составляющие Bootstrap могут быть использованы для построения сеток, форм, кнопок, управления изображениями, реализации подсказок и работы с адаптивным дизайном.
Преимущества и недостатки использования фреймворков
Существует множество преимуществ использования CSS-фреймворков . Одним из них является возможность не начинать каждый проект или сайт полностью с нуля. Наличие хорошей базы может сэкономить много времени.
Вот несколько других преимуществ :
- Легче поддерживать код с помощью сниппетов и библиотек;
- Лучшая организация и более простая установка;
- Более простые решения, которые уже созданы для вас;
- Адаптивные медиазапросы и исправления ошибок кроссбраузерной совместимости;
- Большинство из них бесплатны и имеют открытый исходный код;
- Стабильный и протестированный код от сотен разработчиков;
- Возможность участвовать в Github ;
- Регулярные обновления, исправления ошибок и новые функции.
Но использование фреймворка Bootstrap 3 на русском может быть сопряжено с рядом недостатков :
- Иногда требуется настроить много параметров, чтобы заставить его работать;
- Нужно ознакомиться с документацией для изменений при обновлении;
- Может отсутствовать необходимая функция, с помощью которой нужно ввести сторонний актив;
- Наличие ненужного кода.
Foundation
Адаптивный frontend фреймворк, созданный ZURB . Он имеет открытый исходный код. Foundation был выпущен в 2011 г. по лицензии MIT . Данный фреймворк имеет модульную структуру и состоит в основном из стилей Sass . Он построен на основе сетки в 940 пикселей, которая является адаптивным макетом.
Foundation также предоставляет пользователям стартовые шаблоны, позволяющие быстрее создавать веб-проекты. Вот список некоторых известных брендов, использующих Foundation : Adobe , eBay , EA , Amazon и Mozilla :
В загрузочном пакете Foundation ( в настоящее время Foundation 6 ) вы найдете следующие папки и файлы, в которых сгруппированы JS и CSS вместе с минимизированными версиями.
В Foundation версии 6 разработчики значительно сократили размер выводимого файла CSS , реализовав примерно 40-50% сокращение кода:
Foundation поддерживает последние стабильные версии всех основных браузеров и платформ.
Касательно Windows : поддерживаются Internet Explorer 9-11 . Но Foundation не поддерживает IE8 из-за некоторых свойств сетки, которые он использует, а также JavaScript :
Сама по себе история CSS3 очень увлекательна. Это одна из тех технологий, которые дают нам возможность подробно рассмотреть развитие структуры Сети. Мы можем увидеть, когда впервые были введены такие вещи, как медиа-запросы . Это дает возможность понять, как долго существует адаптивный веб-дизайн, CSS framework и как много было достигнуто за такое короткое время.
Сообщества, такие как CodePen , позволили разработчикам и просто креативным энтузиастам лучше понять все возможности CSS3 . Каждый день сотни новых концептов добавляются на CodePen , и участники сообщества могут исследовать их и использовать в собственных проектах.
Теперь, без дальнейших предисловий, начнем наш обзор лучших CSS3-фреймворков , доступных на сегодняшний день.
Built on Sass
We decided that Foundation would be built on Sass (Scss, technically) a little over a year ago and we’ve never looked back. Not only is Sass in constant development, but through Sass you get the power of semantic code, faster styling, and tons of awesome programmatic features.
Foundation by the numbers
A11y Friendly
The Base for Fully Accessible Sites
All code snippets come with ARIA attributes and roles along with instructions on how to properly use these components. This helps ensure that every website built on Foundation 6 can be used anywhere, on any device, by anyone.
Built for Four Corners
When we released Foundation in 2011, we wanted to create a way for people to easily build responsive sites, and that continues to be our driving motivation. At ZURB, we almost exclusively create responsive sites for ourselves, and our clients, and Foundation plays a huge role in that. We use it every day, and we know it works.
Share Responsive Prototypes
Design the Code
Upload your responsive design web pages to get contextual feedback on any breakpoint. Stakeholders and collaborators can annotate and review coded web pages on any device. Take your Foundation projects from prototype to production using Notable Code.
Foundation 6’s Prime Directive
Our goal: to provide a framework that allows others (and ourselves) to build better designed, future-friendly sites. Being the fastest way to responsively prototype and build for any device is not enough. Foundation also has to make us better designers that thrive in the ever-evolving world of mobile devices. That’s why we strive to make every new version of Foundation more advanced so you can code smarter and faster. Explore Foundation's Features →
Build products, apps and services
Foundation is the professional choice for designers, developers and teams.
Sites
Foundation for Sites is jam-packed with features to help people rapidly build content-focused websites. Foundation for Sites provides you with HTML, CSS, & JavaScript to help you quickly prototype. It's easy to customize & extend to get your project polished & shipped.
Learn more about Foundation for Sites
Foundation for
Intro to Foundation
There's no faster way to learn to build responsive sites and apps with Foundation. You'll learn how to get started, Foundation's XY grid, time saving UI components and best practices, as well as using and customizing Foundation's JavaScript helpers.
Concise CSS
Это компактный CSS grid framework , который предоставляет доступ к большому количеству функций разработки. Concise построен на основе принципов объектно-ориентированного CSS с сохранением семантики. Это обеспечивает простоту изучения фреймворка, а также высокий уровень гибкости. Фреймворк характеризуется простотой среды разработки, которая не требует добавления стилей. Также доступны дополнительные библиотеки, которые могут быть использованы в качестве компонентов для ваших проектов. При написании кода используется SASS .
После выхода обновления все, что вам нужно сделать, это обновить только наиболее важные файлы ядра. При этом ранее созданные стили остаются нетронутыми. Также этот фреймворк является весьма привлекательным благодаря отзывчивой команде, которая поддерживает проект.
Responsive Grid System
Это последний CSS grid framework в нашем обзоре. С помощью него можно легко создавать и задавать стили сеточных адаптивных макетов сайтов. Чтобы процесс был еще проще, можно использовать встроенную функцию генератора сетки . Также доступна библиотека предустановленных шаблонов .
YAML удается остаться одним из лучших в течение более десяти лет, он до сих пор является одним из наиболее известных CSS-фреймворков в мире. YAML ( Yet Another Multicolumn Layout ) - это модульный, гибкий CSS-фреймворк для создания адаптивных сайтов. Он исповедует подход, базирующийся на независимом от дисплея дизайне, и предоставляет очень модули для гибких макетов. Это идеальная отправная точка для создания по-настоящему адаптивного дизайна.
YAML воплотил в себе все новейшие стандарты интернета. Он оптимизирован для быстрой HTML5- и CSS3-разработки . Написан с использованием SASS .
Advanced Foundation
Take your skills to the next level and impress your co-workers with Advanced Foundation. You'll come away with advanced XY Grid skills, how to amplify your skills using Sass, ZURB's build system to automate tasks, and advanced JavaScript customizations.
Semantic
Everything is semantic. You can have the cleanest markup without sacrificing the utility and speed of Foundation.
Customizable
You can customize your build to include or remove certain elements, as well as define the size of columns, colors, font size and more.
Engineering Studios
We've been building products since 1998 and we can help you use Foundation for your next project.
ZURB Development Stack
Prototype with the tools ZURB uses
Use the same template that ZURB uses on all our client projects. This starter template is a souped up stack complete with a custom static site generator to help flatten files into single HTML documents. It compiles your Sass, gives you Handlebars templating, UglifyJS, UnCSS, and image compression.
Faster to Code
With a medium grid and custom semantic breakpoints, creating websites and applications for any device is faster than ever. There's a new command line tool that allows you to spin up Foundation projects at super speeds. And our Foundation Business service allows you to receive professional support, consulting, tools and training for all your company projects.
The Foundation for Your Business
How Foundation is the professional choice for companies
Foundation isn't solely for individual designers, but for entire teams. And its benefits are proven every day here at ZURB. We battle test the framework daily on every client or internal project that we do, from marketing sites to web/mobile applications. And if it helps us do what we do, then it can certainly help other companies, designers and developers as well. That makes Foundation the perfect foundation for any business's product. And we can help. Learn more about Foundation Business →
Semantic UI
Semantic в последние несколько лет стал довольно популярен, и сегодня можно часто видеть, что его подход к проектированию применяется другими фреймворками и инструментами, которые допускают использование сторонних руководств по стилям. Основным преимуществом Semantic является разнообразие элементов, которые могут быть созданы с его помощью: разделители, кнопки, загрузчики, формы, хлебные крошки, формы отзывов и комментариев, сложные модули ( начиная от всплывающих окон и до контекстных меню ).
Optional Flexbox Grid
A Slick New Grid
For users who can embrace the newest of technology, Foundation comes with an optional Flexbox based grid. It’s the same grid you know and love, but with even better source ordering and alignment options.
Upload your Code
Notable offers a suite of apps to help you design products, and allows you to host and share your Foundation code too.
Responsive design gets a whole lot faster
A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, including these handy HTML templates to help get you started!
Foundation for
UIkit
CSS в значительной степени ориентирован на построение веб-интерфейсов. UIKit - это модульный front-end CSS framework , который призван помочь дизайнерам в быстром создании простых веб-интерфейсов, красивых и гибких в настройке. Библиотека компонентов UIKit соответствует современному подходу к отображению и использованию популярных компонентов. UIKit предлагает более 30 модульных и выдвижных компонентов, которые могут быть объединены друг с другом. Компоненты разделены на различные секции в соответствии с назначением и функционалом.
Также фреймворк содержит две предустановленные темы – « Градиентная » и « Плоская ». Обе предоставляют возможность свести в стабильную систему все компоненты UIKit . Это отличный полигон для экспериментов, на котором можно опробовать все полезные функции CSS3 . Просмотрите раздел Витрина , чтобы узнать больше о том, какие сайты и как можно построить с использованием основных компонентов и модулей UIKit . Он также предоставляет пользователям целый ряд учебных пособий для самостоятельного изучения фреймворка.
Turret
Фреймворк для быстрой разработки сайтов, использующий для обработки современных функций CSS3 LESS . Сам фреймворк нормализует HTML , чтобы сделать разработку с помощью Turret приятной и доступной. Основными особенностями Turret являются адаптивный веб-дизайн, основанный на принципах минималистичного дизайна, HTML5 . А также общая семантическая разметка, которая помогает без особых сложностей преобразовать HTML5 в функциональный дизайн.
Flexible Navigation Patterns
Customizable and Modular Navigation
We’ve created a menu system that is completely customizable and modular. The new Menu component is a huge leap forward because it combines several components, saves many lines of code, and makes a modular navigation you can use on most every project.
Essence
Компактный Material Design CSS framework , который использует оригинальное руководство по стилям из официальной спецификации Material Design и сочетает его с популярной библиотекой ReactJS .
Используйте весь потенциал Essence , чтобы создавать быстрые и надежные интерфейсы мобильных и веб-приложений. Стили и компоненты Essence задаются очень простым синтаксисом, что позволяет начать работу с фреймворком уже после нескольких коротких уроков.
Responsive Cat
Это CSS framework , который в качестве основы для построения синтаксиса использует Stylus . Полностью адаптивный и совместимый со всеми современными устройствами и браузерами.
Modular JavaScript Utilities
Create Your Own JS Plugins
We reduced the amount of code in our JS plugins significantly by making each plugin smaller and creating more shared utility libraries. The utility libraries are publicly accessible so you can make your own amazing plugins.
Bootstrap
Bootstrap , который первоначально назывался Twitter Blueprint , был создан Марком Отто и Джейкобом Торнтоном и выпущен 19 августа 2011 года.
" Небольшая группа сотрудников Twitter начала улучшать внутренние аналитические и административные инструменты нашей команды. После предварительных обсуждений этого продукта мы поставили перед собой более амбициозные задачи по созданию инструментария для тех, кто может использовать его в Twitter и за его пределами. Таким образом, мы намеревались создать систему, которая помогла бы создавать новые проекты на ее основе, так и появилась идея Bootstrap ." - Марк Отто
Это внешний интерфейс с открытым исходным кодом, состоящий из HTML , CSS и JavaScript . Он имеет модульную структуру и в версии 3 состоит из таблиц стилей LESS . Но начиная с Bootstrap 4 , разработчики перешли на использование препроцессора Sass CSS .
Он основан на сетчатой системе 1,170 пикселей, которая представляет собой адаптивный макет. В пакете фреймворка Bootstrap 3 ( в настоящее время доступна версия 4.0.0-alpha.3 ) вы найдете следующие папки и файлы, в которых сгруппированы JS и CSS вместе с минимизированными версиями:
Фреймворк Bootstrap поддерживает последние стабильные версии основных браузеров и платформ. Что касается Windows , то поддерживаются Internet Explorer 9-11 и Microsoft Edge , но не IE8 . Если нужна поддержка этого браузера, используйте Bootstrap 3 :
Modest Grid
Иногда все, что нам на самом деле нужно для реализации проекта, это надежный, адаптивный и современный шаблон сетки. Modest Grid предоставляет пользователям шаблонную систему сеток, которая будет прекрасно работать на современных устройствах, а также обеспечит отличный фундамент для использования компонентов из других фреймворков. Проект находится на стадии активного развития , поэтому ожидается, что он будет улучшаться по мере эволюции самого CSS .
Cascade
Cascade предлагает семантические и несемантические сеточные макеты, базовые шаблоны, табличные конструкции, элементы навигации, типографику и многое другое. Универсальный подход позволяет разработчикам создавать высокопроизводительные веб-страницы под старые и новые браузеры без необходимости беспокоиться о совместимости.
Многие разработчики нашли этот minimal CSS framework крайне полезным благодаря его модульному подходу к использованию конкретных функций в рамках проектов. Cascade позволяет выбрать только наиболее важные компоненты, необходимые для ваших проектов, что в свою очередь позволяет минимизировать размер и увеличить производительность. В этом он похож на Bootstrap , только Cascade предоставляет гораздо больше контроля над потоками.
Customizable Sass Grid
Any Combination of Columns You Need
The Sass grid mixins have been made smartly to give you even more flexibility to customize the grids with any number of columns. Four column grid inside a five column grid inside a twelve? Go for it!
Читайте также: