Началось все с того, что я подумал, что должны же быть какие-то аналоги bootstrap, и инструменты для подбора цветов, и редакторы для верстки, и методики для компиляции стилей и управления файлами...
Здесь несколько групп ссылок по темам: bootsrap, less, on-line editors, desktop... Brackets...
25+ Best Bootstrap Editors & Builders
bootply online Bootstrap Editor and Builder
frontenda online with tutorial
cluckles online
codeply A Responsive Design Playground& Frontend Editor.Use, compare & test responsive frameworks. Find code snippets & examples. Start with the responsive framework of your choice. Bootstrap Foundation MaterializeCSS PureCSS SemanticUI Skeleton UIkit Unsemantic
getkickstart.comThe CSS Library that Loves to Be Extended... Faster and lighter than Bootstrap... Installation instructions are available for Simple HTML, Rails, Gulp, and Jekyll
boottheme.comTheme Generator. Auto generate Bootstrap theme by clicking on the Dice button. Use Drag and Drop UI to change colors and to add effects such as gradient. It is as easy it can get. Also you can edit LESS variables and see result instantly in the Live Preview panel. You can also import Bootstrap variables.
I have installed
pingendo desktop free
mobirisedesktop free
kineticwingKiWI Smart, Lightweight and Portable IDE for faster and easier web development
crunch Crunch lets you write Less, CoffeeScript, Markdown*, and then automatically saves CSS, JavaScript, and HTML after you’ve made changes. Want to write just plain CSS? XML? Haskell? MUSHCode? Crunch lets you do that too.
layoutit.com
stylebootstrap.info Create unique web design with Twitter Bootstrap. Kw: themes, templates, styles. generator. customize. Works with any version from now! Just add a downloaded file after your bootstrap.css
Bootstrap 3 Less Workflow Tutorial Bootstrap makes full use of Less. Almost all of the mobile first/responsive properties of the grid are built using Less variables and math functions.
master-bootstrapThis template is based in Twitter Bootstrap 3, for Joomla! 3.x.
getbootstrap.com/customize
Create unique web design with Twitter Bootstrap. Kw: themes, templates, styles. generator. customize. Works with any version from now! Just add a downloaded file after your bootstrap.css Track your macronutrient, vitamin, and mineral intake from Vitamin A to Zn - absolutely for free!
bootzee.com An overview of bootzee.com, how to select a template, edit files, add images and link your site to a domain
LESS CSS total support for JUI in one file Core Bootstrap and JUI LESS CSS files are housed in /media/jui/less. Simply import any core LESS you desire and create custom LESS to customize your entire site's styles. When you're done compile 1 template.css file that will power your entire site. No more overrides. No more duplicate CSS.
Использование LESS при создании шаблонов для CMS Joomla!
LESS: программируемый язык стилейLESS – это надстройка над CSS. Это значит, что любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS. Это замечательно, потому что существующий CSS уже является работоспособным LESS кодом, что уменьшает порог вхождения в новую технологию.
ObjGen - Live HTML Editor and Twitter Bootstrap Generator
bootstrap-wysiwyg tiny wysiwyg rich text editor for Bootstrap
Joomla LESS Not all LESS compilers are equal. The LESS compiler used for the Joomla core for code style consistency is obtained from leafo.net/lessphp. If you're working on your own template you can use any compiler you like.
Joomla! 3.x Bootstrap 2.3.2 Demo
The new Master Bootstrap template for Joomla ! 3.x
comes with Bootstrap 3.3.5 integrated. The simplest way to build professional sites... Your imagination and your experience are the limit!
Desktop editors¶
Work with Extract for Brackets (Preview)
How to Use Brackets
Writing Brackets extension - part 1
LESS AutoCompile is an extension for the code editor Brackets that adds automatic compilation of LESS files upon saving.
Research: Simplified LESS Support This document summarizes several options for getting simple support for LESS in various core Brackets features, assessing the implementation effort, robustness and level of feature support.
Brackets in Browser Although Brackets is packaged as a desktop application, it's built almost entirely in HTML/CSS/JS - and most of that code will run in a browser with no modifications. The functionality provided by Brackets's native desktop shell (brackets-shell) needs to be replaced or disabled, however.
Pingendo Who uses Pingendo? Developers, to boost productivity and play with new concepts. Designers, to design visually and produce developer-readable source code. Beginners, to create while learning developer best practices and exploring Bootstrap features.
Примеры тем¶
Free UI Kits built on Bootstrap for any developer that wants to build a cool looking and functional website. Enjoy! http://pixelkit.com/free-ui-kits/
Dark Velvet
Flat UI Free User Interface Kit
50 Free Bootstrap 3 Templates and UI Kits
bootstrap-material-design
This is material design We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.
A collection of the most popular Bootstrap themes and templates on Start Bootstrap.
Free themes for Bootstrap
Free Bootstrap Themes
JSN Solid is an elegant template that suit perfectly for any educational institute's website. With responsive layout and fully support K2 as well as Kunena, JSN Solid is one of the most featured templates available on the market today.
cyborg bootswatch.com
readable
40+ BEST EDUCATION JOOMLA TEMPLATES FREE AND PREMIUM
####Онлайн инструменты для настройки тем
How to build your theme faster ? We first developed this bootsrap theme editor for our own purpose to create theme a lot faster. Here are some technics to become a bootstrap theme chef with this tool.
Customizing bootstrap
Bootstrap Live Customizer customize variables.less on-the-fly. This is a live customizer for Bootstrap (aka a Bootstrap Themeroller), very similar to Bootstrap's customizer (it works with the same variables), but here the results of the edits are visible live on this page. The theme.less file is also editable which can be used to overwrite any style rule (the editable less variables can be used in theme.less as well)
Подбор и генерация цветов для тем¶
lavishbootstrap Lavish, Bootstrap like a King Generate your own Bootstrap color scheme from an image and customize to your taste Now compatible with Bootstrap 3.3.4 and Foundation 5.5.2(NEW)
Generate beautiful Twitter Bootstrap themes using the Adobe kuler / COLOURlovers color scheme
color.adobe.com
colourlovers.com
photocopa
Bootstrap magic featuring Bootstrap 3.1 Bootstrap themes generator, featuring Bootstrap 3.1 and AngularJS. Update your variables, change it with a smooth colorpicker and get instantly the result.
•For more information on Autre planete please check out http://www.autreplanete.com/
•For more information on AngularJS please check out http://angularjs.org/
•For more information on Twitter Bootstrap please check out http://twitter.github.com/bootstrap/
•For more information on Webfontloader please check out https://github.com/typekit/webfontloader
Create your website easily with Pikock, try it out on We first developed this bootsrap theme editor for our own purpose to create theme a lot faster. Here are some technics to become a bootstrap theme chef with this tool.
Подбор цветов и фактур¶
COPASO colourlovers.com COPASO : Color Palette Software
Creative Market is a platform for handcrafted, mousemade design content from independent creatives around the world.
Paletton.com is a designer color tool designed for creating color combinations that ... (the legacy 216-color palette). The palette can be exported in many ...
Palette Generator Find design inspiration with natural image palletes extracted using k-means algorithm. This palette generator will create a color palette based on the predominant colors in your image. You can use it in your art projects, web design or home decor.
Color palette ideasRed is the most vibrant color and it expresses many positive feelings in life. It is the color that is able to attract our attention almost immediately. Red is the color of the audacity, determination, it stimulates a sense of urgency and immediacy. Some studies have shown that in the presence of red an average consumer tends to spend more and buy more quickly. Red is also the color of danger, and is often associated with unpleasant situations (as red as blood, red as an emergency signal, red as debt). Red can be combined with the orange or green to produce a successful color scheme. Use a darker shade of this color in designed that need to express sensuality and femininity (such as cosmetics and perfumes). Avoid the red websites in the medical / health related projects and those in the financial sector (red is the color of the decline and the economic problems).
Color Palette Generator Make color schemes. Enter the URL of an image to get a color palette that matches the image. This is useful for coming up with a website color scheme that matches a stock photo a client wants to work with. If you like this color palette generator, you might like ColorHunter.com
ColorHunter.com
StyleBootstrap.info Create unique web design with Twitter Bootstrap. Kw: themes, templates, styles. generator. customize. Works with any version from now! Just add a downloaded file after your bootstrap.css Track your macronutrient, vitamin, and mineral intake from Vitamin A to Zn - absolutely for free!
Yeoman is a generic scaffolding system¶
Yeoman is a generic scaffolding system allowing the creation any kind of app. It allows for rapidly getting started on new projects and streamlines the maintenance of existing projects.
Yeoman is language agnostic. It can generate projects in any language (Web, Java, Python, C#, etc.)
Yeoman by itself doesn't make any decisions. Every decision is made by generators which are basically plugins in the Yeoman environment. There's a lot of publicly available generators and its easy to create a new one to match any workflow. Yeoman is always the right choice for your scaffolding needs.
Here are some common use cases: •Rapidly create a new project •Create new sections of a project, like a new controller with unit tests •Create modules or packages •Bootstrapping new services •Enforcing standards, best practices and style guides •Promote new projects by letting users get started with a sample app •Etc, etc
How TO - Include HTML
Что такое HTML импорт и как это работает? Перевод статьи «What are HTML Imports and How Do They Work?», Paula Borowska. Вы когда-нибудь замечали, что включение одной HTML страницы в другую, это какая-то инородная концепция? Это то, что должно быть просто, но не это не часто происходит. Это не невозможно, но трудно. К счастью есть HTML импорт, который позволяет запросто помещать HTML страницы, а также CSS и JavaScript файлы, внутрь других HTML страниц.
How do I include one HTML file in another?
MDN Web technology for developers CSS
Посты чуть ниже также могут вас заинтересовать
Комментариев нет:
Отправить комментарий