less.js ، lessframework & css grids ala blueprint أو 960.gs

Question

حسنًا ، لقد جاء أقل. JS ، ويبدو أن أحلامي في إنشاء إطار عمل CSS (وخاصة نظام "الشبكة") ، مع لغة CSS "مجردة" قد تكون على وشك أن تتحقق.

هذا هو ، 960 والمخطط رائعان وجميعهم ... لكن الأمر أزعجني أن أضع معلومات الأناقة في علامة HTML ، مثل:

class="article grid_4 pull_2"

أو أيا كان بناء الجملة :)

لذا ، يبدو الآن أنه يمكننا القيام بذلك بهذه الطريقة:

.article {
  .grid_container();
  .grid_four();
  .pull_two();
  .last();  
}

weeeeeee!

لذا ، أنا على وشك أن أتعثر في تطوير هذا بنفسي - لكنني متأكد من أن هناك بعض الأفعى التي فعلت ذلك بالفعل - لذلك قبل أن أحصل على أي رفع ثقيل ...؟

أي خيوط؟

بلطف

داريل.

Answer 1

هذا هو إطار CSS الذي تبحث عنه - http://semantic.gs/

نظام الشبكة الدلالية - تخطيط الصفحة ليوم غد. قم بتعيين عرض الأعمدة وعرض الحضيض ، واختر عدد الأعمدة ، والتبديل بين وحدات البكسل والنسب المئوية. كل ذلك دون أي فئات قبيحة. grid_x في ترميزك. أوه ، وهل ذكرنا أنها تستجيب؟ أحضر لك من قبل Less.JS وخالق شبكة 1 كيلو بايت.

Answer 2

لقد راجعت أقل ، لقد كانت دفعة بين ذلك والجديد ساس بناء جملة (SCSS) ، لكن ما جعلني أختار Sass هو أن لديها طريقة لتحويل CSS داخل رمز SCSS.

كانت الرحلة ذهابا وإيابا شيء أردت بالتأكيد. بمجرد حدوث ذلك ، إذن بوصلة قدم نفسه. كنت سأحاول استخدام شيء ما لترميز كل شيء في بيثون ، لكن من المنطقي تمامًا بالنسبة لي معالجة CSS ، خاصة وأنني أرغب في استخدام HTML5 ، وإذا تغيرت المواصفات ، فيمكنني تعديل الجيل.

Answer 3

راجع للشغل ، لقد بدأت هذا الإطار الذي كنت أتحدث عنه.

http://github.com/darylantony/lesser

أنا أستمتع به.